---
# System prepended metadata

title: Assignment 5 - Interaction techniques (graded)

---

# Assignment 5 - Interaction techniques (graded)

**Date**: 06/03/2022

**Group members participating**: Jakob Overgaard (201706812), Oilver Rask Schmahl (201805260), Tobias Fabrin Gade (201809466)

**Activity duration**: 8-10 hours on average per person.

## Goal
Our goal for this week was to finilize our concept and redo our 3D assets in respect to simplifing the models, so that material change is less cumbersome. This is because each model before hand consisted of 80+ textures each.

Additionally we want to finish our application and follow the guideliness issued in this weeks exercise by ensuring that we have atleast:
- 3 different interaction techniques with different actions.
- 3 different input techniques, where we use atleast 1 tracked image marker interaction and 1 relation (e.g. distance) between objects
- 3 different output techniques, where we use atleast 1 change of appereance and 1 animation on an object.




## Plan
For this exercise we plan to fullfill the project requirements by implementing 3 different interaction techniques which each focus on input and output formats required for the exercise.


**Shaking Gesture**
The first interaction technequie we plan to implement will be gesture based and works by shaking your phone. When the shake is detected, all objects in the scene will simply fall through the plane, wiping all excisting buildings. Additionally an explosion animation is added, to indicate that the building is being "leveled".

