# p5.js Collection (2): Color Flag

Effects. png

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

• arc()
• triangle()
• translate()
• rotate()
• push()
• pop()

Sketch.png

## Process decomposition

#### Initialization: Create a new drawing board

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

#### 1. Move the coordinate axis to the center of the top of the window and draw a circular arc

Move the axis to the center of the top of the window and draw a circular arc.png
``````function setup(){
createCanvas(windowWidth, windowHeight);
background(255);//Set background color
}
function draw(){
noFill();//No Fill
stroke(160);
strokeWeight(3);
translate(windowWidth / 2, 0);//Move the axis to the center of the top of the window
arc(0,0,200, 200,0,PI);//Draw an arc
}
``````

### 2. Draw a triangle (colored flag) at the right end of the arc

Draw a triangle (colored flag) at the right end of the arc.png
``````function setup(){
createCanvas(windowWidth, windowHeight);
background(255);//Set background color
}
function draw(){
noFill();
stroke(160);
strokeWeight(3);
translate(windowWidth / 2, 0);//Move the axis to the center of the top of the window
arc(0,0,200, 200,0,PI);//Draw an arc
triangle(140,0, 100, -20, 100,20);//Draw a triangle
}
``````

#### 3. Rotate the axis clockwise by 30deg to continue drawing the triangle (colored flag)

Rotate the axis 30 DEG clockwise to continue drawing the triangle (colored flag). png
``````function setup(){
createCanvas(windowWidth, windowHeight);
background(255);//Set background color
}
function draw(){
noFill();
stroke(160);
strokeWeight(3);
translate(windowWidth / 2, 0);//Move the axis to the center of the top of the window
arc(0,0,200, 200,0,PI);//Draw an arc
triangle(140,0, 100, -20, 100,20);//Draw a triangle
rotate(PI/ 6);//Rotate axis 30deg
triangle(140,0, 100, -20, 100,20);//Draw the second triangle
rotate(PI/ 6);
triangle(140,0, 100, -20, 100,20);//Draw the third triangle
rotate(PI/ 6);
triangle(140,0, 100, -20, 100,20);//Draw the fourth triangle
rotate(PI/ 6);
triangle(140,0, 100, -20, 100,20);//Draw the fifth triangle
rotate(PI/ 6);
triangle(140,0, 100, -20, 100,20);//Draw the sixth triangle
rotate(PI/ 6);
triangle(140,0, 100, -20, 100,20);//Draw the seventh triangle
}
``````

#### 4. Simplify repetitive operations to a for loop

``````function setup(){
createCanvas(windowWidth, windowHeight);
background(255);//Set background color
}
function draw(){
noFill();
stroke(160);
strokeWeight(3);
translate(windowWidth / 2, 0);//Move the axis to the center of the top of the window
arc(0,0,200, 200,0,PI);//Draw an arc
for(var i = 0; i < 7; i++){//Seven cycles
triangle(140,0, 100, -20, 100,20);
rotate(PI/ 6);
}
}
``````

#### 5. Setting the fill color of the coloured flag

Set the fill color for the flag.png

1. Declare an array of color objects first

``````colors = [
{//LightSalmon
"r":255,
"g":160,
"b":122
},
{//Azure3
"r":193,
"g":205,
"b":205
},
{//Gold1
"r":255,
"g":215,
"b":0
}
];
``````

2. Set the r, g, b parameter values of the fill() method with the r, g, B attributes of the colors array elements.

``````function setup(){
createCanvas(windowWidth, windowHeight);
background(255);//Set background color
}
function draw(){
noFill();
stroke(160);
strokeWeight(3);
translate(windowWidth / 2, 0);
arc(0,0,200, 200,0,PI);
for(var i = 0; i < 7; i++){
fill(colors[i%3].r,colors[i%3].g,colors[i%3].b);
triangle(140,0, 100, -20, 100,20);
rotate(PI/ 6);
}
}
``````

#### 6. Drawing multi-coloured flags

Draw multiple sets of colored flags.png
``````function setup(){
createCanvas(windowWidth, windowHeight);
background(255);//Set background color
}
function draw(){
noFill();
stroke(160);
strokeWeight(3);

for(var j = 0; j < 5 ; j++){
push();//Operations between push() and pop(), such as translation and rotation, do not affect the overall coordinate system.
translate(windowWidth / 4 * j, -30);//Each iteration shifts the coordinates one quarter of the screen axially to the right and up by 30.
arc(0,0,200, 200,0,PI);
for(var i = 0; i < 7 ; i++){
fill(colors[i%3].r,colors[i%3].g,colors[i%3].b);
triangle(140,0, 100, -20, 100,20);
rotate(PI/ 6);
}
pop();
}
}
``````

#### Complete Code

``````colors = [
{//LightSalmon
"r":255,
"g":160,
"b":122
},
{//Azure3
"r":193,
"g":205,
"b":205
},
{//Gold1
"r":255,
"g":215,
"b":0
}
];
function setup(){
createCanvas(windowWidth, windowHeight);
background(255);
}
function draw(){
noFill();
stroke(160);
strokeWeight(3);

for(var j = 0; j < 5 ; j++){
push();
translate(windowWidth / 4 * j, -30);
arc(0,0,200, 200,0,PI);
for(var i = 0; i < 7 ; i++){
fill(colors[i%3].r,colors[i%3].g,colors[i%3].b);
triangle(140,0, 100, -20, 100,20);
rotate(PI/ 6);
}
pop();
}
}
``````

Posted on Sat, 16 May 2020 10:10:06 -0700 by Franko126