Interactive Media

Mohamed Al-Kaf - Media Explorations

Written by: Mohamed Al-Kaf | Posted on: | Category:

When testing the game out. It was important the Operator (The reader of the intelligence Document) I wanted them to be fully engage with what they are reading. I had noticed that the first operator was reading everything within the document. Which is their Choice. I believe this is What they felt was necessary information to convey (all the Information).

Even tho at the beginning of the document, all the information that is needed was all given. What car to follow, where the car will start, and where it will end. So the pilot would be able to follow. So if they correctly communicate or not. The game will progress because they have this information. What I would really have wished to do for this game. Was to give the opportunity when u do not follow the directions of the document for the fame to restart. This would have made the possibility to start over again when something is skipped.

I think spending too much time on polishing the unity game. I did not put the time in the mechancica of the game. I felt it was too leaner but it still got the point and message.

There is a lot of room for improvements. the intelligence document still needed more revision. and I needed to implement a system of communication loses synchronisation. Either buy having the option to fire any time.

Screenshot 2019-05-02 at 3.56.23 pm.png

Written by: Mohamed Al-Kaf | Posted on: | Category:

Understanding C# was difficult is it similar to Javascript but much different syntax. On many occasions, because i was rushing i would mist a simple } bracket that i would not find and the visual studio would not show me an error.

But i guess this is because start Unity in a rush I may have skipped best practice setting and options.

I had trouble access variables between different script even thought logical it seems easy even follow steps from youtube tutorial but it must have been something different that I have done that I was not able to use this.

For the time i had to do this and that did not have and workshop or anyone else helping i feel that level i have acheive is excellent. But i feel from what i imagine i waned to have more levels.

Things that I want to change and continue working on. i would have liked to add many paths that are randomly selected, that each has different endings. And The 2nd player intelligence document instead of having the information back out of the other routes, it would have all the option of the routs and would inform at what part and time to eliminate the target.

I am very interested to see what other people feel about it. I did not have the change to test it with a wider variety of og people that only people i tested it with are the ones at home. At the end o the day everyone will read the document differently. it is giving a illusion the information they are giving is important even thou everything is scripted and its only on path. It would be interesting to see if they felt that their communicated would lead to a difference of the game end?

did they feel the pressure on their shoulders?

did they worry they will make a mistake?

At the current state of the game, i am worried about Level Two As this level needs clear communication between the 2 players. As the car only start to drive when the player is in the correct position. The map does not have anything to really distinguish the are is correct they will start. I believe the instructions of fly west and go down. to the southern road and the car will be traveling east is sufficient but I have not tested this enough on people to see if it really works or not.

Another option i wanted to change in the document is to change Left, Right and straight, with north, south, west and east. It would have been more correct in the manner i tried to convey.

GamePlayGIf

From the Video of the game playback you there are some issues with my code. Especially the change level with trigger because I can go to the end trigger with the player circle and Press space for the level to change. I still had too much trouble adding all the variables such as if the car is also in the trigger but this broke the code and didn't work at all.

Adding options to fire early and options to ignore. But this question the army command line where Soldiers are taught to follow instruction now matter what even if they disagree or they will be suspended...

Written by: Mohamed Al-Kaf | Posted on: | Category:

I added video clips of actual drone strike footage at the end of the level. I wanted something to remind the player especially the Pilot of the reality of they type of warfare. I felt like it was enough to make the player think about the issues with this type of warfare. Screenshot 2019-05-02 at 9.21.47 am.png

for the script i did not find something available with in the component setting that would allow to change the scene with video end. So i thought about added a timer , and setting it same length of the video. The only problem i thought about is if the video doesn't load some slow down happens the timer would skip the video. For what i need this works.

using UnityEngine;
using UnityEngine.SceneManagement;

public class LoadLevelTimer : MonoBehaviour
{

    [SerializeField] private float delayBeforeLoad = 10f;
    [SerializeField] private float timeElapased;

private void Update()
    {
        timeElapased += Time.deltaTime;
      if (timeElapased > delayBeforeLoad)
        {
            SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex + 1);
        }

    }
}
Written by: Mohamed Al-Kaf | Posted on: | Category:

For the final game Where XXXX will be covers with Black marker to look like redacted information. I tested the Document at home with my wife. We made 3 revisions to it. Such to the pacing and Start of instructions.

Screenshot 2019-04-30 at 10.52.35 pm.png

Screenshot 2019-04-30 at 10.52.45 pm.png

Screenshot 2019-04-30 at 10.52.53 pm.png

Screenshot 2019-04-30 at 10.53.01 pm.png

Screenshot 2019-04-30 at 10.53.08 pm.png

Screenshot 2019-04-30 at 10.53.16 pm.png

Screenshot 2019-04-30 at 10.53.23 pm.png

Screenshot 2019-04-30 at 10.53.31 pm.png

i didnt want to copy all teh information. so i left the last page where copied from leaked pages from the Iraqi war documents rules of engagment. i had wanted to cross out the names of the country but i did not have enought time. The page would have orignally been in the beginning before the mission objective page to set the rules out. but because i had felt it was too much block of text i had moved it to the back page.

Links that where used to help write with correct terminolgy: https://en.wikipedia.org/wiki/List_of_established_military_terms https://en.wikipedia.org/wiki/Category:Military_terminology

And search the vast library of wikileaks, looking at at random document that are not connected.

Written by: Mohamed Al-Kaf | Posted on: | Category:

The Issue I had was screen size resolution with aspect ration. As Unity gives very fluid options. It was hard to get anchored position of the UI elements Such and the ready and Standby as they where separate elements from the UI. On the first try, I made the build the would be int he wrong position because the Build game would use the full screen so it would be in a different position from when i was testing within Unity.

Screenshot 2019-05-01 at 11.41.22 pm.png

Screenshot 2019-05-01 at 11.41.44 pm.png

Written by: Mohamed Al-Kaf | Posted on: | Category:

