// Mouse drag to view hidden images 

//Move left right to read the text

// Wait 15 seconds to view 4 immigrant stories from around the world

//Topic is - Migrant Crisis.

// show and hide - button.hide(); , button.show();, - to disappear from canvas

​

var song;

let capture;

let filter;

let tracker;

let button1;

let button2;

let button3;

let button4;

let homeButton;

let cameraButton;

let immigrantButton;

let tracker2;

let checkbox;

​

function preload() {

  mgbg = loadImage("assets/mgbg.png");

  globalmigrants = loadImage("assets/Migrantbg.png");

  migrant1 = loadImage("assets/alankurdi.png");

  alankurdi = loadImage("assets/alankurdi.jpg");

  syriaflag = loadImage("flags/syriaflag.png");

  migrant2 = loadImage("assets/migrant2.png");

  migranttwo = loadImage("assets/migrant2.2.png"); //mexican child with dolls

  mexicanchildren = loadImage("assets/mexicanchildren.png");

  mexicoflag = loadImage("flags/mexicoflag.svg");

  migrant3 = loadImage("assets/migrant3.png");

​

  africaflag = loadImage("flags/africa.png");

  africanboy = loadImage("assets/africanboy.png")

  migrant4 = loadImage("assets/migrant4.png");

  migrantfour = loadImage("assets/migrantfour.png");

  //mouse- press to play music, thank you.

  song = loadSound("assets/musicp5js.mp3");

  song.loop();

}

//key-press to play music 

function keyPressed() {

  if (song.isPlaying()) {

    // .isPlaying() returns a boolean

    song.pause(); // .play() will resume from .pause() position

​

  } else {

    song.play();

​

  }

}

​

function setup() {

  createCanvas(720, 500);

  background(220)

  // cameraButton = true;

  checkbox = createCheckbox();

  checkbox.position(60, 360);

  checkbox.changed(myCheckedEvent);

​

​

​

  resetSketch();

​

  // if(!checkbox.checked()) {

  //   console.log("you've not checked the box")

  // }

  // homeButton = createButton("START OVER");

  // homeButton.mousePressed(resetSketch); is 

  // homeButton.position(10, 10); //start over - process

  textSize(12);

  fill(255);

  text('I AGREE THAT I HAVE READ THE TERMS AND CONDITIONS FOR THE MIGRANT PROTEST CAMERA AND\nWILLING TO PROCEED FURTHER TO VIEW IT.', 85, 370);

  col1 = color(194, 61, 0);

  col2 = color(255, 114, 48);

​

}

​

function myCheckedEvent() {

  if (this.checked()) {

    button1.mousePressed(CameraButtonOn);

    button2.mousePressed(CameraButtonOff);

    button3.mousePressed(immigrantButtonOn);

    button4.mousePressed(immigrantButtonOff);

  }

}

​

function resetSketch() {

​

  button1 = createButton("CAMERA ON");

  button2 = createButton("CAMERA OFF");

  button3 = createButton("SEE IMMIGRANTS");

  button4 = createButton("DON'T SEE IMMIGRANTS");

​

  button1.position(200, 400); //camera on

  button2.position(410, 400); //camera off

  button3.position(180, 450); //immigrant on

  button4.position(380, 450); //immigrant off

​

  image(globalmigrants, 0, 0, 720, 500)

​

}

​

function CameraButtonOn() {

  //camera accept button, shows filter

  console.log('scene1');

  pixelDensity(1);

  capture = createCapture(VIDEO);

  capture.elt.setAttribute('playsinline', '');

  capture.size(width, height);

  capture.hide();

​

  tracker = new clm.tracker();

  tracker.init();

  tracker.start(capture.elt);

​

  filter = createGraphics(width, height);

  filter.pixelDensity(1);

  button1.hide();

  button2.hide();

  cameraButton = true;

}

​

function CameraButtonOff() {

  //camera decline button

  button1.hide();

  button2.hide();

  cameraButton = false;

}

​

function immigrantButtonOn() {

  //show immigrant pictures

​

  button3.hide();

  button4.hide();

  immigrantButton = true;

  console.log(immigrantButton)

}

​

function immigrantButtonOff() {

  //don't show immigrant pictures

  button3.hide();

  button4.hide();

  immigrantButton = false;

  console.log(immigrantButton)

}

​

