p5.js作品集（3）：蜜蜂和蜂巢（上）

效果图.png

作品链接

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

主要方法

• beginShape()
• endShape()
• vertex()
• translate()
• push()
• pop()

主要思想

• 封装

草图

草图.png

过程分解（蜂巢）

一、编写一个蜂巢对象的构造函数

function beehive(x,y,r){
  this.x = x; //蜂巢中心的x轴坐标
  this.y = y; //蜂巢中心的y轴坐标
  this.r = r;  //蜂巢的半径
  this.display = function(){
    fill('#ff0'); //蜂巢的填充色为黄色
    noStroke();//无边框
    push();//push()与pop()之间的坐标系操作不会影响全局的坐标系
    translate(this.x,this.y);//将蜂巢中心与坐标轴原点对齐
    beginShape();//开始绘制一个蜂巢
    vertex(this.r * cos(PI / 6), this.r * sin(PI / 6));//从六边形右下角的一点开始，逆时针依次绘制剩余5个顶点
    vertex(this.r * cos(PI / 6), -this.r * sin(PI / 6));
    vertex(0,-this.r);
    vertex(- this.r * cos(PI / 6), -this.r * sin(PI / 6));
    vertex(- this.r * cos(PI / 6), this.r * sin(PI / 6));
    vertex(0,this.r);
    endShape(CLOSE); //结束绘制，参数CLOSE表示自动连接起点与终点
    pop();
  };
}

二、声明一个全局beehives数组保存所有的蜂巢对象

var beehives = [];

三、创建一个画板，并实例化7个蜂巢对象

function setup(){
  createCanvas(windowWidth, windowHeight);//创建一个画板
  background(255);
  for(var i = 0; i < 7; i++){
    beehives[i] = new beehive(0,0,r);//实例化7个蜂巢对象
  }
}

四、定义全局变量r表示蜂巢半径，margin表示蜂巢间距

var r = 50;
var margin = 5;

五、先绘制位于中心的蜂巢

中心蜂巢.png

function draw(){
  background(255);
  translate(windowWidth / 2, windowHeight / 2);
  beehives[0].display();//调用beehive对象的display方法
}

六、将坐标轴平移，循环绘制周围的6个蜂巢

坐标轴平移至左上角.png

function draw(){
  background(255);
  translate(windowWidth / 2, windowHeight / 2);
  beehives[0].display();
  translate(-(2 * r * cos(PI / 3)  + 2 * margin * cos(PI / 3) ),-(2 * r  + 2 * margin) * sin(PI / 3));//将坐标轴平移至左上角
  for(var i = 1; i < 7; i++){//循环绘制周围6个蜂巢
    beehives[i].display();//绘制蜂巢
    translate((2 * r + 2 * margin) * cos(PI / 3 *(i-1)), (2 * r + 2 * margin) * sin(PI / 3 * (i-1)));//以中心蜂巢的中心点为轴心，以2倍蜂巢半径加2倍间距为半径，旋转平移坐标轴。
  }
}

蜂巢效果图.png

七、绘制蜂巢所需全部代码

function beehive(x,y,r){
  this.x = x;
  this.y = y;
  this.r = r;
  this.display = function(){
    fill('#ff0');
    noStroke();
    push();
    translate(this.x,this.y);
    beginShape();
    vertex(this.r * cos(PI / 6), this.r * sin(PI / 6));
    vertex(this.r * cos(PI / 6), -this.r * sin(PI / 6));
    vertex(0,-this.r);
    vertex(- this.r * cos(PI / 6), -this.r * sin(PI / 6));
    vertex(- this.r * cos(PI / 6), this.r * sin(PI / 6));
    vertex(0,this.r);
    endShape(CLOSE); 
    pop();
  };
}
var r = 50;
var margin = 5;
var beehives = [];

function setup(){
  createCanvas(windowWidth, windowHeight);
  background(255);
  for(var i = 0; i < 7; i++){
    beehives[i] = new beehive(0,0,r);
  }
}

function draw(){
  background(255);
  translate(windowWidth / 2, windowHeight / 2);
  beehives[0].display();
  translate(-(2 * r * cos(PI / 3)  + 2 * margin * cos(PI / 3) ),-(2 * r  + 2 * margin) * sin(PI / 3));
  for(var i = 1; i < 7; i++){
    beehives[1].display();
    translate((2 * r + 2 * margin) * cos(PI / 3 *(i-1)), (2 * r + 2 * margin) * sin(PI / 3 * (i-1)));  
  } 
}