前言

忽然疫情放开了，在里知道的一个掘友（战场小包），忽然今天找我。

：寻思啥事呢，原来找我做个自画像。
：行！没问题！
：结果等半响（一晚上到今天），也没见发自拍照给我。
：莫非老包这小子，在检测我？

等等，我又仔细品了品说的对话。

扩大

噢？
懂了！一定是那样的！立刻安排！公然，老包大老爷们搞这种东西…
知老包者，老南也。

一、照本宣科

那我可就献丑了！

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万现金大奖」