WATCH HIM WATCH HIM WATCH ME

icm-week3-mel-soy

var Mx = 940;
var My = 80;
var d = 50;

var x = 0;
var y = 0;

//Melanie's variables
var playing = false;
var staticTv;
var button;
var capture;




function setup() {
  createCanvas(1100, 700);

 //wall
  img = loadImage("assets/wall3.png");
  //man with remote
  img1 = loadImage("assets/man.png");
  //flatscreen TV
  img2 = loadImage("assets/tvframe.png");
  //looping tv static with unused play button
  staticTv = createVideo(['assets/static9.mp4']);
  staticTv.position(362, 200);
  staticTv.loop();
  staticTv.size(243, 165);


  // button = createButton('play');
  // button.mousePressed(toggleVid); // attach button listener


  // plays or pauses the video depending on current state
  // function toggleVid() {
  //   if (playing) {
  //     staticTv.pause();
  //     button.html('play');
  //   } else {
  //     staticTv.loop();
  //     button.html('pause');
  //   }
  //   playing = !playing;

  //webcam
  capture = createCapture(VIDEO);
  capture.size(166, 159);
  capture.position(398, 203);
  capture.hide();

  div = createDiv('');
  div.position(144, 100);
  div.size(500, 460);
  div.mouseOver(function() {
    capture.show();
    staticTv.hide();
  });
  div.mouseOut(function() {
    capture.hide();
    staticTv.show();
  });


}






function draw() {


  //sky, moving moon, changing BG cllor
  background(10, 10, 100, 80);
  noStroke();


    noStroke();
    fill(255, 255, 0);
    ellipse(Mx, My, d, d);
  




  //windows on buildings

  //backgroung buildings

  fill(100);
  rect(0, 600, 1100, 100);

  fill(60, 60, 90);
  rect(700, 380, 120, 220);

  //windows
  for (var x = 717; x <= 810; x += 35) {
    for (var y = 395; y <= 590; y += 35) {
      fill(random(200, 230), random(200, 240), random(200, 255));
      rect(x, y, 18, 18);

    }
  }


  fill(100, 100, 140);
  rect(840, 300, 100, 300);

  //windows
  for (var x2 = 853; x2 <= 940; x2 += 30) {
    for (var y2 = 315; y2 <= 540; y2 += 40) {
      fill(random(200, 230), random(200, 240), random(230, 255));
      rect(x2, y2, 15, 27);

    }
  }


  fill(190, 160, 150);
  rect(960, 330, 160, 270);

  //windows
  for (var x3 = 975; x3 <= 1100; x3 += 50) {
    for (var y3 = 350; y3 <= 550; y3 += 60) {
      frameRate(5);
      fill(random(200, 230), random(200, 240), random(230, 255));
      rect(x3, y3, 40, 50);
    }
  }



  





  //house
  noStroke();
  fill(200);
  rect(0, 0, 680, 700);


  //house window

  strokeWeight(10);
  fill(255);
  stroke(153, 129, 84);
  //fill(255, 230, 0);
  quad(170, 80, 680, 100, 680, 500, 170, 550);
  ///// hi Melanie!! maybe your work should go here?! Thanks much!!////
  //textured wall
  tint(200, 20, 100, 260);
  image(img, -2, 1);




  //beware dog


  //wall
  noStroke();
  fill(200, 160, 200);
  quad(0, 600, 800, 520, 800, 1000, 0, 750);


  //thief
  noStroke();
  //face
  fill(230, 200, 180);
  ellipse(600, 570, 70, 100);
  ellipse(497, 610, 20, 50);
  triangle(570, 568, 558, 588, 580, 586);
  fill(0);
  arc(600, 560, 80, 100, PI, 3 / 7 * PI);
  fill(0);
  //arc(600,560,80,100,PI,0);
  rect(545, 615, 90, 300); //body

  fill(255);
  ellipse(580, 570, 20, 12);

  fill(0);
  ellipse(576, 568, 8, 8);

  //arms
  noFill();
  stroke(0);
  strokeWeight(30);
  line(550, 630, 520, 700);
  line(520, 700, 500, 620);
  line(635, 630, 650, 700);

  //eye

  //mel
  //show x and y coordinates on sketch
  // noStroke()
  // fill(0);
  // text("xpos =" + mouseX, 25, 25);
  // // Display ypos variable
  // noStroke()
  // fill(0);
  // text("ypos =" + mouseY, 25, 50);

  //man with remote
  image(img1, 175, 351);
  //tv
  image(img2, 350, 200);






}