【p5.js】作业二——创意自画像

创意自画像

主题

用编程方式创作一幅介绍自己的作品

要求

编程语言与工具：编程可以用p5,processing，若想用其他语言或工具，提前向老师说明情况；

作品: 一件编程创意作品，必须实现动态效果或交互效果；作品录制一段一分钟内的视频；作品可以是具象化地描绘自己的形象，也可以是任何形式表现自己的兴趣、追求、特色、经历等；

报告：写一篇文章，发表为博文/推文等形式，描述运用的规律，若用到了数学/物理/化学等学科中的知识，要用平实易懂的语言介绍原理，尝试运用凝练的数学语言表达（公式、方程、推导等），特别要描述出这些原理如何在作品中呈现的。

结果展示

实现步骤

绘制静态

非人哉哪吒
利用bezier曲线工具，绘制出整体线条轮廓（代码又臭又长

beginShape();
vertex(x1,y1);
bezierVertex(x2,y2,x3,y3,x4,y4);
endShape();

上色也比较麻烦，用beginShape和endShape慢慢上色块
加上背景，这里让背景有一个渐变的效果

渐变效果代码如下

function drawground(){
    var c1 = color(164,153,195);
    var c2 = color(190,200,220);   
    setGradient(0, 0, 900, 900,c1,c2,1);
}

function setGradient(x, y, w, h, c1, c2,axis) {
    noFill();
    if (axis == Y_AXIS) {  // Top to bottom gradient
      for (var i = y; i <= y+h; i++) {
        var inter = map(i, y, y+h, 0, 1);
        var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(x, i, x+w, i);
      }
    }  
    else if (axis == X_AXIS) {  
      for (var k = x; k <= x+w; k++) {
        var interk = map(k, x, x+w, 0, 1);
        var ck = lerpColor(c1, c2, interk);
        stroke(ck);
        line(k, y, k, y+h);
      }
    }
 }

交互

眼睛跟随鼠标移动效果

比较简单，让圆心坐标随鼠标改变一点即可

function draweye(){
  var dx=mouseX/50;
  var dy=mouseY/100;
  noStroke();
  fill(255,255,255);
  ellipse(160+dx,409+dy,10,10);
  ellipse(338+dx,421+dy,10,10);
}

背景雪花效果

p5.js官网上有源码，稍微改动了下让雪花能与鼠标产生一些互动
snowflakes

背后光圈点击发光效果

将上面背景渐变的代码加以修改

function setgh(x,y,x1,y1,c1,c2)
{
  if (flag){
  for(var i = 0; i<= x1/5; i++)
  {
    var inter = map(i, 0, 50, 0, 1);
    var c = lerpColor(c1, c2, inter);
    fill(c);
    ellipse(x,y,x1-i,y1-i);
  }
  }
}

总结

码绘挺不容易的，虽然过程比较艰难，做出结果后还是比较开心。