p5.js码绘（二）一幅自画像

最新推荐文章于 2019-11-04 20:15:54 发布

迷宫十字鹿

最新推荐文章于 2019-11-04 20:15:54 发布

阅读量605

点赞数 1

文章标签： p5.js

本文链接：https://blog.csdn.net/l705653624/article/details/102842408

版权

本文展示了作者使用p5.js进行码绘自画像的过程，重点探讨了在绘图过程中遇到的问题，如贝塞尔曲线填充导致的不理想效果。通过调整绘图顺序和利用beginShape()函数来解决问题，最终完成了一幅独特的自画像作品。

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

p5.js码绘（二）一幅自画像

作业成果展示
实验步骤
代码

作业成果展示

在这里插入图片描述

实验步骤

绘图时主要用到了贝塞尔曲线以及直线，三角和圆角矩形。
由于贝塞尔曲线的填充会自动连接曲线的起始点和初始点导致颜色填充很奇怪，头发连接起来之后像贞子！！!（当时只顾着头痛忘记截图了，真的很恐怖很像女鬼！)所以我改变了绘图的顺序使人脸在头发之后绘制就可以覆盖头发在脸上多余的部分。但是因为我的脸也是贝塞尔曲线画的所以脸填充上颜色之后也很魔鬼……
后来在同学的帮助下我用了神奇的函数 beginShape()，用它来补全贝塞尔曲线没上颜色的部分（没错我的自画像都是缝缝补补才有的最终效果）。

代码

let snowflakes = [];
function setup() {
  createCanvas(400, 430);
}

function draw() {
  background('brown');
  fill(240);
  noStroke();
  let t = frameCount / 60; // update time

  // create a random number of snowflakes each frame
  for (let i = 0; i < random(5); i++) {
    snowflakes.push(new snowflake()); // append snowflake object
  }

  // loop through snowflakes with