function draw() {

​

​

  if (cameraButton) {

    // In case 1- You see can see yourself and immigrants, Camera On - Immigrant face on, Camera On - No Immigrant face.

​

    console.log('Case1');

    image(capture, 0, 0, width, height);

    console.log('image captured');

    const positions = tracker.getCurrentPosition();

    //filter

    filter.loadPixels();

​

    for (let y = 0; y < height; y++) {

      for (let x = 0; x < width; x++) {

        let index = (x + y * width) * 4;

​

        filter.pixels[index] = x; //R

        filter.pixels[index + 1] = 180; //G

        filter.pixels[index + 2] = y; //B

        filter.pixels[index + 3] = 150; //A

      }

    }

​

    filter.updatePixels();

    image(filter, 0, 0, width, height);

    MigrantsWithCamera(immigrantButton);

    button2.show();

    button2.position(600, 450);

    checkbox.hide();

  }

  // else {

  // In case 2- You see can see yourself and immigrants, Camera On - Immigrant face on, Camera On - No Immigrant face.

  if (cameraButton == false) {

    button1.show();

    button1.position(600, 450);

    checkbox.hide();

    MigrantsWithoutCamera(immigrantButton);

  }

}

​

function MigrantsWithCamera(immigrantButton) {

​

  //different migrant stories, changing by seconds

  let s = second();

  // console.log(`mouseX:${mouseX},${mouseY}`);

  console.log(`seconds = ${s}`);

  console.log(immigrantButton);

​

  let positions = tracker.getCurrentPosition();

​

  //migrant1 - Alan Kurdi 

  // tint(255, 120);

  if (positions.length > 0 && s <= 15 && s >= 5) {

​

    // if (immigrantButton) {

      image(syriaflag, 0, 0, width, height);

    // }

    if (immigrantButton) {

      image(alankurdi, 0, 300, 270, 200);

    }

    // tint(0, 153, 204, 126); //red 

    colorMode(HSB, 100);

    for (let i = 0; i < 15; i++) {

      textSize(18);

      fill(0);

      text('HUMANITY WASHED ASHORE\nI WAS AN INNOCENT CHILD', 455, i * 40);

    }

    textSize(20);

    fill(255, 0, 0);

    text('2 September 2015', 7, 485);

    fill(0);

    text('ALAN KURDI', 7, 150);

    text('3 YEAR OLD SYRIAN BOY\nDEAD BY THE SEA SHORE,\nCOVERED WITH SAND\nIN TURKEY', 7, 220);

    text('DROWNED IN WATER', 7, 105);

    text('RAISE VOICE FOR MIGRANT CRISIS', 7, 65);

    fill(212, 255, 90);

    textSize(34);

    text('SYRIA', 320, 25, 20);

    if (immigrantButton) {

      push();

      tint(255, 120);

      image(migrant1, positions[62][0] - 205, positions[62][1] - 215, 400, 400);

      pop();

      console.log(`position:${positions[62][0]},${positions[62][0]}`)

    }

  }

​

  //// migrant2 - mexican girl 

  else if (positions.length > 0 && s <= 30 && s > 20) {

​

    // if (immigrantButton) {

    // }

    //drag mouse to view image, zoom in & zoom out

    if (immigrantButton) {

      image(mexicanchildren, 300, 100, mouseX, mouseY); // x,y,w,h,

    push();

      tint(255, 120)

      image(mexicoflag, 0, 0, width, height);

      pop();

    }

    // tint(0, 153, 204, 126); //red 

    colorMode(HSB, 100);

​

    for (let i = 0; i < 15; i++) {

      textSize(20);

      fill(0, 255, 0);

      text('STAND FOR JUSTICE\nNO HUMAN IS ILLEGAL', 493, i * 50);

      console.log(`MOUSE  DRAG TO VIEW HIDDEN IMAGE`);

    }

    textSize(20);

    fill(0);

    text('AMERICAN IMMIGRATION POLICY IS CAGING\n INDIGENOUS CHILDREN  ', 7, 60);

    text('CHILDREN ARE SEPARATED \nFROM THEIR PARENTS AT \nDETENTION CENTRES', 7, 180);

    text('INHUMANE BORDER POLICIES\n', 7, 140);

​

    if (immigrantButton) {

      image(migrant2, positions[62][0] - 180, positions[62][1] - 235, 400, 400);

      fill(0, 100, 250);

    }

    textSize(34);

    text('MEXICO', 300, 30);

    if (immigrantButton) {

      image(migranttwo, 2, 230, 250, 280); // x,y,w,h,

      console.log(`position:${positions[62][0]},${positions[62][0]}`)

    }

  }

  //migrant3 - african 

  else if (positions.length > 0 && s <= 45 && s > 35) {

    if (immigrantButton) {

      push();

      tint(255, 120);

      image(africaflag, 0, 0, width, height);

      pop();

    }

​

    for (let i = 0; i < 27; i++) {

      textSize(20);

      fill(255, 200, 0);

      text('DEFEAT RACISM\n', 540, i * 23);

      console.log(`MOUSE DRAG TO VIEW HIDDEN IMAGE`);

    }

    textSize(20);

    fill(240,157,57);

    text('MANY PEOPLE MIGRATE FROM AFRICA THROUGH \n MEDITERRANEAN SEA', 7, 60);

    text('MIGRATE FROM DIFFERENT PARTS\nOF AFRICA', 7, 120);

    text('SEARCH OF FOOD, MONEY & SHELTER\n', 7, 180);

    text('PEOPLE DIE CROSSING THROUGH SEA & DESSERTS\n', 7, 200);

    text('I imagine how worried my mother \nmust be. Sometimes I look at the\nring she gave me and I feel very\n sad.I imagine how she would feel\n knowing about the conditions I am \nliving in now said \nby Yaya, young migrant from \nSenegal staying in Agadez.', 7, 230);

    textSize(15);

    text('SEEK ASYLUMS \nIN PARTS OF EUROPE', 7, 430);

​

    // drag mouse to view image, behind the main guy

    if (immigrantButton) {

      image(africanboy, width / 2, height / 2, mouseX, mouseY);

    }

    if (immigrantButton) {

      image(migrant3, positions[62][0] - 267, positions[62][1] - 305, 500, 500);

    }

    text('SUFFER FROM THREAT & VIOLENCE', 7, 480);

    textSize(34);

    fill(240,157,57);

    text('AFRICA', 320, 35)

    console.log(`position:${positions[62][0]},${positions[62][0]}`)

  }

  //migrant4- Rafat Hazeema 

  else if (positions.length > 0 && s <= 60 && s > 50) {

    if (immigrantButton) {

      push();

      tint(255, 120);

      image(syriaflag, 0, 0, width, height);

      pop();

    }

​

    if (immigrantButton) {

      image(migrantfour, 0, 300, 240, 200);

    }

    for (let i = 0; i < 15; i++) {

      textSize(15);

      fill(0);

      text('REFORM THE IMMIGRATION LAWS\nFAMILIES HAVE NO BORDERS', 460, i * 40);

    }

    textSize(20);

    fill(0);

    text(' RAFAT HAZEEMA - SYRIAN REFUGEE\n MIGRATED TO GERMANY', 13, 60);

    textSize(20);

    text('"I wish I could hold my sons close to \nme again, so I can live again says Hzeema"', 7, 130);

    text('Facing psychological distress and mental illness \n', 7, 200);

    text('The crammed smugglers boat they were travelling\n on capsized, and the two boys - aged 12 and 9 \nat the time - have been missing ever since.\n', 7, 230);

​

    textSize(34);

    fill(240,157,57);

    text('SYRIA', 320, 35)

    if (immigrantButton) {

      image(migrant4, positions[62][0] - 200, positions[62][1] - 285, 400, 400);

      console.log(`position:${positions[62][0]},${positions[62][0]}`)

    }

  }

}

