前言
忽然疫情放开了,在里知道的一个掘友(战场小包),忽然今天找我。
:寻思啥事呢,原来找我做个自画像。
:行!没问题!
:结果等半响(一晚上到今天),也没见发自拍照给我。
:莫非老包这小子,在检测我?
等等,我又仔细品了品说的对话。
扩大
噢?
懂了!一定是那样的!立刻安排!公然,老包大老爷们搞这种东西…
知老包者,老南也。
一、照本宣科
那我可就献丑了!
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.*;
导入报错
可参阅下面的地址过程进行安装与导入。
(地址:/post/717411…)
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 声响导入教程:/post/717411…
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();
}
}
文章小尾巴
文章写作、模板、文章小尾巴可参阅:《写作“小心思”》
感谢你看到终究,终究再说两点~
①假如你持有不同的看法,欢迎你在文章下方进行留言、评论。
②假如对你有协助,或者你认可的话,欢迎给个小点赞,支持一下~
我是南方者,一个热爱计算机更热爱祖国的南方人。
(文章内容仅供学习参阅,如有侵权,十分抱歉,请立即联络作者删除。)
本文正在参加「金石方案 . 分割6万现金大奖」