【码绘】p5.js画Q版自画像

【码绘】p5.js画Q版自画像

来自互动媒体作业的实验二，这次没有采用processing，而选择了p5.js，原因是用p5.js的在线编辑实时浏览比较方便。
先看一下最后的成果吧

我的实验过程：

• 手绘画自画像

当然是画个自画像啦！本人狼人杀爱好者，其实最喜欢玩的是预言家（不怕被狼刀的预言家！），不过总觉得预言家画起来可能没什么特征，最后选择了另一个趣味性角色——丘比特。
来自奥林匹斯星传

我尝试了一下，我觉得我不行，十分不行。
修改图片

好的，事情已经完成一半了！
按照自己的亚子把图片修改一下

• 编写程序
  先讲一下各个部位的实现，最后会有完整的代码

创建背景

function setup() {
    //setup函数，每次程序开始运行时执行一次，用于初始化。
    createCanvas(640, 480);
    angleMode(DEGREES);
} 

脸

    //脸
    fill(255, 245, 238);
    ellipse(300, 150, 80, 85);

头发

    //刘海中
    fill(253, 229, 93);
    beginShape();
    vertex(270, 110);
    vertex(290, 140);
    vertex(315, 135);
    vertex(310, 100);
    endShape(CLOSE);

    //刘海右1
    beginShape();
    vertex(300, 120);
    vertex(340, 140);
    vertex(330, 110);
    vertex(300, 100);
    endShape(CLOSE);

    //刘海左1
    beginShape();
    vertex(280, 110);
    vertex(280, 140);
    vertex(260, 120);
    endShape(CLOSE);

    //左侧头发
    beginShape();
    vertex(260, 115);
    vertex(240, 250);
    vertex(260, 270);
    vertex(270, 120);
    endShape(CLOSE);

    beginShape();
    vertex(246, 140);
    vertex(235, 220);
    vertex(260, 250);
    endShape(CLOSE);

    //右侧头发
    beginShape();
    vertex(354, 140);
    vertex(380, 250);
    vertex(350, 275);
    vertex(338, 185);
    vertex(330, 160);
    endShape(CLOSE);

    beginShape();
    vertex(260, 190);
    vertex(270, 210);
    vertex(275, 180);
    endShape(CLOSE);
  
    fill(253, 229, 93);
    beginShape();
    vertex(340, 130);
    vertex(320, 190);
    vertex(335, 190);
    vertex(350, 130);
    endShape(CLOSE);


    //挑染
    fill(255, 161, 61);
    beginShape();
    vertex(265, 140);
    vertex(255, 200);
    vertex(260, 210);
    vertex(270, 120);
    endShape(CLOSE);


    //挑染
    fill(255, 161, 61);
    beginShape();
    vertex(347, 140);
    vertex(330, 190);
    vertex(335, 190);
    vertex(350, 130);
    endShape(CLOSE);

    beginShape();
    vertex(280, 125);
    vertex(290, 140);
    vertex(295, 139);
    endShape(CLOSE);
    

五官

    //眼睛
    fill(54, 54, 54);
    //右眼
    ellipse(317, 150, 10, 15);
    arc(330, 143, 25, 25, 170,180);
    arc(330, 146, 25, 25, 170,180);
    //左眼
    ellipse(285, 150, 10, 15);
    arc(273, 143, 25, 25, 0,10);
    arc(273, 146, 25, 25, 0,10)