​

function MigrantsWithoutCamera(immigrantButton) {

  //camera button off + show immigrant pictures, camera button off + show no immigrant pictures + show background.

  let s = second();

  console.log(`seconds = ${s}`);

  console.log(immigrantButton);

​

  //migrant1 - Alan Kurdi 

  if (s <= 15 && s >= 0) {

    if (immigrantButton) {

      image(alankurdi, 0, 300, 270, 200);

      for (let i = 0; i < 15; i++) {

        textSize(18);

        fill(225, 192, 76);

        text('HUMANITY WASHED ASHORE\nI WAS AN INNOCENT CHILD', 455, i * 40);

      }

      textSize(20);

      fill(255, 0, 0);

      text('2 September 2015', 7, 485);

      fill(0);

      text('ALAN KURDI', 7, 150);

      text('3 YEAR OLD SYRIAN BOY\nDEAD BY THE SEA SHORE,\nCOVERED WITH SAND\nIN TURKEY', 7, 220);

      text('DROWNED IN WATER', 7, 105);

      text('RAISE VOICE FOR MIGRANT CRISIS', 7, 65);

      // }

      // if (immigrantButton) {

      push();

      tint(255, 120)

      image(syriaflag, 0, 0, width, height);

      pop();

      fill(212, 255, 90);

      textSize(34);

      text('SYRIA', 320, 35);

      // if (immigrantButton) {

      image(migrant1, 230, 100, 220, 220);

    } else {

      NocameraNoimmigrant();

    }

  }

  //// migrant2 - mexican girl 

  else if (s <= 30 && s > 15) {

    //drag mouse to view image, zoom in & zoom out

    if (immigrantButton) {

      image(mexicanchildren, 300, 100, mouseX, mouseY); // x,y,w,h,

      } 

      for (let i = 0; i < 15; i++) {

        textSize(20);

        fill(225, 192, 76);

        text('STAND FOR JUSTICE\nNO HUMAN IS ILLEGAL', 493, i * 50);

        console.log(`MOUSE  DRAG TO VIEW HIDDEN IMAGE`);

      }

      textSize(20);

      fill(0);

      text('AMERICAN IMMIGRATION POLICY IS CAGING\n INDIGENOUS CHILDREN  ', 7, 60);

      text('CHILDREN ARE SEPARATED \nFROM THEIR PARENTS AT \nDETENTION CENTRES', 7, 180);

      text('INHUMANE BORDER POLICIES\n', 7, 140);

      push();

      if (immigrantButton) {

         tint(255, 120)

      image(mexicoflag, 0, 0, width, height);

      }  

      pop();

      if (immigrantButton) {

      image(migrant2, 230, 235, 260, 260);

      fill(227, 156, 57);

      } 

      textSize(34);

      text('MEXICO', 300, 30);

      if (immigrantButton) {

      image(migranttwo, 2, 240, 250, 280); // x,y,w,h,

    } else {

      NocameraNoimmigrant();

    }

​

  }

  //   //migrant3 - african 

  else if (s <= 45 && s > 30) {

    if (immigrantButton) {

      for (let i = 0; i < 27; i++) {

        textSize(20);

        fill(225, 192, 76);

        text('DEFEAT RACISM\n', 540, i * 23);

        console.log(`MOUSE DRAG TO VIEW HIDDEN IMAGE`);

      }

      textSize(20);

      fill(0);

      text('MANY PEOPLE MIGRATE FROM AFRICA THROUGH \n MEDITERRANEAN SEA', 7, 60);

      text('MIGRATE FROM DIFFERENT PARTS\nOF AFRICA', 7, 120);

      text('SEARCH OF FOOD, MONEY & SHELTER\n', 7, 180);

      text('PEOPLE DIE CROSSING THROUGH SEA & DESSERTS\n', 7, 200);

      text('I imagine how worried my mother \nmust be. Sometimes I look at the\nring she gave me and I feel very\n sad.I imagine how she would feel\n knowing about the conditions I am \nliving in now said \nby Yaya, young migrant from \nSenegal staying in Agadez.', 7, 230);

      textSize(15);

      text('SEEK ASYLUMS \nIN PARTS OF EUROPE', 7, 430);

​

      // drag mouse to view image, behind the main guy

      image(africanboy, width / 2, height / 2, mouseX, mouseY);

​

      push();

      tint(255, 120);

      // if (immigrantButton) {

      image(africaflag, 0, 0, width, height);

      // }

      pop();

      text('SUFFER FROM THREAT & VIOLENCE', 7, 480);

      textSize(34);

      fill(212, 255, 90);

      text('AFRICA', 320, 35)

      // if (immigrantButton) {

      image(migrant3, 275, 235, 250, 250);

    } else {

      NocameraNoimmigrant();

    }

  }

  //migrant4- Rafat Hazeema 

  else if (s <= 60 && s > 45) {

    if (immigrantButton) {

      image(migrantfour, 0, 300, 240, 200);

      // }

      for (let i = 0; i < 15; i++) {

        textSize(15);

        fill(225, 192, 76);

        text('REFORM THE IMMIGRATION LAWS\nFAMILIES HAVE NO BORDERS', 460, i * 40);

      }

      textSize(20);

      fill(227, 156, 57);

      text(' RAFAT HAZEEMA - SYRIAN REFUGEE\n MIGRATED TO GERMANY', 13, 60);

      textSize(20);

      text('"I wish I could hold my sons close to \nme again, so I can live again says Hzeema"', 7, 130);

      text('Facing psychological distress and mental illness \n', 7, 200);

      text('The crammed smugglers boat they were travelling\n on capsized, and the two boys - aged 12 and 9 \nat the time - have been missing ever since.\n', 7, 230);

      push();

      tint(255, 120);

      // if (immigrantButton) {

      pop();

      textSize(34);

      fill(212, 255, 90);

      text('SYRIA', 320, 35)

      image(syriaflag, 0, 0, width, height);

      // }

​

      // if (immigrantButton) {

      image(migrant4, 265, 275, 230, 230);

      // }

    } else {

      NocameraNoimmigrant();

    }

  }

}

​

function NocameraNoimmigrant() {

  //last option when camera is off, immigrant pictures are invisible

  image(mgbg, 0, 0, 720, 500);

}