# p5.js Collection (1): Cherry Blossoms

Effects. png

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

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

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