p5.js作品集(2):彩旗

效果图.png

作品链接

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

主要方法

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

草图

p5.js作品集(2):彩旗_第1张图片
草图.png

过程分解

初始化:新建一块画板

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

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

p5.js作品集(2):彩旗_第2张图片
将坐标轴移至窗口顶部中心,画一个圆弧.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);//画一个圆弧
}

二、在圆弧右端画一个三角形(彩旗)

p5.js作品集(2):彩旗_第3张图片
在圆弧右端画一个三角形(彩旗).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继续绘制三角形(彩旗)

p5.js作品集(2):彩旗_第4张图片
将坐标轴顺时针旋转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);
   }  
}

五、给彩旗设置填充色

p5.js作品集(2):彩旗_第5张图片
给彩旗设置填充色.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(); 
    }
}

你可能感兴趣的:(p5.js作品集(2):彩旗)