Final Things to add

  • Simple sound continues sound that loops. Changing volume randomly or lopping (If possible I can have it responsive with area or position of player within the map)

  • Add a Scene with video or VIdeo Box over Level:

    • Explosion from UAV footage (i would like to add on top of the final scene but I don’t want to effect/break something with in the level so I will do it with in a separate scene that come up after level end)
  • Change ccloud edges to be more of a blur/ possibly more realistic.

  • Add a black and white filter. Either all the way through or saturation levels reduce over time?

  • Animation of fluctuating feet number - On the HUD on the right animate the number around 5,000.

  • Play with font to give it ascetic possible a type writer phone.

  • Break down - slash screen so text is multipul pages.

Second player documentation

placed in a Ring binder or envelope with document reference numbers. Different types of top secret levels. Redacted.

Aesthetic of a multepule Photocopy.

Document to have instructions of the path that is taken. For example if it say. Turns left. Go to page 5. If turn right, to go page 6 Make fake pages with fake instructions that would be skipped. It could be that these are the redacted information.

This will give a sense that the document give a path choice, however there is one path that is being follow.

Test if document and game work together.

Written by: Mohamed Al-Kaf | Posted on: | Category:

Looking at where I am at this level because coding too a lot of my time. Now that the focus is how the interaction is between 2 players. My inspiration and example i have is Keep talking and Nobody Explodes. A bomb disarming game. One has control of the bomb and the other has the documentation on how to disarm the bomb and it leads to the communication between each other. However, as my game does not have any procedural depth and the interaction his highly scripted.

Screenshot 2019-05-02 at 12.31.12 am.png

Written by: Mohamed Al-Kaf | Posted on: | Category:

As this was an important part of the interaction for my game i made this HUD image inside photoshop from scratch. HUD.png

The splash screens was inspired by the start of Keep talking and nobody explodes.

Screenshot 2019-05-02 at 12.08.47 am.png

Screenshot 2019-05-02 at 12.08.53 am.png

Screenshot 2019-05-02 at 12.09.00 am.png

After th splash screen i felt the pilot would be waiting for instructions from teh operator i wanted to add an animation to this screen. As there is a lot of information to go through in the Intel-document but the Operator. However due to lack of time and i still have alot of finish i decided to use stock video to be placed in the background. Is not idea choice but i think it helps to get the message across.

2019-05-02 12.09.28 am.gif

2019-05-02 12.09.46 am.gif

Written by: Mohamed Al-Kaf | Posted on: | Category:

Creating a menu screen using UI elements texts and buttons. when adding Buttons an event system is added.

Screenshot 2019-05-01 at 11.09.17 pm.png

I also added a script to an empty game object called the main menu.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class MainMenu : MonoBehaviour
{
public void PlayGame()
{
SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex + 1);
}
public void QuitGame()
{
Debug.Log("Quit");
Application.Quit();
}
}

This create two public functions. So any time that are called the code will run. For example in the button inspector settings click option to the Script and function and this makes the button call that code.

Screenshot 2019-05-01 at 11.21.14 pm.png

Written by: Mohamed Al-Kaf | Posted on: | Category:

The Path creating and following method i was using was starting to get frustrating. Luckily i searching the asset store within unity and found another free option.

Screenshot 2019-05-01 at 10.35.44 pm.png

using UnityEngine;

namespace PathCreation.Examples
{
       public class PathFollower : MonoBehaviour
    {
        public PathCreator pathCreator;
        public EndOfPathInstruction endOfPathInstruction;
        public float speed = 5;
        float distanceTravelled;

        void Start() {
            if (pathCreator != null)
            {
                   pathCreator.pathUpdated += OnPathChanged;
            }
        }

        void Update()
        {
            if (pathCreator != null)
            {
                distanceTravelled += speed * Time.deltaTime;
                transform.position = pathCreator.path.GetPointAtDistance(distanceTravelled, endOfPathInstruction);
                transform.rotation = pathCreator.path.GetRotationAtDistance(distanceTravelled, endOfPathInstruction);
            }
        }
        void OnPathChanged() {
            distanceTravelled = pathCreator.path.GetClosestDistanceAlongPath(transform.position);
        }
    }
}

Creating the nodes for the path are self contained and the path can be create as curves. And when linking the car game object it worked smoothly. The the Z access doesnt change.

Screenshot 2019-05-01 at 10.41.07 pm.png

All the paths of the one to follow and the scenery cars.

Screenshot 2019-05-01 at 10.33.08 pm.png

Written by: Mohamed Al-Kaf | Posted on: | Category:

Adding static cars to the scene. Screenshot 2019-05-01 at 10.25.03 pm.png

Ending level using Collider and trigger in unity. I placed an empty game object at the end location of the car path. so when the three objects intersect and a button is pressed it would change the scene.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class MoveScene2 : MonoBehaviour
{
    private bool ViewAtEnd;
    private void OnTriggerEnter2D(Collider2D other)
    {
        if (other.gameObject.name == "Circle")
        {
            ViewAtEnd = true;
            Debug.Log("ViewerReady");
        }
   }
    private void Update()
    {
        if (ViewAtEnd && Input.GetKeyDown(KeyCode.Space))
        {
            Debug.Log("change");
            SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex + 1);
        }
    }
    private void OnTriggerExit2D(Collider2D other)
    {
            ViewAtEnd = false;
        }
    }
Written by: Mohamed Al-Kaf | Posted on: | Category:

I had to learn how to produce tile maps assets for unity

i had to first create a PNG in Photoshop with all the options. For example here is tile maps for the Backgound Grass.

Ground.png

setting how large each tiles where drawn, unity will slice them and make them ready to be used and draw aback ground as a tile map.

Screenshot 2019-05-01 at 9.54.18 pm.png

Road converted to Tile maps, They would be paced on a layer on top of the ground so are no empty squares. For the background, I used a colour on the main camera instead of drawing in all the ground.

Screenshot 2019-05-01 at 9.56.29 pm.png

The Building converted to Tiles Maps. Screenshot 2019-05-01 at 9.56.09 pm.png

Written by: Mohamed Al-Kaf | Posted on: | Category:

