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

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

一、概述：

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

二、作品展示

①星星闪耀 ②花朵留痕

三、实验步骤

*好用的坐标指引：【在官方教程中的坐标实时输出】 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一千克欣喜