Recitation 5: Processing Basics

I chose this image because it used to be my WeChat profile picture for a very long time after the pandemic. As it depicts the “green passcode”, I also hope it can bring good luck (never be locked in somewhere) to all of us. 

I wanted to draw it with the shape function, both regular circles, and dot-to-dot connections. Then I could fill in the colors. To be honest, the whole picture was too complicated to achieve within such a limited time, so I had to simplify it. Also, drawing such an easy image (or these complicated landscape photos) in this way is not ideal. Maybe because I was not familiar with processing enough, finding a proper position for every dot is not easy. I changed my draft a lot to make the graph look like the original one, and during this process, I couldn’t stop thinking about what if I draw it by hand. I know that processing is a wonderful means to realize art ideas, however, I need to spend more time learning this 🙂

void setup() {
  size(600, 800);
}
void draw() {
  background(255);

  fill(#02E544);
  circle(300, 300, 600);
  fill(255);
  circle(300, 300, 500);
  fill(#02E544);

  beginShape();
  vertex(160, 300);
  vertex(160, 240);
  vertex(300, 160);
  vertex(440, 240);
  vertex(440, 300);
  vertex(330, 240);
  vertex(330, 440);
  vertex(270, 440);
  vertex(270, 240);
  endShape(CLOSE);
  fill(255);

  beginShape();
  fill(#DE1D16);
  vertex(420, 258);
  vertex(460, 360);
  vertex(560, 328);
  vertex(525, 224);
  endShape();

  fill(#FAF0E3);
  circle(460, 200, 140);
  fill(0);
  circle(445, 200, 8);
  circle(480, 188, 8);



  arc(468, 215, 30, 30, 0, PI, CHORD);

  beginShape();
  vertex(480, 355);
  vertex(510, 430);
  endShape(CLOSE);

  fill(0);
  textSize(20);
  text("Congrats! You're green", 210, 650);


  //push();
  // scale(1.5);
  //translate(width/4, height/4);
  // delay(1000);
  //pop();
}

(Besides, Rudi showed me some other ways to make it fancier, but sadly I only got the idea of the text. I’m still working on the push and pop function! ( And I listed these part with slashes at the end.)