I Belong with My Parents

//flag variables

let greenfadein = 0

let redfadein = 0

​

// - - - - - - - 

//girl 

let girl;

​

// - - - - - - - 

//left & right

let lefthand; //staying still

let righthandfadein = 0 //fadingin

​

// - - - - - - - 

//text

let myfont;

​

// - - - - - - - 

//picture #1

let rainbow

let message

​

// - - - - - - - 

//picture #2

let sad

let message2

​

//animation variables + image variable (the WORDS)

let i;

let imove = 0 //starting position

let belong;

let belongmove = 990//make it come from the right instead

let With

let withmove = 0

let myparents

let mypmove = 990 //make it come from the right instead

​

function setup() {

  createCanvas(990, 685);

  //background(255); 

  //image upload

  girl = loadImage ('girl.png');

  lefthand = loadImage ('lefthand.png');

  righthand = loadImage ('righthand.png');

  myfont = loadFont('leadcoat.ttf');

  i = loadImage ('i.png');

  belong = loadImage ('belong.png');

  With = loadImage ('with.png');

  myparents = loadImage ('myp.png');

  rainbow = loadImage ('rainbow.png');

  message = loadImage ('message.png');

  sad = loadImage ('sad.png');

  message2 = loadImage ('message2.png');

}

​

function draw() {

  background (255);

  noStroke();

  //FLAG BACKGROUND

  // //green side

  fill (3, 69, 17, greenfadein);

  rect (0, 0, 320, 685);

  greenfadein = greenfadein + 1;

  // //red side

  fill (182, 12, 2, redfadein);

  rect (670, 0, 330, 685);

  redfadein = redfadein + 1;

  // - - - - - - - - - - - - - - - - 

  //girl

  image (girl, 350, 270);

  // - - - - - - - - - - - - - - - - 

  //hands

  //left hand

  image (lefthand, 309, 55);

  //right hand - - - - - - - - make fade in

  tint (255, righthandfadein);

  righthandfadein = righthandfadein + 0.8;

  image (righthand, 489, 55);

  // - - - - - - - - - - - - - - - - 

  //the border - TOP BLOCKS = LEFT SIDE

  stroke (0); //color

  strokeWeight (2);

  fill (53, 19, 3); //FIRST BROWN BLOCK - LEFT

  rect (0, 60, 120, 95);

  fill (53, 19, 3); //2ND BLOCK - LEFT

  rect (120, 100, 120, 95);

  fill (53, 19, 3); //3RD BLOCK - LEFT

  rect (240, 146, 79, 95);

  fill (53, 19, 3); //FIRST BROWN BLOCK - RIGHT SIDE 

  rect (671, 146, 79, 95);

  fill (53, 19, 3); //2ND BLOCK - RIGHT

  rect (750, 100, 120, 95);

  fill (53, 19, 3); //FIRST BROWN BLOCK - RIGHT

  rect (870, 60, 120, 95);

  //the border - LINES - starting from the LEFT

  fill (76, 35, 10);

  rect (7, 155, 15, 530); //left

  fill (76, 35, 10);

  rect (35, 155, 15, 530); //left

  fill (76, 35, 10);

  rect (65, 155, 15, 530); //left

  fill (76, 35, 10);

  rect (93, 155, 15, 530); //left

  fill (76, 35, 10);

  rect (125, 195, 15, 490); //middle

  fill (76, 35, 10);

  rect (155, 195, 15, 490); //middle

  fill (76, 35, 10);

  rect (185, 195, 15, 490); //middle

  fill (76, 35, 10);

  rect (213, 195, 15, 490); //middle

  fill (76, 35, 10);

  rect (245, 241, 15, 445); //right

  fill (76, 35, 10);

  rect (273, 241, 15, 445); //right

  fill (76, 35, 10);

  rect (300, 241, 15, 445); //right

  //the border - TOP BLOCKS = RIGHT SIDE

  fill (76, 35, 10);

  rect (970, 155, 15, 530); //right

  fill (76, 35, 10);

  rect (943, 155, 15, 530); //right

  fill (76, 35, 10);

  rect (915, 155, 15, 530); //right

  fill (76, 35, 10);

  rect (885, 155, 15, 530); //right

  fill (76, 35, 10);

  rect (852, 195, 15, 490); //middle

  fill (76, 35, 10);

  rect (820, 195, 15, 490); //middle

  fill (76, 35, 10);

  rect (790, 195, 15, 490); //middle

  fill (76, 35, 10);

  rect (760, 195, 15, 490); //middle

  fill (76, 35, 10);

  rect (730, 241, 15, 445); //right

  fill (76, 35, 10);

  rect (705, 241, 15, 445); //right

  fill (76, 35, 10);

  rect (680, 241, 15, 445); //right

  // - - - - - - - - - - - - - - - -

​

  //(come back to)

  //my text

  noTint ();

  image(i, imove, 0);

  imove = imove + 2;

  imove = constrain (imove, 0, 460);

  image (belong, belongmove, 85);

  belongmove = belongmove - 2

  belongmove = constrain (belongmove, 440, 990);

  image (With, withmove, 115);

  withmove = withmove + 2

  withmove = constrain (withmove, 0, 450);

  image(myparents, mypmove, 170);

  mypmove = mypmove - 2

  mypmove = constrain (mypmove, 400, 990);

  // - - - - - - - - - - - - - - - -

  //color picture (left)

​

  stroke (100);

  strokeWeight (2);

  if ((mouseX>50)&&(mouseX<650)){

  fill (204, 230, 244);

  rect (78, 270, 150, 150);

  image (rainbow, 100, 319);

  image (message, 100, 280);

  }

  //pin / strings

  if ((mouseX>50)&&(mouseX<650)){

  fill (150);

  ellipse (150, 215, 22, 22);

  //left string

  fill (0);

  line (142, 223, 95, 270);

  //right string

  fill (0);

  line (158, 223, 200, 270);

  }

  // - - - - - - - - - - - - - - - -

​

  //message board (left) (below)

  stroke (255);

  fill (0);

  rect (20, 490, 280, 190);

  fill (150);

  ellipse (152, 440, 20, 20);

  line (145, 448, 60, 490);

  line (160, 448, 240, 490);

​

  //words for message board

  // - - - - - - - - - - - - 

  textSize (30);

  fill (0);

  textFont (myfont);

  text ('my parents', 95, 530);

  textFont (myfont);

  text ('are', 125, 570);

  textFont (myfont);

  text ('all that i', 90, 615);

  textFont (myfont);

  text ('have', 120, 660);

  // - - - - - - - - - - - -

  //message board (right) (below)

  stroke (255);

  fill (0);

  rect (690, 490, 280, 190);

  fill (150);

  ellipse (830, 440, 20, 20);

  line (823, 448, 760, 490);

  line (838, 448, 890, 490);

​

  // - - - - - - - - - - - -

  fill (0);

  textFont (myfont);

  text ('and yet...', 780, 525);

  textFont (myfont);

  text ('you still', 775, 570);

  textFont (myfont);

  text ('took', 795, 615);

  textFont (myfont);

  text ('them away', 768, 660);

  // - - - - - - - - - - - -

​

  //color picture (left)

​

  stroke (100);

  strokeWeight (2);

  if ((mouseX>650)&&(mouseX<990)){

  fill (0, 53, 102);

  rect (765, 270, 150, 150);

  image (sad, 766, 319);

  image (message2, 835, 319);

  }

  //pin / strings

  if ((mouseX>650)&&(mouseX<990)){

  fill (150);

  ellipse (835, 220, 22, 22);

  //left string

  fill (0);

  line (825, 223, 790, 270);

  //right string

  fill (0);

  line (845, 223, 875, 270);

  }

}