I found a script on-line. There are two script one place on an empty game object that will draw the path that is desired. The other SCript placed on a game object that will follow the path.

Each path section was a Empty game object. The path was not curved, so to make more Verticies would create a path that looked curved.

Screenshot 2019-04-13 at 15.29.19.png

The problem i am having with this path creation option is the Z axis is also being manipulated i am not sure why. it is possible because of the way the script is written. So the car randomly flips on the z-axis. Even though I have chosen I 2D option in unity. Luckly the rotation direction is correct. so the car follows the path always facing the path and turn when the path changes.

The script used to create the path, using array to add the the to hold all the path points, that are added to the script by placing an empty game object on the scene and then linking it to the script, Adding the total amount of path point in the inspector and then adding the path points manually :

public class EditorPathScript : MonoBehaviour
{

    public Color rayColor = Color.white;
    public List<Transform> path_objs = new List<Transform>();
    Transform[] theArray;

void OnDrawGizmos()
    {
        Gizmos.color = rayColor;
        theArray = GetComponentsInChildren<Transform> ();
        path_objs.Clear ();

        foreach (Transform path_obj in theArray)
        {
            if(path_obj != this.transform)
            {
                path_objs.Add(path_obj);
            }
        for (int i = 0; i < path_objs.Count; i++)
            {
                Vector3 position = path_objs [i].position;
            if (i > 0)
                {
                    Vector3 previous = path_objs[i - 1].position;
                    Gizmos.DrawLine(previous, position);
                    Gizmos.DrawWireSphere(position, 0.3f);                }
            }
        }
    }
}

once the path is set up, attaching another script that will allow the game object. assets to follow the patg. This links the game objcet to the path. Here Are veriables set out, so i can manueally change in the inspector, the change of roation speed, to match the direction of travel when turning, and the speed of travelling on the path. The script also calls the array used in the previous script to know how to follow that path. calculating between the point and tansforming the object between them at the desired speed.

public class MoveOnPath : MonoBehaviour
{
    public EditorPathScript PathToFollow;

    public int CurrentWayPointID = 0;
    public float speed;
    private float reachDistance = .2f; // reach distance smooth movement between hard lines to make curve
    public float rotationSpeed = 5.0f;
    public string pathName;
    //disable loop 
    public GameObject CarFollow;

    Vector3 last_pos;
    Vector3 current_pos;

    void Start()
    {
        // PathToFollow = GameObject.Find(pathName).GetComponent<EditorPathScript>();
        last_pos = transform.position;
    }

    // Update is called once per frame
    void Update()
    {

        float distance = Vector3.Distance(PathToFollow.path_objs[CurrentWayPointID].position, transform.position);
        transform.position = Vector3.MoveTowards(transform.position, PathToFollow.path_objs[CurrentWayPointID].position, Time.deltaTime * speed);
        var rotation = Quaternion.LookRotation (PathToFollow.path_objs[CurrentWayPointID].position - transform.position);
        transform.rotation = Quaternion.Slerp (transform.rotation, rotation, Time.deltaTime * rotationSpeed);

    if(distance <= reachDistance)
        {
            CurrentWayPointID++;
        }
    if(CurrentWayPointID >= PathToFollow.path_objs.Count)
        {
            CarFollow.GetComponent<MoveOnPath>().enabled = false; // stop at end of path
            //   CurrentWayPointID = 0;  // to loop path 
        }
    }
}
Written by: Mohamed Al-Kaf | Posted on: | Category:

During the last tutorial with Chris, we had narrowed down my way forward to two steps.

  1. Continue with Adobe Animate even with the slow frame rate and lagging gameplay.

  2. Change the program i am using and move to unity. However, be careful as unity has a larger learning curve.

    • However, I would spend a few days max learning and research about the software, and if it takes too long go back to adobe animate and continue building the game.

On the Unity website, I found the section for detailed tutorials with easy to follow videos. They also include game files that you could follow to build the simple game.

Screenshot 2019-05-01 at 9.42.05 pm.png

I started by Placing a 2d GameObject Circle and adding a player movement script. To add physics to unity i rigidbody compenet needs to be added

Screenshot 2019-05-01 at 10.14.27 pm.png

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Player : MonoBehaviour {

    public float speed;

    private Rigidbody2D rb;
    private Vector2 moveVelocity;

    void Start(){

        rb = GetComponent<Rigidbody2D>();

    }

    void Update()
    {
        Vector2 moveInput = new Vector2(Input.GetAxis("Horizontal"), Input.GetAxis("Vertical"));
        moveVelocity = moveInput.normalized * speed; 
    }
void FixedUpdate()
    {
        rb.MovePosition(rb.position + moveVelocity * Time.fixedDeltaTime);  
    }
}

When the circle was moving i added a script to the camera to follow the plater, instead of making the Circle GameObject a child of the Camera to add smoother movement and using a script is better.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CameraFollow : MonoBehaviour
{
    public Transform followObject;
    private Vector3 moveTemp;
    public float offsetY = 0;
    public float offsetX = 0;

    // Start is called before the first frame update
    void Start()
    {
        moveTemp = followObject.transform.position;    
    }

    // Update is called once per frame
    void Update()
    {
        moveTemp = followObject.transform.position;
        moveTemp.y += offsetY;
        moveTemp.x += offsetX;
        moveTemp.z = transform.position.z;
        transform.position = moveTemp;

    }
}
Written by: Mohamed Al-Kaf | Posted on: | Category:

Issues When putting together the complete background image. Using all the asset for the building and scenery Seems to have to have a performance hit on the software.

Screenshot 2019-05-01 at 4.14.03 pm.png

Screenshot 2019-05-01 at 4.16.13 pm.png

I tried to even changed the vector graphics into BITMAP i thought maybe how the software keeps redrawing at the image is moved is affect the software. Because anytime you do not move the playback speed is acceptable and looks smooth. However as soon as you move the frame rate reduce and becomes laggy.

Adding multipul cars to Path Layers added to the lag. This was important port of the game cause it was easy way to create path for cars usuing lines that they can rotate around rather than a motion tween and at corners for each car chance the rotation postion.

