“码绘”第二集————编程创意作品

“码绘”第二集——编程创意作品<罗小黑>

一、概述：

1. 实验工具：P5.js
2. 创意作品结果：
   {主体罗小黑，背景的星星【借鉴学习的他人代码】，
   点击生成花，键盘控制改变表情}
3. 步骤讲述。

二、作品展示

①星星闪耀

②花朵留痕

三、实验步骤

*好用的坐标指引：【在官方教程中的坐标实时输出】

1. 主体罗小黑部分函数：

function cat(){
////画罗小黑///
//////身体///////
  stroke(86,54,33);//棕色
  strokeWeight(3);
  fill(0);
  beginShape();
	vertex(198, 186); // first point
  bezierVertex(151, 190 ,137, 227, 143, 242);
  bezierVertex(170, 262 ,185, 256, 217, 256);
  bezierVertex(231, 248 ,231, 248, 234, 239);
	endShape();

/////尾巴/////
  stroke(86,54,33);//棕色
    fill(0);
  beginShape();
	vertex(142, 243); // first point
  bezierVertex(111, 237, 79, 198, 120, 175);//左1
  bezierVertex(145, 173, 142,190, 127, 202);//2
  bezierVertex(118, 220, 140,230, 140,229);//3
	endShape();

///右爪子-
  stroke(86,54,33);//棕色
beginShape();
	vertex(321, 239);
  bezierVertex(345, 260, 315, 290 ,292, 253);
	endShape();
		………………………………………………………………………………………………
}

其中关键点是bezier曲线的使用；
连续画bezier曲线的基本结构
beginShape();
vertex( _ , _ );//第一个结点坐标
bezierVertex( _, _ , _, _ , _, _);//中间是控制点，最后是结束点
endShape();

尤其是尾巴的画法：

最开始以为只可以分段来画构成整个尾巴，但最后一个弧度会出现问题，在不断改进中；发现可以改进为连续的bezier曲线，而且填色位置不会超出边界线。

2. 交互的实现：

• 键盘键的控制：keyCode变量可用来探测特别键。
  按下TAB键改变表情+甜甜圈变颜色；
  按下ALT键回到原来表情以及颜色。
  【在官方参考文献中有详细介绍】

fill(255,70,96,245);//红色
if (keyCode ==  TAB) {
    fill(191,62,255); // 紫色
  }
  else if(keyCode ===ALT){
    fill(255,70,96,245);//红色
  }

• 星星闪耀背景：
• 【是借鉴学习这位博主的文章“码绘”与手绘比较——动态篇（码绘使用p5.js）by一千克欣喜】
  主要代码：

function randomstar(x,y,r)//随机生成星星
{
  noStroke();
  for(var i=0;i<length;i++)
  {  
    var Millis = millis();
    var Second = millis()/1000;
    var randl = noise(Second)*200;
    randl=(rand_alpha[i]+randl)%320;//透明度的改变
    if(randl<30)
      randl=30;
    fill(255,255,0,randl);
    star(x[i],y[i],r[i]);
  }
}

利用透明度的变化不断刷新就会显示出闪烁的感觉。这里的背景要放在draw函数中。

• 花朵留痕
• [ 利用官方教程Pulsos] 使用的是鼠标控制交互；
• if(mouseIsPressed === true)点击时再点击处绘制花朵，也可拖动产生一串。
  【注：当backgrand(0);在draw函数中时会每画一次背景刷新一下，花朵一闪而过；而放在setup()函数中就可以包留下花朵。】

if(mouseIsPressed === true){
  noStroke();
   angle += 5;
    let val = cos(radians(angle)) * 12.0;
    for (let a = 0; a < 360; a += 75) {
      let xoff = cos(radians(a)) * val;
      let yoff = sin(radians(a)) * val;
      fill(255,64,64);//红色
      ellipse(mouseX + xoff, mouseY + yoff, val, val);
    }
    fill(255);
    ellipse(mouseX, mouseY, 2, 2);
  }

四、小结及体会

• 此次实验使用P5.js画了比较复杂的图形，重点学习了其中Bezier曲线的画法，发现P5十分的便捷，在多次学习中发现在home|p5.js中的参考文献、范例和学习中有大量便于学习理解的例子，对照示例代码学习会很容易；
• 其次，对于不规则作品的实现可视化坐标值是十分必要的，有效利用鼠标交互会使操作简化；
• 在码绘图中也发生了不出现图案现象，函数写了却无法看出执行，在新的文件中逐步排查，仔细思考就会发现代码的问题；
• 在P5.js中绘制图像的顺序十分重要；还有画笔的描边颜色，宽度，填图颜色等最好一一对应，做好注释改起来更方便。

参考资料

1.reference|p5.js
2.learn|p5.js
3.example|p5.js
4.“码绘”与手绘比较——动态篇（码绘使用p5.js）by一千克欣喜