Starter Code: Shape Design Exercise 1

//1) Make a fork of this starter code sketch. 

​

//2) Analyze the code commands and notes provided.

​

//3) Complete the 5 exercises at the bottom and turn into: 3

​

​

​

function setup() {

  createCanvas(500,500);

}

​

​

function draw() {

  background(255);

  //EXPLANANTION ON CODE COMMANDS BELOW

  //Also, see: https://p5js.org/reference/

  //upper left blue ellipse

  strokeWeight (1);//stroke thickness is 1

  noStroke(); //no outline color

  fill (0,0,255) //fill blue

  ellipse(100, 100, 150, 75); //draw ellipse

  //green line

  stroke(0,255,0); //green outline color

  line (0,0,500,500); //draw line 

  //3 blue rectangles

  fill (0,0,255);  //fill blue

  rect (100,400,100,100);//draw rect

  stroke (255,0,0);

  fill (0,0,255,100); //fill blue with 100 opacity

  rect (200,400,100,100); //draw rect

  noStroke();  //remove stroke

  fill (0,0,255,25); //fill blue with 25 opacity

  rect (300,400,100,100); //draw rect

  //2 Yellow Ellipses

  fill (255,255,0); //fill yellow 

  ellipse (400,100,50,50) //draw ellipse

  stroke (255,0,255); //stroke color now pink

  strokeWeight (20); //stroke thickness now 20

  ellipse (400,200,50,50); //draw ellipse

} 

​

//5 Exercises Below

​

  //EXERCISE #1

  //Add another ellipse in the center

  //that is tall, skinny, and is transparent red.

  //EXERCISE #2

  //add another line that crosses the first green line to make an X. 

  //Make it red and 10 pixels thick.

  //EXERCISE #3

  //Explain the differences between the bottom 3 blue rects

  //as a comment here:

​

  //EXERCISE #4

  //Add a third yellow ellipse below the first 2 

  //with a blue stroke that is 5 pixels thick.

​

  //EXERCISE #5

  //Add a quad AND a triangle anywhere you would like in the design.

​