Interactive Media

Mohamed Al-Kaf - Media Explorations

Prototype Build with Processing

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