使用P5.JS进行第二幅“码绘”

运用P5.JS实现一件编程创意作品，实现交互效果

最终图

虽然有点粗糙，但是看配色和号码大家都能猜出来是谁了吧。对，没错，就是科比▪哆啦A梦。看着不难，但实际做的时候也是费了一番功夫呢，接下来介绍一下我的绘制过程吧。

开始绘制

准备工作

1.设置画布； 2.设置线宽； 3.设置背景颜色；

createCanvas(900,600); strokeWeight(3); background(255,235,205);//杏仁灰

使用函数

1.四边形： quad(x1, y1, x2, y2, x3, y3, x4, y4) 2.椭圆： ellipse(x, y, w, h) 3.线: line(x1, y1, x2, y2)； 4.曲线： bezier(x1, y1, x2, y2, x3, y3, x4, y4)

开始绘图

其中一些顺序的遮盖，旋转后点的调试要自己慢慢的调，一定不要嫌麻烦。

1.使用ellipse（）函数画出哆啦A梦的脸和眼睛，使用line（）函数画出嘴巴、胡须等，这里需要注意的是眼睛有旋转一点角度后面对绘图会有影响。

fill(160,82,45) ellipse(220,160,240,230);//大圆 fill(255,255,255) ellipse(230,190,190,170);//小圆 ...... rotate(PI/ 100); ...... rotate(-PI/50); //鼻子 fill(255,215,0) ellipse(232,145,30,30) noFill(); //嘴巴 line(232,160,235,210) line(235,210,200,230) line(235,210,268,218) ......

2.使用bezier（）函数画出项圈。

//项圈 fill(255,215,0) bezier(180, 285, 190, 270,250 ,260, 278, 275) noFill();

3.使用quad（）函数画出胳膊和身子，用quad（）而没有用rect（）是因为quad（）可以任意调整四个点的位置，更加自由一些。

//身子 //rect(182, 280, 130, 120, 10); strokeWeight(3); quad(180, 285, 278, 275, 310, 380, 190, 400);//左上 右上 右下 左下

4.添加文本，画出logo。

fill(0) // 设置字体大小 textSize(15); text("LAKERS", 215,330); textSize(18); text("24", 233,350);

5.画出左边的手还有腿和脚，这里因为旋转的问题被耽误了很久，老调不到合适的地方，最终弄出来看着还行吧。

//左手 fill(255) translate(5,150); rotate(-PI/6); ellipse(20,250,50,70) noFill(); bezier(20, 250, 10, 230,30,230, 40, 255) rotate(PI/5); fill(255) ellipse(235,295,75,60) fill(160,82,45) ellipse(235,260,70,87) rotate(-PI/5); fill(255) ellipse(155,385,75,60) fill(160,82,45) ellipse(152,350,70,87)

6.使用ellipse（）、bezier（）、quad（）和rect（）函数画出篮球、篮板和栏杆。篮球尝试做了一个可以跟随鼠标移动的，但因为先后顺序问题，在有的部位，比如腿部，篮球就会被腿遮住，不过大家可以试着玩玩。

//篮球 fill(237,145,33); ellipse(......); //ellipse(mouseX,mouseY,110,110); noFill(); bezier(......) bezier(......) bezier(......) bezier(......) //bezier(mouseX-55,mouseY,mouseX,mouseY-10,mouseX+10,mouseY-10,mouseX+52,mouseY+5) //bezier(mouseX-38,mouseY-40,mouseX-18,mouseY-10,mouseX-11,mouseY+10,mouseX-42,mouseY+30) //bezier(mouseX-10,mouseY-54,mouseX+30,mouseY-40,mouseX+30,mouseY+10,mouseX-5,mouseY+55) //bezier(mouseX+43,mouseY-30,mouseX+32,mouseY-10,mouseX+30,mouseY+10,mouseX+47,mouseY+30)

7.动态背景是模拟P5.JS官网的雪花例子，弄了一个类似于篮球比赛取得胜利后的场景。具体可以参考官网的例子。

心得

第二次进行“码绘”，对P5.JS这个平台更加的熟悉，很多函数用起来很顺手，但调试点和遮盖顺序真的需要很细心，只要弄对了这些，码绘其实一点也不难，像我这样基础不扎实的也很容易上手，大家平时没事可以拿来玩玩。附上自己随手写来玩玩的“大头照”，纯属瞎画，仅供娱乐。