Interactive art WEEK 3, homework part 1

Previous week the assignment was to recreate a screenshot of a movie we picked ourselves. The movie I picked wasHow to train your dragon 3. The following pictures show the result:

Screenshot:
Result:
 

This week we were assigned to animate the picture, I made both dragons blink their eyes at random, below is a video of the result.  

Sadly enough I wasn't able to make screen recording so I had to physically film my screen which greatly compromised the quality, I hope this won't be an issue! :)

The code:

int min_time = 1000; // in ms
int max_time = 3000; // in ms

int time_frame = (int)random(min_time, max_time);

int time_stamp = 0;

boolean eyesClosed = true;

int min_time2 = 1000; // in ms
int max_time2 = 3000; // in ms

int time_frame2 = (int)random(min_time2, max_time2);

int time_stamp2 = 0;

boolean eyesClosed2 = true;




void setup() {
  size(900, 500);
  background(108, 94, 173);
}

void draw() {

  //creating the scenery
 
   fill(187, 122, 128);
   beginShape();
   vertex(50, 500);
   vertex(200, 300);
   vertex(230, 340);
   vertex(600, 250);
   vertex(900, 500);
   endShape(CLOSE);
 
 
  stroke(205, 150, 155);
  fill(223, 166, 159);
  beginShape();
  vertex(0, 467);
  vertex(100, 430);
  vertex(230, 410);
  vertex(800, 460);
  vertex(850, 470);
  vertex(900, 475);
  vertex(900, 500);
  vertex(0, 500);
  endShape(CLOSE);
 
  fill(241, 186, 191);
  beginShape();
  vertex(100, 430);
  vertex(230, 410);
  vertex(180, 430);
  endShape(CLOSE);
 
  fill(233, 178, 184);
  beginShape();
  vertex(100, 430);
  vertex(230, 410);
  vertex(180, 430);
  endShape(CLOSE);
 
  fill(254, 212, 198);
  stroke(238, 185, 139);
  beginShape();
  vertex(0, 470);
  vertex(180, 430);
  vertex(400, 460);
  vertex(900, 500);
  vertex(0, 500);
  endShape(CLOSE);

   noStroke();
   fill(73, 55, 79);
   beginShape();
   vertex(260, 0);
   vertex(300, 50);
   vertex(340, 10);
   vertex(380, 200);
   vertex(450, 80);
   vertex(570, 250);
   vertex(600, 50);
   vertex(650, 100);
   vertex(690, 50);
   vertex(720, 140);
   vertex(800, 40);
   vertex(900, 0);
    endShape(CLOSE);
   

  //drawing toothless
 
  //wings first because that's furthest back
 
  fill(60, 49, 45);
  stroke(23, 17, 29);
  ellipse(795, 329, 125, 245);
 
  pushMatrix();
  rotate(radians(20));
  ellipse(720, 50, 150, 230);
 
  rotate(radians(10));
  ellipse(810, -100, 110, 250);
  popMatrix();
 
  //noStroke();
  //fill(108, 94, 173);
  //ellipse(795, 430, 90, 50);

  //now to create the body
 
  //I wanted to create an outline for the body so I will be drawing (cont.)
  //all shapes twice, but the first time I am rawing, which will be (cont.)
  //behind the rest I will make the color darker to create this outline
 
  noStroke();
  fill(23, 17, 29);
  ellipse(685, 316, 154, 262);
  beginShape();
  vertex(747, 170);
  vertex(759, 277);
  vertex(745, 269);
  endShape(CLOSE);
 
  beginShape();
  vertex(625, 169);
  vertex(613, 270);
  vertex(630, 277);
  endShape(CLOSE);
 
  //now the foreground of the body
  fill(60, 49, 45);
  ellipse(685, 315, 150, 260);
  rect(627, 170, 120, 99);
  beginShape();
  vertex(745, 170);
  vertex(757, 277);
  vertex(745, 269);
  endShape(CLOSE);
 
  beginShape();
  vertex(627, 169);
  vertex(615, 270);
  vertex(630, 277);
  endShape(CLOSE);
 
  //starting on the legs now
 
  //left hindleg
 
  fill(23, 17, 29);
  ellipse(608, 450, 50, 12);
  stroke(23, 17, 29);
  fill(60, 49, 45); 
  ellipse(610, 365, 45, 130);
  rect(592, 408, 42, 39);
  noStroke();
  rect(593, 390, 41, 40);
  ellipse(610, 450, 50, 10);
 
  //outline
  fill(23, 17, 29);
  noStroke();
  ellipse(760, 325, 47, 153);
 
  pushMatrix();
  rotate(radians(20));
  ellipse(840, 120, 47, 132);
  rotate(radians(-9));
  rect(786, 277, 44, 38, 7);
  popMatrix();

 
    //Details on leg 1
  fill(60, 49, 45);
  stroke(23, 17, 29);
  pushMatrix();
  rotate(radians(-25));
  ellipse(531, 692, 7, 15);
  ellipse(520, 700, 7, 15);
  ellipse(509, 709, 7, 15);
  ellipse(500, 723, 7, 15);
  popMatrix();
 
  //Leg fill
 
  noStroke();
  ellipse(760, 325, 45, 150);
 
  pushMatrix();
  rotate(radians(20));
  ellipse(840, 120, 45, 130);
  rotate(radians(-9));
  rect(787, 277, 42, 38, 7);
  popMatrix();
 
  ellipse(750, 277, 45, 47);


  //toes
 
  stroke(23, 17, 29);
  pushMatrix();
  rotate(radians(30));
  ellipse(872, 34, 9, 15);
  rotate(radians(10));
  ellipse(853, -112, 7, 12);
  ellipse(842, -108, 7, 12);
  popMatrix();
 
  //second leg(left)
 
  //leg details
  ellipse(603, 400, 8, 10);
 
  //outline
  fill(23, 17, 29);
  ellipse(620, 325, 47, 152);
 
  pushMatrix();
  rotate(radians(-15));
  ellipse(503, 550, 47, 130);
  rotate(radians(3));
  rect(510, 548, 44, 39, 7);
  popMatrix();
 
  //leg fill
  noStroke();
  fill(60, 49, 45);
  ellipse(620, 325, 45, 150);
 
  pushMatrix();
  rotate(radians(-15));
  ellipse(503, 550, 45, 130);
  rotate(radians(3));
  rect(511, 548, 42, 39, 7);
  popMatrix();
 
  ellipse(641, 274, 45, 47);
 
  //toes
 
  stroke(23, 17, 29);
  pushMatrix();
  rotate(radians(-30));
  ellipse(314, 718, 9, 15);
  rotate(radians(-10));
  ellipse(197, 770, 9, 15);
  ellipse(210, 778, 9, 15);
  popMatrix();
 
 
  //The head
 
  //first details because those go behind the head
  ellipse(758, 144, 30, 20);
  ellipse(758, 165, 20, 10);
 
  ellipse(615, 144, 30, 20);
  ellipse(615, 165, 20, 10);
 
 
  fill(23, 17, 29);
  ellipse(685, 144, 151, 111);
 
  rect(619, 75, 31, 45, 7);
  rect(719, 75, 31, 45, 7);
  rect(660, 78, 17, 30, 7);
  rect(694, 78, 17, 30, 7);
 
  pushMatrix();
  rotate(radians(-28));
  ellipse(610, 416, 30, 50);
  ellipse(580, 404, 17, 35); 
  popMatrix();
 
  pushMatrix();
  rotate(radians(28));
  ellipse(600, -229, 30, 50);
  ellipse(630, -240, 17, 35); 
  popMatrix();
 
 
  noStroke();
  fill(60, 49, 45);
  ellipse(685, 145, 150, 110);
  rect(620, 75, 30, 45, 7);
  rect(720, 75, 30, 45, 7);
  rect(660, 78, 17, 30, 7);
  rect(694, 78, 17, 30, 7);
 
  pushMatrix();
  rotate(radians(-28));
  ellipse(610, 416, 30, 50);
  ellipse(580, 404, 17, 35); 
  popMatrix();
 
  pushMatrix();
  rotate(radians(28));
  ellipse(600, -229, 30, 50);
  ellipse(630, -240, 17, 35); 
  popMatrix(); 
 
  //eyes
  pushMatrix();
  rotate(radians(10));
  fill(168, 146, 105);
  ellipse(660, 28, 40, 30);
  popMatrix();
 
  pushMatrix();
  rotate(radians(-5));
  ellipse(702, 206, 40, 30);
  popMatrix();
 
  fill(12, 10, 15);
  rect(640, 135, 20, 22, 7);
  rect(703, 136, 20, 22, 7);
  stroke(12, 10, 15);
  line(655, 170, 710, 170);








  //Drawing lightfury
 
   
  //againwings first because that's furthest back
 

  //now to create the body
 
  //I wanted to create an outline for the body so I will be drawing (cont.)
  //all shapes twice, but the first time I am rawing, which will be (cont.)
  //behind the rest I will make the color darker to create this outline
 
  noStroke();
  fill(186, 155, 170);
  ellipse(485, 316, 154, 262);
  beginShape();
  vertex(547, 170);
  vertex(559, 277);
  vertex(545, 269);
  endShape(CLOSE);
 
  beginShape();
  vertex(425, 169);
  vertex(413, 270);
  vertex(430, 277);
  endShape(CLOSE);
 
  //now the foreground of the body
  fill(240, 224, 235);
  ellipse(485, 315, 150, 260);
  rect(427, 170, 120, 99);
  beginShape();
  vertex(545, 170);
  vertex(557, 277);
  vertex(545, 269);
  endShape(CLOSE);
 
  beginShape();
  vertex(427, 169);
  vertex(415, 270);
  vertex(430, 277);
  endShape(CLOSE);
 
  //starting on the legs now
 
  //left hindleg
 
  fill(186, 155, 170);
  ellipse(419, 441, 50, 20);
  fill(240, 224, 235);
  stroke(186, 155, 170); 
  ellipse(410, 365, 45, 130);
 
  pushMatrix();
  rotate(radians(-20));
  rect(230, 520, 42, 39);
  noStroke();
  rect(231, 517, 42, 39);
  ellipse(410, 450, 50, 10);
  popMatrix();
  ellipse(420, 440, 50, 20);
 
  //outline right front
  fill(186, 155, 170);
  noStroke();
  ellipse(560, 325, 47, 153);
 
  pushMatrix();
  rotate(radians(40));
  ellipse(655, 200, 47, 132);
  popMatrix();


  //Leg fill
 
  noStroke();
  fill(240, 224, 235);


  pushMatrix();
  rotate(radians(20));
  fill(186, 155, 170);
  ellipse(655, 200, 48, 132);
  fill(240, 224, 235);
  ellipse(655, 200, 47, 132);
  popMatrix();
 
  ellipse(560, 325, 45, 150);
  ellipse(550, 277, 45, 47);


  //toes
 
  stroke(186, 155, 170);
  pushMatrix();
  rotate(radians(30));
  ellipse(677, 143, 9, 15);
  rotate(radians(10));
  ellipse(701, 25, 7, 12);
  ellipse(710, 20, 7, 12);
  popMatrix();
 
  //second leg(left)
 
  //outline
  fill(186, 155, 170);
  ellipse(420, 325, 47, 152);
 
  pushMatrix();
  rotate(radians(-45));
  ellipse(30, 620, 53, 130);
  popMatrix();
 
  //leg fill
  noStroke();
  fill(240, 224, 235);
  ellipse(420, 325, 45, 150);
 
  pushMatrix();
  rotate(radians(-45));
  ellipse(30, 620, 53, 130);
  popMatrix();
 
  ellipse(441, 274, 45, 47);
 
  //toes
 
  stroke(186, 155, 170);
  pushMatrix();
  rotate(radians(-30));
  ellipse(195, 650, 9, 15);
  rotate(radians(-10));
  ellipse(87, 680, 9, 15);
  ellipse(95, 682, 9, 15);
  popMatrix();
 
 
  //The head
 
  //first details because those go behind the head
  ellipse(556, 130, 30, 20);

 
  ellipse(416, 130, 30, 20);

 
 
  fill(186, 155, 170);
  ellipse(485, 144, 151, 111);
 
  pushMatrix();
  rotate(radians(-28));
  ellipse(420, 322, 30, 50);
  fill(240, 224, 235);
  ellipse(420, 322, 29, 50);

  rotate(radians(56));
  ellipse(435, -129, 30, 50); 
  popMatrix();
 
 
  noStroke();
  fill(240, 224, 235);
  ellipse(485, 145, 150, 110);
 
  //eyes
 
  fill(151,170,203);
  ellipse(455, 145, 40, 30);
  ellipse(520, 145, 40, 30);
  fill(28, 18, 19);
  ellipse(459, 142, 18, 20);
  ellipse(518, 142, 18, 20);
 
  int time_passed = millis() - time_stamp;

  if (time_passed < time_frame && eyesClosed) {
    display();
  } else if (time_passed >= time_frame) {
    time_stamp = millis();
    time_frame = (int)random(min_time, max_time);
    eyesClosed = !eyesClosed;
  }
 
  int time_passed2 = millis() - time_stamp2;

  if (time_passed2 < time_frame2 && eyesClosed2) {
    display2();
  } else if (time_passed2 >= time_frame2) {
    time_stamp2 = millis();
    time_frame2 = (int)random(min_time2, max_time2);
    eyesClosed2 = !eyesClosed2;
  }
  
}

void display()
{
  fill(0);
  ellipse(718, 144, 50, 37);
  ellipse(648, 144, 50, 37);
  fill(60, 49, 45);
  ellipse(718, 142, 50, 37);
  ellipse(648, 142, 50, 37);
 
 
}

void display2()
{
  fill(186, 155, 170);
  ellipse(520, 144, 50, 37);
  ellipse(450, 144, 50, 37);
  fill(240, 224, 235);
  ellipse(520, 142, 50, 37);
  ellipse(450, 142, 50, 37);
 
 
}





Comments