p5.js Collection (1): Cherry Blossoms

Effects. png

Work Link

https://codepen.io/SampleTape/full/Rxbrde/

Main methods

  • rect()
  • rotate()
  • translate()

sketch

Sketch.png

Process decomposition

Initialization: Create a new drawing board

function setup(){
   createCanvas(windowWidth, windowHeight);
   background(255);//Set background color
}

1. Draw a rectangle

function setup(){
   createCanvas(windowWidth, windowHeight);
   background(255);
}
function draw(){
   rect(0,-40,160,80);//Draw a rectangle
}

2. Draw a pink rectangle without a border

function setup(){
   createCanvas(windowWidth, windowHeight);
   background(255);
}
function draw(){
   noStroke();//no border
   fill(255, 20, 147);//Pink
   rect(0,-40,160,80);//Draw a rectangle
}

3. Shift the axis to the center of the window

function setup(){
   createCanvas(windowWidth, windowHeight);
   background(255);
}
function draw(){
   translate(windowWidth / 2, windowHeight / 2);//Shift the axis to the center of the window
   noStroke();//no border
   fill(255, 20, 147);//Pink
   rect(0,-40,160,80);//Draw a rectangle
}

4. Continue drawing a rectangle after rotating the coordinate axis with the origin as the center of the axis

function setup(){
   createCanvas(windowWidth, windowHeight);
   background(255);
}
function draw(){
   translate(windowWidth / 2, windowHeight / 2);//Shift the axis to the center of the window
   noStroke();//no border
   fill(255, 20, 147);//Pink
   rect(0,-40,160,80);//Draw a rectangle
   //Be careful:
   //The middle point on the left side of the rectangle should coincide with the origin of the coordinate axis
   //The y-parameter of the rectangle moves up half the height of the rectangle
   rotate(PI * 2 / 5);//Rotate axis 72 DEG
   rect(0,-40,160,80);//Draw the second rectangle
   rotate(PI * 2 / 5);//Rotate axis 72 DEG
   rect(0,-40,160,80);//Draw the third rectangle
   rotate(PI * 2 / 5);//Rotate axis 72 DEG
   rect(0,-40,160,80);//Draw the fourth rectangle
   rotate(PI * 2 / 5);//Rotate axis 72 DEG
   rect(0,-40,160,80);//Draw the fifth rectangle
}

5. Simplify drawing 5 rectangles into a for loop (full code)

function setup(){
   createCanvas(windowWidth, windowHeight);
   background(255);
}
function draw(){
   translate(windowWidth / 2, windowHeight / 2);//Shift the axis to the center of the window
   noStroke();//no border
   fill(255, 20, 147);//Pink
   for(var i = 0; i < 5 ; i++){
       rect(0,-40,160,80);//Draw a rectangle
       rotate(PI * 2 / 5);//Rotate axis 72 DEG
   }
}

This code can be run in the online editor of p5.js
http://alpha.editor.p5js.org

p5.js Online Editor Interface.png

Posted on Sat, 16 May 2020 12:18:42 -0400 by nonexistentera