p5.js Collection (2): Color Flag

Effects. png

Work Link

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

Main methods

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

sketch

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