createCanvas(400, 400);

  angleMode(DEGREES);

}

​

function draw() {

  background(204,230,255);

//console.log(2020-1569);

/* My name:Wenwen(Erin)Qiu,   

   Partner's name:Zhiyue(Jessie) Chen,

   Description:

   This is an item carrying lots of pictures inside with all of my previous classmates and teachers in high school, 

   It contains the pages that each of my classmates wrote all of their best wishes , leaving their contact informations and silly little things to me. 

   It includes loads of happiness and unforgettable memories and differernt handwritten emojis.

   Reflection:

   My partner described the the image in English. Yearbook came to my mind as soon as Jessie mentioned pictures of her previous classmates and teachers in her high school. Her description is sufficient enough for me to figure out her lost item is Yearbook of her highschool. 

   I used all the technical components (code) from the assignment to draw the yearbook. What troubles me the most is the Cartesian System, since I am used to have objects appeared in the middle of the canvas (like AE). I tried to set the system similiar to what I preferred, so I used translate();. However, I noticed the coordination goes to negative value after the translate code. It is much harder for me to depict the image using code as I use other softwares. But I had a lot of fun playing codes to achieve my goals.

   I found that the order of codes is significant because it can mess up the whole script if a code is misplaced. Keeping my codes organized plays an important part as I try to interpret code at different stage such as 2d primitives, color, text, and lines. 

*/

push();

translate(width/2,height/2);

rectMode(CENTER);  

rotate(350);

strokeWeight(2);

fill(242);

rect(0,0,350,200,5);         // The Yearbook

strokeWeight(0);

fill(255,181,102);           // Light Orange

rect(-88,-73,130,34,3);      // Fill of Yearbook

// All the lines

strokeWeight(1.5);

line(-4,-100,-2,100);        // Middle Line01 

line(2,-100,4,100);          // Middle Line02

line(-145,-50,-104,-50);     // Left line below yearbook

fill(0);

circle(-92,-50,5);           // Circle below yearbook

line(-81,-50,-40,-50);       // Right Line below yearbook

line(-160,28,-104,28);       // Left line below Jessie

circle(-92,28,5);            // Circle below Jessie

line(-81,28,-25,28);         // Right line below Jessie

line(26,-100,28,-10);        // Upper line on the right page

circle(28,2,5);              // Circle on the right page

line(28,15,29,100);          // Upper line on the right page

strokeWeight(1);

line(-155,60,-50,60);        // wishes from friends 01

line(-155,64,-65,64);

line(-155,68,-85,68);

line(-155,72,-95,72);

line(-155,80,-115,80);

line(-155,84,-120,84);

line(-155,88,-113,88);

line(8,-76,22,-76);

line(8,-72,23,-72);

line(8,-68,23,-68);

line(8,-64,23,-64);

line(8,-60,23,-60);

line(8,-56,22,-56);

line(8,-52,23,-52);

line(8,-48,23,-48);

line(8,-28,23,-28);

line(8,-24,23,-24);

line(8,-20,23,-20);

line(8,-16,23,-16);

line(8,-12,23,-12);

line(8,-8,23,-8);

line(8,-4,22,-4);

line(8,0,22,0);

line(8,4,22,4)

line(8,8,22,8);

line(8,12,23,12);

line(8,16,23,16);

line(8,20,23,20);

line(8,24,23,24);

line(8,28,23,28);

line(8,32,22,32);

line(8,36,23,36);

line(8,40,23,40);  

line(8,44,23,44);

line(8,60,23,60);

line(8,64,21,64);

line(8,68,22,68);

line(8,72,23,72)

line(8,76,23,76);

// All the lines end here

fill(255);

textSize(26);

text('Yearbook',-142,-63);

fill(0);

textSize(12);

text('Jessie Chen',-122,13); // Jessie Name

fill(0);

textSize(13);

text('Congratulations!',-160,50); // wishes from friends

​

fill(0);

rotate(350); 

textSize(10);

text('We will miss you!',-110,70);// wishes from friends

fill(204,224,255)            // Blue

rotate(10);

strokeWeight(2.8);

ellipse(-90,-20,35,35);      // outfit of Jessie

​

fill(255,204,204)            // Pink

strokeWeight(2.8); 

arc(-90,-20,35,35,130,50);   // Picture Background

​

fill(255,242,230);

strokeWeight(0);

ellipse(-90,-20,16,16);      // Jessie Face

strokeWeight(2.5);

point(-93,-21);              // Jessie eyes

point(-87,-21);

​

noFill();

strokeWeight(1);

arc(-90,-20,10,10,50,130);   // Jessie Smile

​

noFill();

strokeWeight(1);

arc(-82,-21,6,10,250,70);    // Jessie right Hair 

​

noFill();

strokeWeight(1);

arc(-98,-21,6,10,100,280);   // Jessie Light Hair 

//All the classmates on the right page

​

fill(153,153,255)            // Dark blue

rotate(10);

strokeWeight(2);

circle(42,-80,30);           // Outfit of classmate01

fill(255,204,204)            // Pink

strokeWeight(2); 

arc(42,-80,30,30,130,30);    // Picture Background01

fill(255,242,230);

strokeWeight(0);

circle(42,-80,16);           // Classmate01 Face

/*strokeWeight(2.5);

point(39,-80);               // Classmate01 eyes

point(45,-81);

​

noFill();

strokeWeight(1);

arc(42,-80,10,10,40,120);    // Classmate01 Smile; too much repetitive work putting all the faces.... - -|

*/

fill(204,136,0)              // Brow

rotate(10);

strokeWeight(2);

circle(69,-103,30);          // Outfit of classmate02

fill(255,204,204)            // Pink

strokeWeight(2); 

arc(69,-103,30,30,120,20);   // Picture Background02

fill(255,242,230);

strokeWeight(0);

circle(69,-103,16);          // Classmate02 Face

​

fill(204,224,255)            // Blue

rotate(10);

strokeWeight(2);

circle(89,-136,30);          // Outfit of classmate03

fill(255,204,204)            // Pink

strokeWeight(2); 

arc(89,-136,30,30,110,10);   // Picture Background03

​

fill(255,242,230);

strokeWeight(0);

circle(89,-136,16);          // Classmate03 Face

fill(134,179,0)              // Green

rotate(0);

strokeWeight(2);

circle(35,-50,30);           // Outfit of classmate04

fill(255,204,204)            // Pink

strokeWeight(2); 

arc(35,-50,30,30,110,10);    // Picture Background04

fill(255,242,230);

strokeWeight(0);

circle(35,-50,16);           // Classmate04 Face

fill(128,128,0)              // Color05

rotate(0);

strokeWeight(2);

circle(74,-73,30);           // Outfit of classmate05

fill(255,204,204)            // Pink

strokeWeight(2); 

arc(74,-73,30,30,110,10);    // Picture Background05

fill(255,242,230);

strokeWeight(0);

circle(74,-73,16);           // Classmate05 Face

fill(153,0,77)               // Color06

rotate(0);

strokeWeight(2);

circle(112,-97,30);          // Outfit of classmate06

fill(255,204,204)            // Pink

strokeWeight(2); 

arc(112,-97,30,30,110,10);   // Picture Background06

fill(255,242,230);

strokeWeight(0);

circle(112,-97,16);          // Classmate06 Face

fill(102,0,51)               // Color07

strokeWeight(2);

circle(60,-9,30);            // Outfit of classmate07

fill(255,204,204)            // Pink

strokeWeight(2); 

arc(60,-9,30,30,110,10);     // Picture Background07

fill(255,242,230);

strokeWeight(0);

circle(60,-9,16);            // Classmate07 Face

fill(153,102,255)            // Color08

strokeWeight(2);

circle(98,-32,30);           // Outfit of classmate08

fill(255,204,204)            // Pink

strokeWeight(2); 

arc(98,-32,30,30,110,10);    // Picture Background08

fill(255,242,230);

strokeWeight(0);

circle(98,-32,16);           // Classmate08 Face

fill(255,51,187)             // Color09

strokeWeight(2);

circle(136,-55,30);          // Outfit of classmate09

fill(255,204,204)            // Pink

strokeWeight(2); 

arc(136,-55,30,30,110,10);   // Picture Background09

fill(255,242,230);

strokeWeight(0);

circle(136,-55,16);          // Classmate09 Face

fill(204,136,0)              // Color10

strokeWeight(2);

circle(83,30,30);            // Outfit of classmate10

fill(255,204,204)            // Pink

strokeWeight(2); 

arc(83,30,30,30,110,10);     // Picture Background10

​

fill(255,242,230);

strokeWeight(0);

circle(82,30,16);            // Classmate10 Face

fill(131,131,201)            // Color11

strokeWeight(2);

circle(121,7,30);            // Outfit of classmate11

fill(255,204,204)            // Pink

strokeWeight(2); 

arc(121,7,30,30,110,10);     // Picture Background11

fill(255,242,230);

strokeWeight(0);

circle(121,7,16);            // Classmate11 Face

pop();                       // I foirgot that we have to use push and pop...lol, added it back just for the assignment purpose... - -

push();

blendMode(DARKEST);          // For the purpose of the assignment

fill(102,153,153)            // Color12

strokeWeight(2);

circle(355,240,30);          // Outfit of classmate12

pop();

fill(255,204,204)            // Pink

strokeWeight(2); 

arc(355,240,30,30,130,30);   // Picture Background12

​

fill(255,242,230);

strokeWeight(0);

circle(355,240,16);            // Classmate12 Face

}

​