![](https://i.imgur.com/zzwyIqb.png)


***Technical Implementation Plan:*** We plan to implement this by looking at when the phones accelerometor data surpases a threshold and then adding a Rigidbody to all our objects in a given scene at run time and enable gravity to "true".

For the explosion animation we want to use a particle system animation and create a prefab that can be added as a child to the GameObjects.


**Tracked Image Marker**

![](https://i.imgur.com/qlgIjCS.png)

The second interaction technique is utilizing Unity's AR Tracked image manager. It detects different materials, in order to change the appearance of the houses. The library includes distinct pictures of roofs and bricks coloured in grey og red. 



***Technical Implementation Plan:*** In order to fullfill this feature, it will be beneficial to first implement the image marker feature from assignment two. Afterwards several features must be implemented as well. In order to do this, the manager must be able to recognize more than one picture and to handle the different events occuring based on the pictues, the script must be expanded. 
There must be a script for handling the image tracking, which would call a method to change either the bricks or roofs to the right material. 

**Relational Distance**
The final interaction technique we want to implement into our application is making objects in the scene react to each other, when they are within a certain distance from each other in "the real world". Specifically we want to dynamically create hedges between houses, when they are within 1 meter from each other.

![](https://i.imgur.com/wfptbJe.png)


***Technical Implementation Plan:*** We plan to implement this by calculating the distance between all houses, and if they are within 1 meter from eachother, a hedge will be created on the midpoint between the two houses. Some of the challanges regarding this is how to find all houses inserted into the scene, making sure that the hedges' position is updated accordingly when houses are moved around, and that hedges are only created for houses on the same plane (i.e. not between a house on the floor and one on the wall). We plan to use unity's tag system to solve this along with different methods for calculating midpoints and faceings.

## Results
### 1. Shaking Gesture Implementation
For detecting whether or not a phone has been shaken we collect the phones accelerometer data and handle it through a lowpass filter, for making a more accurate measurement of a shaking gesture.

If the data surpasses our predefined *_shakeDetectionThreshold (5.0f)* then we run a method from our *ObjectAdderScript*. 

Our code can be seen below:

```
void Update()
{
    Vector3 acceleration = Input.acceleration;
    _lowPassValue = Vector3.Lerp(_lowPassValue, acceleration, _lowPassFilterFactor);
    Vector3 deltaAcceleration = acceleration - _lowPassValue;

    if (deltaAcceleration.sqrMagnitude >= _shakeDetectionThreshold)
    {
        _objectAdderScript.RemoveOnShake();
    }
}
```

For making the objects Disapear on shake, we have looped through all objects in a scene and added Rigidbody to it and then afterwards ensuring that gravity is enabled for each of them.

Additionally to handle the animation, we created a custom particle system prefab and added this to all GameObject prefabs that can be spawned in the application. We then simple find this particle prefab "Explosion" and use *Play()* to display the animation.

We do not use *Stop()* because the animation is not set to be looping.

Our code for adding rigidbody and enabling animation can be seen below:

```
public void RemoveOnShake()
{
    foreach (Transform child in objectsHolder.transform)
    {
        child.gameObject.AddComponent<Rigidbody>(); // Add the rigidbody.
        child.GetComponent<Rigidbody>().useGravity = true;
        child.transform.Find("Explosion").GetComponent<ParticleSystem>().Play()
    }
}
```

The final result turned out pretty cool and a GIF of it can be seen below:

***ADD GIF ABOUT BUILDING FALLING THROUGH GROUND BOOYYAA!***


### 2. Tracked Image Marker Implementation
Unity includes a library for handling the images recognized and the library is used by the tracked image manager, which is coupled to the AR Session origin.

To handle the different events, we have included a script for handling the image tracking.
It subscribes to the Tracked Image Manager trackedImageChanged event, which notifies whenever an image is added, updated or deleted. Each image has a state, meaning the when it is not recognized in the picture anymore, its tracking state will likely change. 
This is not a problem in our case, as we only need to detect if an image occurs, as this makes a call to a method, that handles the change of material. 
That means that we only need to handle an updated event. 

    private void OnImageChanged(ARTrackedImagesChangedEventArgs args)
    {
        foreach (var updatedImage in args.updated)
        {
            var imgName = updatedImage.referenceImage.name;

            if (imgName.Equals("grey-bricks"))
            {
                objectManipulatorScript.UpdateMaterials(wallTag, greyBricks);
            }

            if (imgName.Equals("grey-roof"))
            {
                objectManipulatorScript.UpdateMaterials(roofTag, greyRoof);
            }

            if (imgName.Equals("red-bricks"))
            {
                objectManipulatorScript.UpdateMaterials(wallTag, redBricks);
            }

            if (imgName.Equals("red-roof"))
            {
                objectManipulatorScript.UpdateMaterials(roofTag, redRoof);
            }
        }

    }
    
In the ObjectManipulatorScript we have added a method called UpdateMaterials().
It takes a tag and material as argument in order to change the right objects to the right material. That implies that the objects that act as roofs and bricks has been tagged in unity.

We find all objects with the given tag, iterates through while we change their materiality to the given material. 

       public void UpdateMaterials(string tag, Material material)
        {
       
            // If values are null, exit!
            if(string.IsNullOrEmpty(tag) || material == null) return;
 
            // Find all objects with the tag
            var gameObjects = GameObject.FindGameObjectsWithTag(tag);
       
            // iterate
            foreach (var go in gameObjects)
            {
           
                // check if there is a mesh renderer component
                if (go.TryGetComponent<MeshRenderer>(out var mr))
                {
                    // grab the materials array
                    var materials = mr.materials;
               
                    // update all the materials in our array
                    for (int i = 0; i < materials.Length; i++)
                    {
                        materials[i] = material;
                        Debug.Log(tag + materials);
                    }
                    
                    // Update the material array on the mesh renderer.
                    mr.materials = materials;
                }
            }
        }

Below is a GIF that illustrates how the indication marker uses an image to change the materials of the roof and the body of the house accordingly:

***ADD GIF ABOUT MATERIAL CHANGE BOOYYAA!***


### 3. Relational Distance Implementation
The first thing we did was creating a simple, low ploygon, house and "hedge" which was used during development.

Next we created a new Hedge Script, which we attached to our default behaviour object. This script will be responsible for finding all houses placed in the scene, calcultating their distances to each other, and then place hedges where fit. Secondly, the script will also update the hedges placement, when a house is moved within the scene. 

Finding all houses is done using Unity's build-in function to find all GameObjects with a specific tag. The house prefab that uses can place in the scene is marked with a "house" tag, as seen below:

![](https://i.imgur.com/VDKFkV7.png)

and all houses are then found with the code shown below:

```C#
_houses = GameObject.FindGameObjectsWithTag("House");
```

The script then loops through all the houses returned in the GameObject array _houses, and performs two checks:
1. The two houses we are currently checking should not be one and the same house instance. We make sure that we are dealing with two distinct houses by checking that they have different instance IDs.
2. The two houses should also be on the same plane, meaning a house place on the floor plane should not end up sharing a hedge with a house place on a wall plane.

Code for this is shown below:

```C#
foreach (GameObject house in _houses)
{
    foreach (GameObject otherHouse in _houses)
    {
        if (house.GetInstanceID() != otherHouse.GetInstanceID())
        {
            Transform houseTransform = house.transform;
            Transform otherHouseTransform = otherHouse.transform;
            if (houseTransform.rotation.x == otherHouseTransform.rotation.x && houseTransform.rotation.z == otherHouseTransform.rotation.z)
            {
                // Placement code omitted but showed later.
            }
        }
    }
}
```

When these checks are correct we know that we have a situration where a hedge might need to be created. In these instances we then calculate the distance between the two houses using Unity's build-in distance function, which returns the distance between two vector3s (i.e. the two houses positions in world space).

From assignment 2 we found out that the relational size is 1 unity is equal to 1 meter in real life, thus we check that the distance is below 1 unit (1 meter) and above 0.2 units (20 cm). The reason we also check that the distance is above 20 cm, is to avoid hedges spawning inside houses.

If the distance falls within these bounds in calculate the midpoint between the two houses using Unity's build-in lerp function, with can return the point located a given procentage of the way between two points (in out case 0.5, i.e. 50%, of the way between the two houses), we then instansiate a new hedge at this location using the hedge prefab, and make it face the first house using unity's lookAt function.

The code for this can be seen below:

```C#
var distance = Vector3.Distance(houseTransform.position, otherHouseTransform.position);
                            
if (distance < 1f && distance > 0.2f)
{
    Vector3 midpoint = Vector3.Lerp(houseTransform.position, otherHouseTransform.position, 0.5f);
    Instantiate(hedgeObject, midpoint, houseTransform.rotation, hedgeHolder.transform).transform.LookAt(houseTransform);
}
```

The next step was to update the hedges position when houses are moved, this was done by moving the above code into the update function that runs every frame, and deleting all hedges with the associated "hedge" tag first. This might be a very inefficient way to do it, but it was how we were able make it work.

Lastly we made some visual improvements to the house and hedges to make it look a little nicer.

A gif showcasing the hedges being created and remove correctly as a response to the houses placed and manipulated in the scene:

***ADD GIF ABOUT HOUSE DISTANCE BOOYYAA!***