As it was ment to fast paced communication game i thought maybe to found another software or a work around for this to work.

They way i have codded the software is the whole map to be in the background at a large scale and then manipulate the position of the map.

I researched the virtual camera that can be told to follow graphic symbol. This was smooth however because advanced layer option was needed many of the legacy option such as the guide path layers could not be used.

Screenshot 2019-05-01 at 4.06.08 pm.png

2019-05-01 4.05.28 pm.gif

As you can see from the quick clip below, the speed of the cars slow down when the map is moving, this is due to the frame rate dropping when i believe that software is redrawing the new position of the map.

2019-05-01 4.18.26 pm.gif

the code used for this:

var upPressed:Boolean = false;
var downPressed:Boolean = false;
var leftPressed:Boolean = false;
var rightPressed:Boolean = false;

allBG.addEventListener(Event.ENTER_FRAME, fl_MoveInDirectionOfKey);
stage.addEventListener(KeyboardEvent.KEY_DOWN, fl_SetKeyPressed);
stage.addEventListener(KeyboardEvent.KEY_UP, fl_UnsetKeyPressed);

function fl_MoveInDirectionOfKey(event:Event)
{
    if (upPressed)
    {
        allBG.y += 5;
    }
    if (downPressed)
    {
        allBG.y -= 5;
    }
    if (leftPressed)
    {
        allBG.x += 5;
    }
    if (rightPressed)
    {
        allBG.x -= 5;
    }
    if (view.hitTestObject(allBG.red_car)){
    trace("follow");
}else{
    trace("not follow");
}
}

function fl_SetKeyPressed(event:KeyboardEvent):void
{
    switch (event.keyCode)
    {
        case Keyboard.UP:
        {
            upPressed = true;
            break;
        }
        case Keyboard.DOWN:
        {
            downPressed = true;
            break;
        }
        case Keyboard.LEFT:
        {
            leftPressed = true;
            break;
        }
        case Keyboard.RIGHT:
        {
            rightPressed = true;
            break;
        }
    }
}

function fl_UnsetKeyPressed(event:KeyboardEvent):void
{
    switch (event.keyCode)
    {
        case Keyboard.UP:
        {
            upPressed = false;
            break;
        }
        case Keyboard.DOWN:
        {
            downPressed = false;
            break;
        }
        case Keyboard.LEFT:
        {
            leftPressed = false;
            break;
        }
        case Keyboard.RIGHT:
        {
            rightPressed = false;
            break;
        }
    }
}
Written by: Mohamed Al-Kaf | Posted on: | Category:

A balance between create my own game assets and usgin ready made assets to save time. Which will give more more time to focus on Coding.

I start by making a HUD for the UAV system with PhotoShop, searching online i found example i could follow.

Screenshot 2019-04-06 at 7.00.10 pm.png

Attempting to add Building with The Drawing Tablet. How everything this is a very hand drawn aesthetic. Screenshot 2019-05-01 at 3.43.06 pm.png

I noticed that it would be take alot of time to draw and make the the assets my self. As the code is not complete and i felt that there was stiall more i wanted to build to the game i prefered to use some ready made assets that could speed things up for me. This also got me thinking that it would have been better to work in a group. Where each person would take different aspect of the work.

Screenshot 2019-05-01 at 3.46.51 pm.png

Screenshot 2019-05-01 at 3.46.57 pm.png

Written by: Mohamed Al-Kaf | Posted on: | Category:

Screenshot 2019-05-01 at 3.36.22 pm.png Screenshot 2019-05-01 at 3.38.48 pm.png 2019-05-01 3.37.09 pm.gif

Written by: Mohamed Al-Kaf | Posted on: | Category:

Web site to communicate a message and have more details? this could be an option.

  • it is a Commute they are being watched.

    • inspiration from 5000 feet is the best by Omar Fast.
  • The progression of the story is the journey home,

  • Areas of interest can be some cars/people alone in the road.

  • If using real road maps for example from Baker Street to Harrow Uni.

Question about the experience:

  • People assumption - people bias - where it will happen.
  • Focusing on intelligence - how it is communicated.
    • it should be Built-in the experience -either by Overlay the newsletters of actual incidents for each level end.

Try to completed - 3 well-crafted complex maps with full detail- details.

Subtly increase how busy they are and complicity-

  1. Barron
  2. Little busier
  3. Extremely busy with a School.

Sound

  • have a simple sound in the background. I thought to have the UAV engine sound continuously playing.

  • Image design, - infrared look? Black and white…. Black hot - and white cold.

  1. Focus on the road.

Try to add realism. Have pre-flight checks Has after flight checks

Thinking about hand drawn Images and map. SO i thought about borrow i drawing tablet from the EMS. I thought i might be easier to create maps and drawing with this tablet.

Written by: Mohamed Al-Kaf | Posted on: | Category:

Screenshot 2019-05-01 at 3.23.56 pm.png

Screenshot 2019-05-01 at 3.32.29 pm.png

gif video of AA play through

Written by: Mohamed Al-Kaf | Posted on: | Category:

Project update

  • Walk cycle - possible to use this option to create movement with in a car.

  • Top down view of a map, What angle? draw images or realistic.

  • Example to use an actually arial photo and place photo-realistic cars to move them.

  • Procedural animation - the maps can be auto-generated, to create different maps that are never the same.

  • Or simply create maps and have a section where the car can travel between. To draw example 5 different path. Draw 5 different paths the car can take, for each section.

Example of Preprogrammed random paths

  • 5 paths from A to B
  • 5 paths from B to C
  • Instead of 25 large different paths from A to C
  • I thought doing this would make path drawing much easier.
Written by: Mohamed Al-Kaf | Posted on: | Category:

I started look at maps. I found OpenStreet maps. and open source map api. This would be best to start with using

Scribble Maps

Map I start to use of my home town.

Screenshot 2019-03-18 at 4.06.17 pm.png

As i was insure of the esperince i wanted to use user to have.

