前言
突然疫情放开了，在掘金里认识的一个掘友（战场小包），突然今天找我。
：寻思啥事呢，原来找我做个自画像。
：行！没问题！
：结果等半天（一晚上到今天），也没见发自拍照给我。
：难道老包这小子，在考验我？
等等，我又仔细品了品说的对话。
放大
噢？
懂了！一定是那样的！马上安排！果然，老包大老爷们搞这种东西…
知老包者，老南也。
一、照猫画虎
那我可就献丑了！
1-1 准备图片
1-2 画背景
这里是分两部分
>
这里画背景，加个绿色的底色即可
即background(139, 231, 122); // 背景颜色
1-3 画衣服
画个红色的衣服
processing 这里是一层一层画上去，先后顺序，所以先画衣服。
即代码为：// 画衣服 fill(242, 88, 88); // 画笔 bezier(187, 480, 221, 323, 418, 194, 478, 480); // 贝塞尔曲线
1-4 画脸型
坨坨的脸蛋，要一个圆 + 一个贝塞尔曲线
// 脸部
fill(250, 181, 230); // 画笔
ellipse(345, 273, 221, 231); // 圆
fill(291, 181, 230); // 画笔
bezier(239, 245, 16, 60, 454, 149, 356, 177); // 贝塞尔曲线
1-5 画鼻圏
// 画猪鼻圈
stroke(255, 148, 238);
noFill();
strokeWeight(3);
ellipse(201, 167, 52, 59); // 鼻圈
1-6 画鼻孔
// 鼻孔
fill(186, 101, 166);
strokeWeight(13);
ellipse(190, 162, 2, 13); // 左边鼻子
ellipse(210, 169, 2, 13); // 右边鼻子
1-7 画耳朵
：老包，你好难画啊！
>
终于有点那味了
// 耳朵 noStroke(); fill(291, 181, 230); // 画笔 bezier(344, 149, 325, 77, 433, 81, 359, 156); // 贝塞尔曲线 左耳 bezier(397, 178, 384, 93, 497, 81, 413, 182); // 贝塞尔曲线 右耳
1-8 画小手
// 小手
stroke(253, 181, 230);
noFill();
strokeWeight(10);
// 右手
line(412, 404, 433, 464);
line(427, 448, 415, 459); // 左边手指头
line(429, 447, 444, 450); // 右边手指头
1-9 画嘴巴（微笑）
// 嘴巴（微笑）
stroke(186, 101, 166);
strokeWeight(5);
noFill();
bezier(280, 307, 321, 371, 359, 324, 365, 313); // 贝塞尔曲线
1-10 画脸红
// 脸红
noStroke();
fill(241, 151, 222);
ellipse(411, 258, 62, 79);
1-11 画眼睛
// 眼睛
fill(255); // 画笔
ellipse(359, 197, 38, 38); // 圆
ellipse(310, 181, 38, 38); // 圆
没眼珠子有点吓人。（因为我们眼珠子要随着鼠标可以动起来，所以我们是留到最后才画。也好调整）
1-12 画会动的眼珠子（眼珠子随鼠标动）
1-12-1 新建一个 Eye.pde 文件（眼睛类）
快捷键：Ctrl + Shift + N
Eye.pde 文件里的代码
class Eye {
float x, y;
int xSize;
int ySize;
float angle = 0.0;
Eye(float tx, float ty, int txs, int tys) {
x = tx;
y = ty;
xSize = txs;
ySize = tys;
}
void update(int mx, int my) {
angle = atan2(my-y, mx-x);
}
void display() {
pushMatrix();
// pushMatrix 和 popMatrix 之间的元素会统一变换
translate(x, y);
// 变换整个坐标系的位置
fill(255);
strokeWeight(4);
ellipse(0, 0, xSize, ySize);
rotate(angle);
fill(0);
ellipse(xSize/4, 0, xSize/2, ySize/2);
popMatrix();
}
}
1-12-2 Bao.pde 文件里添加的代码
Eye e1, e2; // 这里是需要在最上边添加
...
// 转动的眼珠
// 获取鼠标的坐标范围
fill(0);
stroke(0);
float X = map(mouseX, 0, 600, -23, -11);
float Y = map(mouseY, 0, 600, -11, 0);
e1 = new Eye( 344 + 2 * X, 192 + 2 * Y, 7, 8);
e2 = new Eye( 393 + 2 * X, 208 + 2 * Y, 7, 8);
e1.display();
e2.display();
1-13 写文字
PFont myFont = createFont("宋体", 50, false);
textFont(myFont);
text("战场小包的自画像", 135, 553);
1-14 加打招呼声（猪叫声~
可忽略这一步骤
import processing.sound.*;导入报错
可参考下面的地址步骤进行安装与导入。
（地址：https://juejin.cn/post/7174111296667779109#heading-11）
import processing.sound.*; // 这里是需要在最上边添加
SoundFile song; // 音频
void setup() {
size(600, 600);
song = new SoundFile(this, "pig.wav");
song.loop(); // 循环播放猪嘟嘟叫声
// song.play(); // 只播放一次猪嘟嘟叫声
}
二、最终的展示结果
三、技巧要点
3-1 调整（Ctrl + Shift + T）
要学会利用 processing 的 “调整” 进行操作。
（ 快捷键是：Ctrl + Shift + T ）
3-2 操作图
四、后续
最后，在我不到一天的时间里，我就完成了老包的发的自画像。
老包感动得还一个劲的谢谢我。搞得我都不好意思了…
五、完整代码
5-1 打招呼音频资料地址、cloud 声音导入教程
打招呼音频资料地址：南方者/processing-project
cloud 声音导入教程：https://juejin.cn/post/7174111296667779109#heading-11
5-2 Bao.pde
import processing.sound.*;
// 小猪佩奇
Eye e1, e2;
SoundFile song; // 音频
void setup() {
size(600, 600);
song = new SoundFile(this, "pig.wav");
// song.loop(); // 循环播放猪嘟嘟叫声
// song.play(); // 只播放一次猪嘟嘟叫声
}
void draw() {
// 背景（草地、天空）
background(139, 231, 122); // 背景颜色
noStroke(); // 去掉描边
// 画衣服
fill(242, 88, 88); // 画笔
bezier(187, 480, 221, 323, 418, 194, 478, 480); // 贝塞尔曲线
// 脸部
fill(250, 181, 230); // 画笔
ellipse(345, 273, 221, 231);// 圆
fill(291, 181, 230); // 画笔
bezier(239, 245, 16, 60, 454, 149, 356, 177); // 贝塞尔曲线
// 画猪鼻圈
stroke(255, 148, 238);
noFill();
strokeWeight(3);
ellipse(201, 167, 52, 59); // 鼻圈
// 鼻孔
fill(186, 101, 166);
strokeWeight(13);
ellipse(190, 162, 2, 13); // 左边鼻子
ellipse(210, 169, 2, 13); // 右边鼻子
// 耳朵
noStroke();
fill(291, 181, 230); // 画笔
bezier(344, 149, 325, 77, 433, 81, 359, 156); // 贝塞尔曲线 左耳
bezier(397, 178, 384, 93, 497, 81, 413, 182); // 贝塞尔曲线 右耳
// 小手
stroke(253, 181, 230);
noFill();
strokeWeight(10);
// 左手
line(412, 404, 433, 464);
line(427, 448, 415, 459);
line(429, 447, 444, 450);
// 嘴巴（微笑）
stroke(186, 101, 166);
strokeWeight(5);
noFill();
bezier(280, 307, 321, 371, 359, 324, 365, 313); // 贝塞尔曲线
// 脸红
noStroke();
fill(241, 151, 222);
ellipse(411, 258, 62, 79);
// 眼睛
fill(255); // 画笔
ellipse(359, 197, 38, 38); // 圆
ellipse(310, 181, 38, 38); // 圆
// 转动的眼珠
// 获取鼠标的坐标范围
fill(0);
stroke(0);
float X = map(mouseX, 0, 600, -23, -11);
float Y = map(mouseY, 0, 600, -11, 0);
e1 = new Eye( 344 + 2 * X, 192 + 2 * Y, 7, 8);
e2 = new Eye( 393 + 2 * X, 208 + 2 * Y, 7, 8);
e1.display();
e2.display();
PFont myFont = createFont("宋体", 50, false);
textFont(myFont);
//text("战场小包的自画像", 135, 553);
text("一个令人深思的微笑", 90, 553);
}
5-3 Eye.pde
class Eye {
float x, y;
int xSize;
int ySize;
float angle = 0.0;
Eye(float tx, float ty, int txs, int tys) {
x = tx;
y = ty;
xSize = txs;
ySize = tys;
}
void update(int mx, int my) {
angle = atan2(my-y, mx-x);
}
void display() {
pushMatrix();
// pushMatrix 和 popMatrix 之间的元素会统一变换
translate(x, y);
// 变换整个坐标系的位置
fill(255);
strokeWeight(4);
ellipse(0, 0, xSize, ySize);
rotate(angle);
fill(0);
ellipse(xSize/4, 0, xSize/2, ySize/2);
popMatrix();
}
}
文章小尾巴
文章写作、模板、文章小尾巴可参考：《写作“小心思”》
感谢你看到最后，最后再说两点~
①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
我是南方者，一个热爱计算机更热爱祖国的南方人。
（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）
![[附源码]Nodejs计算机毕业设计基于的婚恋系统Express(程序+LW)](https://img-blog.csdnimg.cn/384584ba0e904d16b577266f88080202.png)
