p5.js作品集（2）：彩旗

效果图.png

作品链接

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

主要方法

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

草图

草图.png

过程分解

初始化：新建一块画板

function setup(){
   createCanvas(windowWidth, windowHeight);
   background(255);//设置背景颜色
}

一、将坐标轴移至窗口顶部中心，画一个圆弧

将坐标轴移至窗口顶部中心，画一个圆弧.png

function setup(){
   createCanvas(windowWidth, windowHeight);
   background(255);//设置背景颜色
}
function draw(){
   noFill();//没有填充色
   stroke(160);
   strokeWeight(3);
   translate(windowWidth / 2, 0);//将坐标轴移至窗口顶部中心
   arc(0,0,200, 200,0,PI);//画一个圆弧
}

二、在圆弧右端画一个三角形（彩旗）

在圆弧右端画一个三角形（彩旗）.png

function setup(){
   createCanvas(windowWidth, windowHeight);
   background(255);//设置背景颜色
}
function draw(){
   noFill();
   stroke(160);
   strokeWeight(3);
   translate(windowWidth / 2, 0);//将坐标轴移至窗口顶部中心
   arc(0,0,200, 200,0,PI);//画一个圆弧
   triangle(140,0, 100, -20, 100,20);//画一个三角形
}

三、将坐标轴顺时针旋转30deg继续绘制三角形（彩旗）

将坐标轴顺时针旋转30deg继续绘制三角形（彩旗）.png

function setup(){
   createCanvas(windowWidth, windowHeight);
   background(255);//设置背景颜色
}
function draw(){
   noFill();
   stroke(160);
   strokeWeight(3);
   translate(windowWidth / 2, 0);//将坐标轴移至窗口顶部中心
   arc(0,0,200, 200,0,PI);//画一个圆弧
   triangle(140,0, 100, -20, 100,20);//画一个三角形
   rotate(PI/ 6);//将坐标轴旋转30deg
   triangle(140,0, 100, -20, 100,20);//画第二个三角形
   rotate(PI/ 6);
   triangle(140,0, 100, -20, 100,20);//画第三个三角形
   rotate(PI/ 6);
   triangle(140,0, 100, -20, 100,20);//画第四个三角形
   rotate(PI/ 6);
   triangle(140,0, 100, -20, 100,20);//画第五个三角形
   rotate(PI/ 6);
   triangle(140,0, 100, -20, 100,20);//画第六个三角形
   rotate(PI/ 6);
   triangle(140,0, 100, -20, 100,20);//画第七个三角形
}

四、把重复操作简化为for循环

function setup(){
   createCanvas(windowWidth, windowHeight);
   background(255);//设置背景颜色
}
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++){//循环七次
     triangle(140,0, 100, -20, 100,20);
     rotate(PI/ 6);
   }  
}

五、给彩旗设置填充色

给彩旗设置填充色.png

1、先声明一个保存颜色对象的数组

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

2、以colors数组元素的r，g，b属性，设置fill()方法的r，g，b三个参数值。

function setup(){
    createCanvas(windowWidth, windowHeight);
    background(255);//设置背景颜色
}
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);
    }   
}

六、绘制多组彩旗

绘制多组彩旗.png

function setup(){
    createCanvas(windowWidth, windowHeight);
    background(255);//设置背景颜色
}
function draw(){
    noFill();
    stroke(160);
    strokeWeight(3);
  
    for(var j = 0; j < 5 ; j++){
        push();//push()与pop()之间对坐标系进行操作（例如：平移、旋转）不会对整体坐标系造成影响。
        translate(windowWidth / 4 * j, -30);//每次迭代将坐标轴向右平移屏幕的四分之一，并向上平移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(); 
    }
}

完整代码

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(); 
    }
}