That i wanted to have the pollarizing filter so i thought this would be on stand alone sceen possible arcde type machine of an experince i starting to code the prototype in processing. I found easy to follow tutorial and referance on youtube espeicall from the coding train (danial Shiffman)

Loading an image into processing:

Screenshot 2019-03-25 at 11.54.27 am.png

Complete the code with move and a reticle

PImage backg;
int x = width/2;
int y = height/2;

void setup()
{
  size(400,400);
  backg = loadImage("largemap.png");

}
void draw()
{
  background(0);
  imageMode(CENTER);
  //scale(2);
  image(backg, x, y);

  //scale(.5);
  ellipse(width/2, height/2, 250, 250);
  fill(0,0,255,50);
  stroke(0);

  if ( x < -1000) {
    println("danger leaving area"); 
    textSize(32);
    fill(200, 0, 0);
    text("Danger", width/2, height/2); 

  }
  if (x > 1400) {
    println("danger leaving area");
  }
  if (y < -400) {
    println("danger leaving area");
  }
  if (y > 800) {
    println("danger leaving area");
  }
}

void keyPressed() {
  if ( key == CODED){
  if (keyCode == UP) {
    y = y + 5;
  } else if (keyCode == DOWN) {
      y = y - 5; 
    } else if (keyCode == LEFT) {
        x = x + 5; 
      } else if (keyCode == RIGHT) {
        x = x - 5; 
      }
  }

println("x=" ,x , "y=", y);  
}

I was manipulating the background using the arrow keys.

2019-04-30 11.17.52 pm.gif

Written by: Mohamed Al-Kaf | Posted on: | Category:

Basic Functions

  • Software sketchbook

    • It is a learning tool for visual artist.
      • Powerful programmer tool - elaborate projects can be created.
        • Interactive installation - connected with Arduino.
  • Void Setup and Void loop

    • Similar to loop in Arduino constantly being redone.
  • Variables - are containers that story a piece of information

    • String
      • Storing a text variable string of characters
    • Int
      • (constant - does not change over time) integer whole number.
    • Float
      • Can have a decimal point that cane more around.
  • Library Add certain functionality to processing

    • Such as sound, video camera, generating graphic effects.
      • Prewritten sets of code.
Written by: Mohamed Al-Kaf | Posted on: | Category:

UAV

How will the interaction be - to play the game.

  • Possibly - follow object game.
    • Two people
    • One person has information speaks to the other.
    • Other uses information too choose the object to follow. Example such as Keep talking and nobody explodes.

Research and Aesthetics

I Was informed about about September 12th. By: Gonzalo Frasca. Summery of the game: Conveys a timeless maxim: violence begets more violence.

I could use this type of drawing. but send deep message with how the game plays out. U cant put out fire with fire. Its only a shortsighted solution that may have a implications in the future.

12septemembergame

BBC Article Trump revokes Obama rule on reporting drone strike deaths https://www.bbc.co.uk/news/world-us-canada-47480207

Instagram account that shows location of known drone strikes with Google Maps. A Different Kind Of Instagram Account http://dronestagram.tumblr.com

Written by: Mohamed Al-Kaf | Posted on: | Category:

Control MovieCLips With Keyboard Things to remember:

  • Instance Names
  • Code Snippets
  • Scalex
  • Keycodes
  • Rotation
  • MC.x
  • Hittest - for Collision detection

Screenshot 2019-03-11 at 4.19.45 pm.png

Moving animation using keyboard, can any other keyboard button.

Screenshot 2019-03-11 at 2.52.27 pm.png

  • Walk Angle
  • Graphics symbolers
  • Bone Tool
  • COntoel with Keybaord and or mouse

Create movement with botton interaction. here i set the the Box on the left to move with WASD keys and the box on the right with the walking cycle to move with the arrows keys. A possible way to wave Mulitplayer interaction/Gameplay.

2019-04-30 10.36.23 pm.gif

Code to Constrain Box within the Canvas Scene

Screenshot 2019-04-30 at 10.37.47 pm.png

Using cude to reset scene/object/ movie clip/grtaphic symbole postion with mouse click.

var test:Boolean = false;

stage.addEventListener(MouseEvent.CLICK, fl_ClickToPosition);

function fl_ClickToPosition(event:MouseEvent):void
{

  if(test == true){
    box_MC_1.x = 250;
    box_MC_1.y = 250;       
    }
    test = true;
    }

Changing the direction of animation to the directionwith walking. Press left, to move left and face left.

