前言

突然疫情放开了，在掘金里认识的一个掘友（战场小包），突然今天找我。

聊天记录.png

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

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

放大

噢？
懂了！一定是那样的！马上安排！果然，老包大老爷们搞这种东西...
知老包者，老南也。

一、照猫画虎

那我可就献丑了！

1-1 准备图片

知老包者，老南也.jpg

1-2 画背景

这里是分两部分
>
这里画背景，加个绿色的底色即可
即 background(139, 231, 122); // 背景颜色

1-3 画衣服

画个红色的衣服
processing 这里是一层一层画上去，先后顺序，所以先画衣服。即代码为：
// 画衣服
fill(242, 88, 88); // 画笔
bezier(187, 480, 221, 323, 418, 194, 478, 480); // 贝塞尔曲线

老包你好难画啊.jpg

1-4 画脸型

坨坨的脸蛋，要一个圆 + 一个贝塞尔曲线

  // 脸部
  fill(250, 181, 230); // 画笔
  ellipse(345, 273, 221, 231); // 圆
  fill(291, 181, 230); // 画笔
  bezier(239, 245, 16, 60, 454, 149, 356, 177); // 贝塞尔曲线

老包你好难画啊-画脸型.png

1-5 画鼻圏

  // 画猪鼻圈
  stroke(255, 148, 238);
  noFill();
  strokeWeight(3);
  ellipse(201, 167, 52, 59); // 鼻圈

老包你好难画啊-画鼻圏.png

1-6 画鼻孔

  // 鼻孔
  fill(186, 101, 166);
  strokeWeight(13);
  ellipse(190, 162, 2, 13); // 左边鼻子
  ellipse(210, 169, 2, 13); // 右边鼻子

老包你好难画啊-画鼻孔.png

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); // 贝塞尔曲线 右耳

我真的是自己画的呀.jpg

1-8 画小手

  // 小手
  stroke(253, 181, 230);
  noFill();
  strokeWeight(10);
  // 右手
  line(412, 404, 433, 464); 
  line(427, 448, 415, 459); // 左边手指头
  line(429, 447, 444, 450); // 右边手指头

老包你好难画啊-画小手.png

1-9 画嘴巴（微笑）

  // 嘴巴（微笑）
  stroke(186, 101, 166);
  strokeWeight(5);
  noFill();
  bezier(280, 307, 321, 371, 359, 324, 365, 313); // 贝塞尔曲线

老包你好难画啊-画嘴巴（微笑）.png

1-10 画脸红

  // 脸红
  noStroke();
  fill(241, 151, 222);
  ellipse(411, 258, 62, 79);

老包你好难画啊-画脸红.png

1-11 画眼睛

  // 眼睛
  fill(255); // 画笔
  ellipse(359, 197, 38, 38); // 圆
  ellipse(310, 181, 38, 38); // 圆

没眼珠子有点吓人。（因为我们眼珠子要随着鼠标可以动起来，所以我们是留到最后才画。也好调整）

1-12 画会动的眼珠子（眼珠子随鼠标动）

1-12-1 新建一个 Eye.pde 文件（眼睛类）

快捷键：Ctrl + Shift + N

老包你好难画啊-画眼睛.png

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);

老包你好难画啊-写文字.png

1-14 加打招呼声（猪叫声~

可忽略这一步骤

import processing.sound.*;导入报错
可参考下面的地址步骤进行安装与导入。
（地址：juejin.cn/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 ）

画老包.png

调整好后，最后退出调整的时候，要记得保存。（如果调得不好，可以不进行保存

老包好难画啊你.png

3-2 操作图

四、后续

最后，在我不到一天的时间里，我就完成了老包的发的自画像。
老包感动得还一个劲的谢谢我。搞得我都不好意思了...

后续.png

五、完整代码

5-1 打招呼音频资料地址、cloud 声音导入教程

打招呼音频资料地址：南方者/processing-project

cloud 声音导入教程：juejin.cn/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万现金大奖」

【Processing】我给掘友 “战场小包” 做了他的 “自画像”.

前言