p5.js

p5.js自画像

**

设计思路

设计思路其实花了我最长的时间 ，因为期间我有过好多思路，有俩做到一半放弃了。其实老师布置这项任务还蛮有趣的，刚开始也是花的好长时间来自己设计构思符合我本人的任务形象，但是在观察到这么多同学的作品后，我感觉我的设计没有特别突出亮眼的地方，很多同学的都跟二次元，所以我把我第一次 做的给扔掉了，我想来一种风格不一样的，其实第二次那种特别抽象的，很多相同或者简单的数学图形堆叠在一起的构成抽象的人形，但是 ，我发现，我越堆叠他就越不是人，还是缺乏这种抽象构图能力。在最后就是现在做的这个。不是太过于抽象的那种。
这张图片我放在PS里考虑了好久，应在怎么画她，因为他的难点在于都是曲线，而且颜色把控方面我也不太清楚改怎么画，她既不是渐变的颜色，也不是那种叠加的颜色，完完全全就是油画颜色。

设计过程

1. 采取图层设计 ，和PS一样，我采用了图层的设计，将同一种颜色的作为同一图层；
2. 大量运用贝赛尔曲线，不过就是曲线的控制点不好找，我是靠感觉，不过我在找点的时候 我用print(mouseX+" "+mouseY)来找曲线的上的点，其实有些平滑的全曲线控制点就在曲线上；
3. 我提前把图片 加载 在画布上，所以画起来可以简单点。

画黑色脸型

function black(){
  smooth();
  //stroke(123);
  fill(6,2,1);
  beginShape();
  //fill(0,0,0);
  vertex(126,376);
  vertex(65,376);
  bezierVertex(42,388,21,404,0,428);
  vertex(0,500);
  vertex(10,500);
  bezierVertex(30,456,42,434,62,423);
  vertex(62,423);
  bezierVertex(87,413,94,410,117,416);
  vertex(117,416);
  bezierVertex(138,427,151,431,165,459);
  vertex(165,459);
  bezierVertex(171,471,182,487,196,500);
  endShape();
  
  beginShape();
   //fill(204,102,0);
  vertex(125,376);
  bezierVertex(130,382,134,387,140,393);
  vertex(140,393);
   bezierVertex(152,403,162,411,171,421);
  vertex(171,421);
   bezierVertex(180,428,191,438,219,426);
  vertex(218,426);
   bezierVertex(245,410,262,398,280,380);
   vertex(304,380);
  vertex(275,455);
   bezierVertex(272,472,270,488,270,500);
  vertex(196,500);
  endShape();
  
  beginShape();
  vertex(279,381);
  bezierVertex(306,363,330,326,335,280);
  vertex(332,271);
  vertex(336,259);
  vertex(362,270);
  bezierVertex(355,284,355,294,354,311);
   vertex(354,311);
  bezierVertex(359,326,320,370,310,382);
  vertex(303,382);
  endShape();
  
  beginShape();
  vertex(65,376);
  bezierVertex(76,355,72,327,73,291);
   bezierVertex(85,252,58,238,28,194);
  bezierVertex(17,175,18,156,25,139);
   bezierVertex(32,122,31,90,34,73);
   bezierVertex(48,45,68,15,100,0);
  vertex(295,0);
  vertex(285,21);
  bezierVertex(286,54,267,86,234,67);
  bezierVertex(216,66,198,88,175,82);
  bezierVertex(165,89,135,90,124,102);
   bezierVertex(154,100,198,120,225,151);
  bezierVertex(228,162,215,171,203,163);
  bezierVertex(160,128,109,150,98,141);
  bezierVertex(90,161,102,185,92,203);
  bezierVertex(103,239,82,327,126,377);
  endShape();
  
  beginShape();
  vertex(212,333);
  bezierVertex(215,288,221,223,261,178);
  bezierVertex(286,141,326,168,358,170);
  bezierVertex(344,148,320,113,305,103);
  bezierVertex(294,95,290,79,290,62);
  bezierVertex(284,33,298,15,297,0);
  vertex(392,0);
  vertex(414,23);
   bezierVertex(438,118,411,181,407,215);
  bezierVertex(409,229,388,253,370,271);
  vertex(362,270);
  vertex(335,280);
  bezierVertex(301,289,259,274,245,254);
   bezierVertex(245,270,220,285,224,340);
  
  vertex(201,343);
  bezierVertex(198,342,198,338,200,335);
  vertex(212,333); 
  endShape();
  
   beginShape();
  vertex(102,197); 
   bezierVertex(102,197,103,203,109,204);
 bezierVertex(108,252,148,242,167,253);
  
  bezierVertex(224,246,208,210,198,198);
  bezierVertex(182,160,163,161,153,157);
  bezierVertex(137,170,112,150,107,191);
  vertex(102,197); 
  endShape();
  
  beginShape();
   vertex(171,371);
  bezierVertex(178,405,218,415,235,377);
  bezierVertex(218,358,225,358,206,359);
  bezierVertex(192,350,188,355,171,371);
  endShape();
  smooth();
}

至于交互来说，这种油画，我实在想不出该怎么交互，所以我就简单的做到了鼠标点击来实现画图的过程，这个也是我看到了同学的博客有的，所以特别谢谢 。

function draw() {
background(254,245,230);
//坐标原点设为图片中心 
imageMode(CENTER); 
//图片染色 
//tint(0,255,255); 
//绘制图片，后两个参数调整长宽 
//image(img,250,250,500,500); 
smooth();
//print(mouseX+"  "+mouseY);
noStroke();
noFill();

if (mouseIsPressed) {
if (frameCount%300<60)
  {
    black();
  } else if (frameCount%300<120) {
     blue1();
     black();
  } else if (frameCount%300<180 ) {
    blue1();
    black();
    hair();
  }else if (frameCount%300<240 ) {
    blue1();
    black();
    hair();
    eye();
  }else if (frameCount%300<300 ) {
    image(img,250,250,500,500);
  }}else{
    blue1();
push();
black();
pop();
eye();
hair();![在这里插入图片描述](https://img-blog.csdnimg.cn/20191103151839481.gif)
  }
}

设计结果