[聚合文章] p5.js作品集（3）：蜜蜂和蜂巢（上）

过程分解（蜂巢）

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

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;

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。