if (leftPressed)
    {
        movieClip_1.x -= 1;
        movieClip_1.scaleX = -1;

I had noticed that code snippet with in adobe animate used a different way for character movement.

var upPressed:Boolean = false;
var downPressed:Boolean = false;
var leftPressed:Boolean = false;
var rightPressed:Boolean = false;

movieClip_1.addEventListener(Event.ENTER_FRAME, fl_MoveInDirectionOfKey);
stage.addEventListener(KeyboardEvent.KEY_DOWN, fl_SetKeyPressed);
stage.addEventListener(KeyboardEvent.KEY_UP, fl_UnsetKeyPressed);

unction fl_MoveInDirectionOfKey(event:Event)
{
    if (upPressed)
    {
        movieClip_1.y -= 1;
    }
    if (downPressed)
    {
        movieClip_1.y += 1;
    }
    if (leftPressed)
    {
        movieClip_1.x -= 1;
    }
    if (rightPressed)
    {
        movieClip_1.x += 1;
        }
}

function fl_SetKeyPressed(event:KeyboardEvent):void
{
    switch (event.keyCode)
    {
        case Keyboard.UP:
        {
            upPressed = true;
            break;
        }
        case Keyboard.DOWN:
        {
            downPressed = true;
            break;
        }
        case Keyboard.LEFT:
        {
            leftPressed = true;
            break;
        }
        case Keyboard.RIGHT:
        {
            rightPressed = true;
            break;
        }
    }
}
Written by: Mohamed Al-Kaf | Posted on: | Category:

UAV Control System

  • One person has information about subject that needs to be tracked and eleminated.
    • They have only specific information and object.
      • For example:
        • Colour (could cloths of a person) or Car or other arbitrary object.
          • This information in relayed to to second operator
1st Operator 2nd Operator
They have information and wider view of the field. They can see written information about the targeted subject. Only has narrow field of vision. The have to track them from a small area.
This operator give information to the send operator about the subject to be tracked. To try to find the subject with information such as area and surrounding things that can be easily pointed out. And from this try to track the subject. To wait for the subject to be in a specific safe area to send the details (such as place a mark, to be eliminated by the first operator)


The interaction between two people mainly will be team work

  • Articles show after a successful elimination is showed.
  • Th interaction is… playing this simulated game and communicating between two people
  • But with each succefull elimination and article will show the true devastation that accures in real life…..
  • I have a worry this may be to serious and lead away from the game interatcion.
  • I image in the interaction will be like ‘Keep talking and Nobody explodes’ where constant stream of information is vital… That if nothing is done something bad happens… and id something is done… there can be consequences that play out…. IE civilian casulties.
  • Sound of the drone.
  • Two people sitting together… the length of the game… (interaction one screen is dependent of time and length of the animation created.

NEXT STEPS How deep to animate and how much to create from the game…..

Written by: Mohamed Al-Kaf | Posted on: | Category:

History

  • UAV – First was orbital 12-000 miles taking photos.

  • Lighting Bug - bad at taking photos (unmanned aerial surveillance) idea was too advanced for current technology in the Vietnam war.

  • Israel 1982 – Arab – Israeli conflict pushed Israel to produced – soviet anti aircraft.

  • A much similar concept with a propeller, but slow limited range. Mainly used as decoys.

  • Can't see visual…. Only see what the instruments say.

  • Predator best and first used – in Bosnia camp…. Real-time performance improved when used in Afghanistan.

  • Synthetic aperture radar – Name for the camera on the UAV camera.

  • Ground Control station: name of froom from where the drone is contorled. can be on an office or container. ANywhere with a direct satillite connection to the drone.

  • Newer models are automated control – fly by it self – only needed monitoring – global hawk – is no weapons serverlance.

  • Most of the manned aircraft - the issue is an expense - 40 mill dollars each global hawk, but to make it reliable.

  • Personal notable things

  • Resonance drone - production of the Predator. Propellor driven makes a high pitch noise. So it can be heard and noticed. so easily can be seen.seen

  • The idea - controlling of something from far away not being actually where the place is. Then placing this into a game….. Installation type of piece

Written by: Mohamed Al-Kaf | Posted on: | Category:

i start thinking about other ideas because I found my self the deeper I research and thought about the Proposal Hidden I felt there was a disconnection. I felt it was not personally rewarding to research this topic further. With each hurdle that I found in preparing the story behind the game mechanic. It was hard to find a narrative that I found appealing. In turn,not have a motivation connection how would this story be convincing to the user. Rather than just have a negligible storyline that does not add to the complexity of the mechanic.

I start thinking of other ways I could use this mechanic of screen and polarising filter. Th inperstaion i had for the mechanic was from Visit the Edel Assanti gallery in london. There was an exhibition by: Emmanuel Van der Auwera, Called White Noise.

rc6HECCMTVCP0LcpbvLm2A.jpg

The visitor in the space is only able to view the film by positioning herself in front of the filter, thereby transforming the act of looking from passive spectatorship to active observation.

Screenshot 2019-05-01 at 1.23.33 pm.png

Majority of the footage used was army found footage.

Written by: Mohamed Al-Kaf | Posted on: | Category:

Screenshot 2019-05-01 at 11.05.51 am.png

Thinking about the Hidden Proposal. I needed to start to think about an idea for a theme and story that can be placed around the game mechanic of searching with a polerlizing filter. I could have been a simple story. But i want to see if i could have something engaging.

I could add some physic aspects to that game. For example, if the filter was within placed in a holder such a magnifying holder. this would be in a box that open and drops down revealed to the payer, as they progress in the game. So this would be there would have to be 2 screens a normal one and another where the filter is own this would be the one that is searched on.

Here I started to think about. How would the game know where the position of the filter is? How would the user inform the system where they are searching. Would this defeat the purpose, WHy not just create a blacked out section within the game itself and not use the Privacy filter? but this would actually give a physical interaction to it which could benefit the experince.

Another aspect I thought was thinking about XY plane, such as a 3d Printer. and reversing the stepper motors, they would give feedback to the Arduino of the position when they are moved by the user. This is a possible way to know the location. But this would mean there would be the rode on the screen holding teh system together. Another option would be using the Distance sensors, But the user hand could affect the actual reading.

To bring in this system around the screen I need to come up with a compelling story with its futuristic so I started looking at speculative Design.

Screenshot 2019-05-01 at 11.40.14 am.png

Written by: Mohamed Al-Kaf | Posted on: | Category:

It was difficult to choose between ideas and I wanted to see how the rest of the class would react to these ideas and would make it easier for me to narrow my options and choose the best idea to go forward with.

The first idea, I like to use a polarizing filter with an LCD screen. Something about this stood out to me. However, I could not come with a feasibly interesting idea. Other than thinking about that this Filter creates privacy and something hidden. So logically I thought about how it could be a hidden search game.

Screenshot 2019-04-28 at 5.16.44 pm.png

Another interest I had was interactivity with Ardiuno, Thinking about gestures control. In in reality from it being something gimmicky i was thinking how i would create some substance to it. It would be how is gestured used. many people now have gotten used to controlling a computer with a Mouse and Keyboard. but would it would take for this to change. The mouse pointer was the extension of the pointer finger. So touch screen work. Even the keyboard is redrawn. on the screen to be used as touch type.

I thought about disability, this project would be more interesting if i could work closely with someone who is disabled and found a way to use gesture control. Rather than it being for a person to learn something new to do the same thing they can do with a mouse and keyboard.

Screenshot 2019-04-28 at 5.19.37 pm.png

Written by: Mohamed Al-Kaf | Posted on: | Category:
  • Frames
  • Tweening
  • Buttons
  • Timeline Navigation (code Snippets)

New Areas

  • Movie Clips

  • Exporting as app

  • Video

  • Keyboard Controls

  • Connecting with screen-based interactivity.

  • Action script is the native language to animate.

  • Motion tweets need to be group together and need to be a movie clip for this to work.

  • Shape tween needs to be ungrouped and broken apart.

Blue = motion tween Green = shape tween

Motion tween can add a filter, that act over time. Such as shadow and blur. (some filter do not work on a HTML5 canvas)

Button, Create shape, then convert to symbols (there are three types of symbols ):

  • Movie clip.
  • Button
  • Graphic

Double click the Botton on stage to editing within the stage. (Up-Over-Down-Hit)

  • Adding functionality is vast for animate. Currently just using timeline navigation. But it's still very powerful. Looking at code snippets and can be simply added with drag and drop.

  • Adobe animate tried to have an easy accessibility to start to create a simple animation.

MOVIE CLIPS

  • Three types of symbols

    • Movie Clip
    • Button
    • Graphic
  • Nesting Different timelines (using movie clips)

So therefore using the scene timeline with each frame as a different scene this can be done by nesting animation within a movie clip and so on. To have its own timeline. Creating many multiple different animation and movie clips. With a simple clean main timeline.

The graphic symbol is the last type. Code snippets cannot but used with graphic. Graphics symbol are linked with the scene timeline. And cannot be played independently from the timeline.

  • Movie clip symbol are more powerful.

  • Graphics take up less memory for smaller files sizes.

  • Using the menu,

    • Create a new symbol.
    • Creates an object in the library,
    • starting from scratch with a new timeline in a new sketch and blank canvas, easy to create detailed objects.
    • But problems of the size of the canvas if not careful.

Publishing setup for Android more easier. iOS is linked to a developer account. Paid can use Test flight bets testing services.

With Android, you can create your own certificate (using same password when publishing)

Embed AIR Run Time player. To not have to install the app separate on the phone and everything is included together. (For example like installing flash player)

General is the output file Also will create SWF file and XML files.

In the publish page, here is where u can define icons. And best practice to upload in a different size to cover different sizes of Android systems.

Here is also when u specific permission soft an app. Giving authority to the app to use the system on a phone.

Creating Certificate is important to publish an application.

Always working with .fla file (adobe animate) When publishing depending on the type of document

  • HTML5 - html or .js
  • Actionscript3 - .swf
  • Air for android (.apk)

And for iOS not sure - need to read more.

ActionScript Events.

Keypressed event

  • This can be used to control commands in animation with any key or to progress animation.

  • There is an event listener. In particular the key down. And when it hears the event it calls for the function.

  • Keypress are seen as key code. So the keycode must be found to the corresponding key on the keyboard.

To import video

  • File import video
  • There are three different ways to do this.
    • Load as an external video with playback component (most useful- container to be played back)
  • Embed fLV in the play timeline
  • Embed h.264 video in the timeline (only useful for design and making animation with video)

Screenshot 2019-04-30 at 10.08.36 pm.png

2019-04-30 10.10.38 pm.gif

Written by: Mohamed Al-Kaf | Posted on: | Category:

Idea A

  • Interaction - I hidden image search game. Animation possibility moving.

  • The screen on table, when looking at the LCD without the Polizing filter there for all of the flight is not filtered out and the screen just looks white. However when I Small pliece of the filter is placed onto the of LCD screen the needed lights are filtered and the images showed in the area of the filter. Adding a physical interaction to the search game.

Screenshot 2019-02-25 at 10.48.35 am.png

Idea B

Ability to control an interface such as a game with gesture. Such as using hand movement to control a steering in a racing game. Or to control GU-interface.

Things I looked at - Control mouse movement with head movement. Changing volume by just using fingers. When rubbing the index finger over the thumb, decrease or increase each why you rub together.

Screenshot 2019-02-25 at 10.57.04 am.pngScreenshot 2019-02-25 at 10.56.08 am.png

I would like to find way to show interaction of someone playing a game. Possibly when someone plays a game for it to react and show in something that is tangible, physically change or move.

For example: Creating smaller screen to show information for a game the being played…. For example a Racing game: screen as:

  • Speed reading,
  • Gear select,
  • Engine RPM, etc.…

Would it be possible in Arduino, further research of project completed with arduino.

Idea C

I also would like to use Processing and Arduino together.
Serial communication between what is graphics language in processing and the microprocessing of the Arduino to interface and interact together.

A game reacting to inputs from arduino…. Or even reaction from the game and output in something that the Arduino is made.

This will mean a lot of code? In different IDE that work together.

Manipulate an analogue input- for example strength of a football kick - instead of using a a GUI interface to change the strength why not use a potentiometer to change the strength.

All computer movement at its basic is code manipulation.

Written by: Mohamed Al-Kaf | Posted on: | Category:

First animation online app that was used to create animation espeically for online, originally it was lash based however this technology was less used and replaced with by HTML5.

html5 and javascript. Is the language used to create animation.

Adobe animate

  • Canvas can be change int he properties panel.

  • Properties pallete is contextual, depending on what is selected.

  • Things inside the stage are visible animation.

  • Things are placed with layers. Each object and item. (just as photoshop)

  • Locking layers in useful to not interact with unwanted layers.

  • HTML5 is only 2D (however with WebGl there are options to create 3D animation)

  • Action script is 3D and you can manipulate items in space with code or keyframing.

There are three types insert in the timeline

  • Frame

  • Keyframe

  • Blank Frame

    • A keyframe can be edited (properties)
  • Tweening - Takes gapes between keyframes - smooth out the motion

  • Must first convert to a symbol.

  • There are three types

    • Movie Clip
    • Graphic Symbol
    • Button
  • They can be seen as a building block. Containers that contain other parts

  • Button has 4 different areas, Up, Over, Down and Hit. each can give its own animation movie clip for a different image.

  • Add sound directly to the scene sketch wither can be linked to waiting for the instruction to play or play automatically. Depending on what you would like to achieve.

First time Line.png

Using motion tween to create motion, Adobe animte will fill the motion between to keyframes instead of setting each frame on its own. Shape tween will more one shape to another over the desited time frame.

Bone Tool.png

First Animation with HTML with adobe animate.

2019-04-30 10.02.32 pm.gif

Written by: Mohamed Al-Kaf | Posted on: | Category:

Arduino IDE syntax

/ slash making a comment line Used to annotate code -

Arduino sketch - designed for non programers

In setup Do stuff that's time insensitive or only needs doing once: for example

A. loading data B. Set pin as input.output

This information needs to be told one which pins need to be used.

The loop -This is things that need to be done constantly

Syntas: curly braces

{ } contains code and nest they need to be in pairs open and closed.

() Normal brackets are arguments,

Function call Events that can me user made or included within the software language.

Learning to the Code. A website to look at for coding simple graphics interfaced and game-like programmes that use Java. processing.org

can be used to communicate a verity of animation and video responses graphically. Such as Computer Drawn graphics animation.

Asing A Potentiometer and If statement to control an array of LED.

IMG_2151.jpg

2019-02-05 10.38.27 am.gif

2019-01-31 3.38.38 pm.gif

Controlling a DC motor

2019-01-31 3.39.45 pm.gif

Written by: Mohamed Al-Kaf | Posted on: | Category:

Using the advanced kit, I easily followed instruction to make the circuts and copy the code to the ardiuno. I found my self confused on how the code is read by the ardiuno. I was not sure how i can change the code to do something different. Looking deeper at code examples, that where included in the Advance Arduino KIt.

With experiment i was not sure what to create. Possible when i have an idea and want to see what i could acheive it would possible to build a basic portotype to see if the idea acheivable.

First idea that came into my mind was to create a automatic trash can. Using the distance ultrasonic distance sensor as trigger to move a servo which would be used to open the lid. Here is the code from the experintation. I noticed that the servos would not always move the angels that were wanted. upon futher research It could be because the plastic gears type and not the mataliic type which is more accurat in ts movement.

#include <Servo.h>

int trigPin = 9;
int echoPin = 10;
int led = 13;

Servo myservo;

int pos = 0;    // variable to store the servo position

void setup() {
  Serial.begin(9600);
  pinMode(led, OUTPUT);
  pinMode(trigPin, OUTPUT);
  pinMode(echoPin, INPUT);
 myservo.attach(11);  // attaches the servo on pin 9 to the servo object
}

void loop() {
  long duration, distance;
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(1000);
  digitalWrite(trigPin, LOW);
  duration = pulseIn(echoPin, HIGH);
  distance = (duration / 2) / 29.1;
  Serial.print(distance);
  Serial.println("uCM");
  delay(10);

  if ((distance <= 8))
  {
    digitalWrite(led, HIGH);
  }
  else if (distance > 8)
  {
    digitalWrite(led, LOW);
  }

   for (pos = 15; pos <= 165; pos += 1) { // goes from 0 degrees to 180 degrees
   // in steps of 1 degree
   myservo.write(pos);              // tell servo to go to position in variable 'pos'
   delay(1);                       // waits 15ms for the servo to reach the position
  }
  for (pos = 165; pos >= 15; pos -= 1) { // goes from 180 degrees to 0 degrees
    myservo.write(pos);              // tell servo to go to position in variable 'pos'
    delay(1);                       // waits 15ms for the servo to reach the position

  }
}
Written by: Mohamed Al-Kaf | Posted on: | Category:

Asked to download soundplant free software the maps audio to keyboard keys

Mark Weiser 1991
“todays multimedia machine makes the computer screening a demanding focus of attention rather than fade into the background”

Core concepts: Ubiquitous computer Tangible computer Wearable computing Locative media Biodata

www.kobakant.at

Not just thinking about physical interaction but also mental interaction. The take of choices. This is important to draw people into giving at interaction a go.

The quality of experience:

Domains,

  • Engagement - deliberate inadvertent
  • Consistency - predictability / unpredictability
  • Cursality completeness incompleteness

Create something with one interaction. One click - one interaction, one actual point for the audience.

  • I-Pac Can be read like a normal computer but connect different type of switches. Ground all connected to one wire.= GND

Started to learn and work with simple interactiions, usuing buttoms, light sensors

Different swtich that can be used with the i-Pac

Important Note - switch has two different activation points, when button is press and when button is release. Depend where the wire is attached at the bottom. IMG_2080.jpg

Tilt switch. IMG_2082.jpg

Arduino introduction:

Open source hardware and software. Microprocessor. Easy to access code and information from the community. Someone has already done it before. So it is easy to find the similar code. It is user programmable. Come up with a new scenario.

  • Projects of Arduino, Ex: petting zoo...

  • Addicted products: the story of brad the Toaster.

IMG_2083.jpg

Can be used to analuge input or output. Contoel servos or read data from sensors.

IMG_2086.jpg

Can output power to control LEDs

IMG_2091.jpg

Written by: Mohamed Al-Kaf | Posted on: | Category:

Started looking at interactive media. Interactive installations. Games and other things that include interaction.

the simple workshop breif is as below.

Exploring Interactive Media – What are interactive media anyway?

Take a look at the following examples of interactive media and try to answer the questions below. These questions will start you thinking about what interactive media are or can be, why people make interactive work and the qualities that they have.

Surface Tension http://www.lozano-hemmer.com/surface_tension.php

Dark Pool http://www.cardiffmiller.com/artworks/inst/darkpool.html

The Cabinet of Curiousness http://www.cardiffmiller.com/artworks/inst/cabinet_of_curiousness.html

Emoto2012 http://emoto2012.org/

Neon Bible http://www.beonlineb.com/

The Wrench http://knifeandfork.org/thewrench/

Firestorm http://www.theguardian.com/world/interactive/2013/may/26/firestorm-bushfire-dunalley-holmes-family

Phone Story http://www.phonestory.org/

A way to go http://a-way-to-go.com/

Questions: • What is it? How would you describe it? How is it described? • How is it interactive? • Why is it interactive? • Are any of them more interactive than others? If so in what ways? • What do they all have in common?