P5.js码绘———拉普兰德做得到吗？

最新推荐文章于 2020-11-29 21:12:40 发布

qq_41611736

最新推荐文章于 2020-11-29 21:12:40 发布

阅读量548

点赞数 1

分类专栏：作业文章标签： P5.js 明日方舟码绘

本文链接：https://blog.csdn.net/qq_41611736/article/details/102790141

版权

这篇博客利用P5.js库创作了一个互动的德克萨斯形象，通过代码实现了德克萨斯的轮廓描绘，并且加入了鼠标点击交互功能，使得用户可以摇动德克萨斯的尾巴。主要技术点包括使用贝塞尔曲线绘制线条，通过noFill()和fill()控制描边与填充，以及mouseClicked()函数实现交互逻辑。

摘要由CSDN通过智能技术生成

用p5.js代码画一个德克萨斯，拉普兰德做得到吗？

图片展示
在这里插入图片描述
点击可以交互式摇动德克萨斯的尾巴！！！

函数介绍
主要的线条都是用贝塞尔曲线画的，

vertex(111,238);//顶点
bezierVertex(98,305,123,288,98,346);//贝塞尔曲线

描线使用noFill（）；
填色使用fill(),
function mouseClicked() 作为判断鼠标是否点击的函数

完整代码

https://editor.p5js.org/frog/sketches/1604u2Dp5

let pocky=false;
function setup() {
   
    createCanvas(600, 600);

    frameRate(25);

}

function draw() {
   
   background(255);
  //发梢左/
  beginShape();
  stroke(97,104,123);
  strokeWeight(1);
  fill(97,104,123);
  vertex(111,238);
  bezierVertex(98,305,123,288,98,346);
  bezierVertex(90,350,220,400,133,230);
  endShape();
  
  beginShape();
  stroke(97,104,123);
  strokeWeight(1);
  noFill();
  fill(255,255,255);
  vertex(180,364);
  bezierVertex(105,280,144,339,124,356);
  endShape();
  
  beginShape();
  stroke(14,13,13);
  strokeWeight(5);
  noFill();
  vertex(142,245);
  bezierVertex(139,286,151,309,171,332);
  endShape();
  
  beginShape();
  stroke(14,13,13);
  strokeWeight(5);
  fill(255,255,255);
  vertex(135,335);
  bezierVertex(128,296,127,334,171,332);
  endShape();
  
  beginShape();
  stroke(14,13,13);
  strokeWeight(5);
  fill(97,104,123);
  vertex(135,335);
  bezierVertex(139,355,110,356,118,356);
  endShape();
  
  beginShape();
  stroke(14,13,13);
  strokeWeight(5);
  fill(255,255,255);
  vertex(116,356);
  bezierVertex(118,317,125,343,95,349);
  endShape();
  
  beginShape();
  stroke(14,13,13);
  strokeWeight(5);
  fill(97,104,123);
  vertex(133,341);
  bezierVertex(101,313,125,281,123,260);
  endShape();
  
  beginShape();
  stroke(14,13,13);
  strokeWeight(5);
  fill(255,255,255);
  vertex(97,347);
  bezierVertex(133,303,99,303,112,247);
  endShape();
  
  
  
  //左手/
  beginShape();
  stroke(14,13,13);
  strokeWeight(5);
  fill(255,255,255);
  vertex(165,310);
  bezierVertex(108,375,179,400,197,326);
  endShape();
  
  beginShape();
  stroke(14,13,13);
  strokeWeight(5);
  fill(242,239,230);
  vertex(143,350);
  bezierVertex(148,336,172,336,186,353);
  endShape();
  beginShape();
  stroke(14,13,13);
  strokeWeight(5);
  fill(242,239,230);
  vertex(143,350);
  bezierVertex(143,374,173,380,186,353);
  endShape();
  
  /
  
  //左腿//
  beginShape();
  stroke(14,13,13);
  strokeWeight(5);
  fill(62,56,57);
  vertex(335,300);
  bezierVertex(335,350,337,321,339,351);
  bezierVertex(382,352,377,338,379,293);
  endShape();
  /
  
  //右腿//
  beginShape();
  stroke(14,13,13);
  strokeWeight(5);
  fill(62,56,57);
  vertex(376,292);
  bezierVertex(383,280,398,328,408,340);
  bezierVertex(451,332,445,304,421,278);
  endShape();
  
  
//   /尾巴///
  beginShape();
  stroke(97,104,123);
  strokeWeight(5);
  fill(97,104,123);
  vertex(486,130);
  bezierVertex(397,177,404,189,395,206);
  endShape();
  
  beginShape();
  stroke(97,104,123);
  strokeWeight(7);
  fill(97,104,123);
  line(486,130,400,206);
  endShape();

  
  beginShape();
  stroke(14,13,13);
  strokeWeight(5);
  fill(97,104,123);
  vertex(395,198);
  bezierVertex(385,160,