ps.js新手上路第二关——代码绘画

实现效果图

…

如何添加文本

添加文本的主要函数：

textSize(88);//设置字符大小 fill(0);//填充字符的颜色 text('需要显示的字符',x,y);//xy为字符显示的坐标

添加文本的主要代码：

function drawWords(x) { fill(0); text('Would', x, 530); fill(0); text('you', x+175, 530); fill(0); text('like', x+282, 530); fill(0); text('some', x+420, 530); fill(0); text('?', x+540, 530); }

…

如何实现鼠标点击事件

实验中利用mousePressed()，mouseDragged(),mouseReleased()实现的效果 该部分功能的实现可以参考p5.js里面的实例（附上链接：p5.js官网为鼠标功能实现提供的实例）

function mousePressed() { //添加点击鼠标需要响应的事件程序 }

下面是p5.js官网为mousePressed()给出的例子

let cnv; let d; let g; function setup() { cnv = createCanvas(300, 300); cnv.mousePressed(changeGray); // attach listener for // canvas click only d = 10; g = 100; } function draw() { background(g); ellipse(width / 2, height / 2, d, d); } // this function fires with any click anywhere function mousePressed() { d = d + 10;//鼠标每点击一次，圆的直径加10 } // this function fires only when cnv is clicked function changeGray() { g = random(0, 255); }

实现效果如下： mouseDragged()函数实现的实例链接

mouseReleased()函数实现的实例链接

主要实现代码：

function mousePressed() { if (overBox) { locked = true; fill(255, 255, 255); } else { locked = false; } xOffset = mouseX - bx; yOffset = mouseY - by; } function mouseDragged() { if (locked) { bx = mouseX - xOffset; by = mouseY - yOffset; } } function mouseReleased() { locked = false; } // 判断鼠标光标是否在box上 if ( mouseX > bx - boxSize && mouseX < bx + boxSize && mouseY > by - boxSize && mouseY < by + boxSize ) { overBox = true; if (!locked) { stroke(255); fill(0, 0, 0); } } else { stroke(255, 255, 0); fill(0, 0, 0); overBox = false; } //画眼镜 circle(bx+45, by-80, boxSize+10, boxSize+10); circle(bx-120, by-80, boxSize+10, boxSize+10); rect(bx-75,by-80,boxSize,boxSize-70)

…

实验过程中遇到的问题

1、坐标的确定 在图片中，所有不是直线的地方，全部都是由贝赛尔曲线绘制的。p5.js提供的贝赛尔曲线函数bezier(x1,y1,x2,y2,x3,y3,x4,y4)需要提供四个点的参数，所以在利用代码绘制的过程中，需要先大致的输入四个点，然后再慢慢去调整（此处可以通过PS获取大致的坐标点的位置）。

2、图像覆盖，颜色填充覆盖，线条覆盖的问题 p5.js中Draw()中的代码是逐行自上而下运行的，可以将其看作是在一块画布上按代码的顺序，一笔一画在画布上作画。所以在利用代码绘图的过程中尤其要注意顺序。例如如果我先画了眼睛，然后再去填充脸部的颜色，那么眼睛就会被脸部的颜色覆盖。还有noFill()，fill()，stroke()，noStroke()，strokeWeight()，这些函数的运用也需要注意“覆盖”的范围。

3、不规则图形的填充 图片的脸部，耳朵和身体都是由贝赛尔曲线构成的，如果只利用fill()去填充贝赛尔曲线的话，是完全不够的。所以只能一点一点的利用fill()去填充规则图形，以此来达到填充脸部，耳朵和身体的部分。 …

体会

码绘不比手绘简单，就像实现上面的图画，手绘可能很简单，但码绘就要考虑很多问题。