p5.js作品集（4）：蜜蜂和蜂巢（下）

效果图.png

作品链接

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

主要方法

• beginShape()
• endShape()
• vertex()
• quadraticVertex()
• translate()
• rotate()
• push()
• pop()
• ellipse()

过程分解（蜜蜂）

一、绘制蜜蜂的一对触角

绘制蜜蜂的一对触角.png

  stroke(0);//设置轮廓颜色为黑色
  noFill();//无填充色
  rotate(PI/12);//将坐标轴旋转PI / 12使蜜蜂的身体倾斜
  beginShape();//开始绘制蜜蜂的一只触角
  vertex(-r/4,0);//起点
  quadraticVertex(-r/2,-r/2,r/4, -r);//设置贝赛尔曲线的端点
  ellipse(r/4 + 2,-r + 2,4,4);//触角末端的圆点
  endShape();//结束绘制
  beginShape();//开始绘制蜜蜂的另一只触角
  vertex(-r/4,0);//起点
  quadraticVertex(-r + 10,-r + 10,r/4, -r + 10);//设置贝赛尔曲线的端点
  ellipse(r/4 + 2,-r + 10 + 2,4,4);//触角末端的圆点
  endShape();//结束绘制

二、绘制蜜蜂的头

绘制蜜蜂的头.png

 fill('#fff');//设置填充色为白色
 ellipse(0,0,r/2,r/2);//以坐标轴原点为圆心画圆

三、绘制蜜蜂的眼睛

绘制蜜蜂的眼睛.png

  fill('#000');//设置填充色为黑色
  ellipse(-r/12,r/8,r/4,r/4);//绘制眼睛

四、绘制蜜蜂的身体和刺

绘制蜜蜂的身体和刺.png

  translate(r/2,0);//将坐标轴向右平移
  fill('#000');//设置填充色为黑色
  ellipse(0,0,r/3 * 2,r/3);//画一个椭圆（身体）
  line(0,0,r/3 + 5,0);//画线（蜂刺）

五、绘制蜜蜂的翅膀

绘制蜜蜂的翅膀.png

  fill('#fff');//设置填充色为白色
  translate(-r/6,-r/3);//将坐标轴平移至身体中点
  rotate(PI/3);//使翅膀倾斜一定角度
  ellipse(0,0,r/3 * 2,r/3);//绘制椭圆
  translate(-r/6,-r/3);//将坐标轴平移至身体中点
  rotate(PI/3);//使翅膀倾斜一定角度
  ellipse(0,0,r/3 * 2,r/3);//绘制椭圆

绘制蜜蜂所需全部代码

  push();
  stroke(1);
  noFill();
  rotate(PI/12);
  beginShape();
  vertex(-r/4,0);
  quadraticVertex(-r/2,-r/2,r/4, -r);
  ellipse(r/4 + 2,-r + 2,4,4);
  endShape();
  beginShape();
  vertex(-r/4,0);
  quadraticVertex(-r + 10,-r + 10,r/4, -r + 10);
  ellipse(r/4 + 2,-r + 10 + 2,4,4);
  endShape();
  fill('#fff');
  ellipse(0,0,r/2,r/2);
  fill('#000');
  ellipse(-r/12,r/8,r/4,r/4);
  translate(r/2,0);
  fill('#000');
  ellipse(0,0,r/3 * 2,r/3);
  line(0,0,r/3 + 5,0);
  translate(-r/6,-r/3);
  fill('#fff');
  rotate(PI/3);
  ellipse(0,0,r/3 * 2,r/3);
  rotate(PI/3);
  translate(-r/6,-r/3);
  ellipse(0,0,r/3 * 2,r/3);
  pop();