Week 1

I am a graphic and UI designer. After studied some basic HTML and CSS at school, I enjoyed the benefit of turning designs into codes and displaying on websites that can be displaced in any size of screens. My previous job at Quartz provided me a chance to closely working with developers. While chatting and working with them side by side, I slowly notice how coding can achieve so much more on top of my design. Many charts that required hours of labor can be quickly completed with codes in better accuracy and quality.

Slowly I was not happy with the design tools I know and not satisfied only designing for a flat environment behind the screen. During my spare time, I love going to concerts and shows with friends, and I admire all the visuals generated by code. Then I realized that coding is the bridge connecting what I can do and where I want to be.

Refik Anadol is one of my favorite artists who uses coding to create visual animations. And Zach Lieberman is another fantastic artist who does a lot of code generated art. By the end of this course, I hope to create something similar or simpler to those artworks.

The Worksheet

The image we need to recreate has four layers: The cyan background, the red stripe, the green ellipse, and the blue square. The plan is to create and color each shape from bottom to top, so they will overlap each other in the correct order. 

The cyan background is created by using createCanvas(). I found the size of the image is 6.51in * 4.88in. So I created a 651px * 488px canvas. And used the color picker to find the RGB attributes for the background color.

The red strip runs from the top left corner to the bottom right corner of the canvas. I was thinking of using a rectangle shape to do this part, but it will be complicated to figure out the position and size of it. Then I explored the idea of using a line connecting two corners and set a thicker stroke weight to achieve the goal. By using strokeWeight(40) I was able to get what I was looking for. And I sort of eyeballed the weight to be 40. 

I think the green ellipse is right in the center of the canvas, and the width and height are both half the size of the width and height of the canvas. Using noStroke() to turn off the stroke of the ellipse. However, I then ran into the following problem.

I ran into the following mistake after I wrote the code for the green ellipse:

I was trying to figure out why the red line disappeared after I had the noStroke() function for the green ellipse. Code runs from top to bottom line by line, so it should not happen. Then I realize, I was drawing the line then setting stroke color and weight for it.

//drawing the red line
line(0, 0, 651, 488);  
stroke(255, 2, 0);  
strokeWeight(40);

//drawing green ellipse  
fill(0,200,2);  
noStroke();  
ellipse( width/2, height/2, width/2, height/2);

(WRONG) Without noStroke()

(WRONG) With noStroke()

(FIXED) With noStroke()

The last step was the blue square. I figured the bottom right corner of the square is right on the edge of the green ellipse, and it’s right on the horizontal centerline of the image. So it is easy to figure out the position of that corner. I found an attribute call rectMode(), which can be set to CORNERS. In this project, I was trying to use width and heght for all the measurements and positioning, because everything is either centered or anchored to corners and edges or just the half size of the canvas. So I ended up having this

rect(width * 3 / 4 - 40, height / 2 - 40, width * 3 / 4, height / 2);

The final code:

function setup() {
  createCanvas(651, 488);
}

function draw() {
  //setting the background color to cyan
  background(0, 255, 255);

  //drawing the red line
  stroke(255, 2, 0);
  strokeWeight(40);
  line(0, 0, width, height);

  //drawing green ellipse
  noStroke();
  fill(0, 200, 2); 
  ellipse(width / 2, height / 2, width / 2, height / 2);

  //drawing blue square
  rectMode(CORNERS);
  fill(1, 0, 128);
  rect(width * 3 / 4 - 40, height / 2 - 40, width * 3 / 4, height / 2);
}

And the result:

The Screen Drawoing

For the screen drawing, I did a quick sketch first. This helps me to conceptualize the final work as well as finding relative distance for each element.

I created basic shapes and filled with grayscale colors, then move them to their desired positions. In this way, I can speed up the process and see a general outline of the sketch quickly. With a sketch drawing, I didn't need to guess x and y-axis locations too much. The most challenging part is definitely using the arc(). It was hard to figure out the start and the stop. I tried my way out basically. After I had all the elements in place, I finalize by coloring each block and setting different weights for all the strokes.

Final result: