Processing如何绘制机器人？

99ANYc3cd6 机器人 2025-11-29 11

使用 Processing 绘制机器人是一个非常有趣且经典的项目，我们可以从简单到复杂，逐步构建一个机器人。

（图片来源网络，侵删）

这里我将为你提供一个基础版和一个进阶版的机器人代码，并详细解释每一部分。

基础版：简单的几何图形机器人

这个版本由最基本的圆形和矩形组成,非常适合初学者理解 Processing 的绘图函数。

代码

// 画一个简单的机器人
void setup() {
  size(400, 500); // 设置画布大小
  background(240); // 设置浅灰色背景
}
void draw() {
  // 头部
  fill(150, 150, 200); // 设置填充颜色为淡蓝色
  rect(100, 50, 200, 150, 20); // 画一个圆角矩形作为头部
  // 眼睛
  fill(255); // 设置填充颜色为白色
  ellipse(150, 120, 50, 50); // 左眼
  ellipse(250, 120, 50, 50); // 右眼
  // 眼珠
  fill(0); // 设置填充颜色为黑色
  ellipse(150, 120, 20, 20); // 左眼珠
  ellipse(250, 120, 20, 20); // 右眼珠
  // 嘴巴
  noFill(); // 不填充
  strokeWeight(3); // 设置线条粗细
  arc(200, 170, 80, 50, 0, PI); // 画一个半圆作为微笑的嘴巴
  // 身体
  fill(100, 100, 180); // 设置填充颜色为深蓝色
  rect(125, 220, 150, 200, 10); // 画一个圆角矩形作为身体
  // 左臂
  fill(150, 150, 200);
  rect(50, 250, 70, 30, 5); // 左臂
  // 右臂
  rect(280, 250, 70, 30, 5); // 右臂
  // 左腿
  fill(80, 80, 160);
  rect(150, 430, 40, 60, 5); // 左腿
  // 右腿
  rect(210, 430, 40, 60, 5); // 右腿
  // 胸前的控制面板
  fill(255);
  rect(170, 280, 60, 60, 5);
  fill(0, 255, 0);
  ellipse(200, 310, 20, 20); // 一个绿色的按钮
}

代码解析

setup(): 这个函数只在程序开始时运行一次，我们用它来设置画布的尺寸 (size()) 和背景颜色 (background())。
draw(): 这个函数会持续不断地循环执行，默认每秒60次，我们所有的绘图代码都放在这里。
基本绘图函数:
- rect(x, y, width, height, [cornerRadius]): 画矩形。x 和 y 是矩形左上角的坐标，最后两个参数是宽和高，第五个参数是圆角半径。
- ellipse(x, y, width, height): 画椭圆。x 和 y 是椭圆的中心坐标。
- arc(x, y, width, height, startAngle, stopAngle): 画圆弧，我们用它来画微笑的嘴巴。
- fill(r, g, b): 设置接下来要绘制图形的填充颜色。
- noFill(): 取消填充，只画轮廓。
- strokeWeight(weight): 设置轮廓线条的粗细。
- noStroke(): 不画轮廓。

运行这段代码,你就会得到一个静态的机器人。

进阶版：可交互的动画机器人

让我们让机器人动起来！我们将添加一些简单的动画效果，比如眼珠跟随鼠标，手臂会摆动。

（图片来源网络，侵删）

代码

float leftArmAngle = 0;
float rightArmAngle = 0;
float armDirection = 0.02;
void setup() {
  size(400, 500);
  background(240);
}
void draw() {
  background(240); // 每一帧都重绘背景，实现清屏效果
  // 计算眼珠位置，让它们看向鼠标
  float leftEyeX = constrain(mouseX, 125, 175); // 限制眼珠在眼眶内
  float rightEyeX = constrain(mouseX, 225, 275);
  float eyeY = 120;
  // 动画：手臂摆动
  leftArmAngle += armDirection;
  rightArmAngle -= armDirection;
  if (abs(leftArmAngle) > 0.5) { // 当摆动角度过大时，反转方向
    armDirection *= -1;
  }
  // 头部
  fill(150, 150, 200);
  rect(100, 50, 200, 150, 20);
  // 眼睛
  fill(255);
  ellipse(150, 120, 50, 50);
  ellipse(250, 120, 50, 50);
  // 眼珠（会跟随鼠标）
  fill(0);
  ellipse(leftEyeX, eyeY, 20, 20);
  ellipse(rightEyeX, eyeY, 20, 20);
  // 嘴巴
  noFill();
  strokeWeight(3);
  arc(200, 170, 80, 50, 0, PI);
  // 身体
  fill(100, 100, 180);
  rect(125, 220, 150, 200, 10);
  // 左臂（带动画）
  pushMatrix(); // 保存当前坐标系
  translate(120, 250); // 将坐标系原点移动到左肩
  rotate(leftArmAngle); // 旋转坐标系
  fill(150, 150, 200);
  rect(0, 0, 70, 30, 5);
  popMatrix(); // 恢复之前的坐标系
  // 右臂（带动画）
  pushMatrix();
  translate(280, 250);
  rotate(rightArmAngle);
  fill(150, 150, 200);
  rect(0, 0, 70, 30, 5);
  popMatrix();
  // 左腿
  fill(80, 80, 160);
  rect(150, 430, 40, 60, 5);
  // 右腿
  rect(210, 430, 40, 60, 5);
  // 胸前的控制面板
  fill(255);
  rect(170, 280, 60, 60, 5);
  fill(0, 255, 0);
  ellipse(200, 310, 20, 20);
}

新增功能解析

眼珠跟随鼠标:
- constrain(value, min, max): 一个非常有用的函数，可以将一个值限制在指定的最小和最大值之间，我们用它确保眼珠不会跑出眼眶。
- mouseX 和 mouseY: 这是 Processing 的内置变量，分别存储了当前鼠标的 X 和 Y 坐标。
手臂摆动动画:
- 我们在 setup() 外部定义了几个全局变量 (leftArmAngle, rightArmAngle, armDirection)，这样它们的值可以在 draw() 的多次调用中被保持和修改。
- 在 draw() 中，我们不断更新 leftArmAngle 和 rightArmAngle，让角度发生变化。
- if (abs(leftArmAngle) > 0.5) 语句用于判断摆动是否达到了极限，如果达到，就反转 armDirection 的符号，让手臂往回摆。
坐标系变换 (pushMatrix(), translate(), rotate(), popMatrix()):
- 这是 Processing (和所有基于 Processing 的库，如 p5.js) 中实现复杂动画和变换的核心。
- translate(x, y): 将当前的坐标系原点移动到 (x, y) 点。
- rotate(angle): 围绕当前坐标系的原点旋转坐标系。
- pushMatrix(): 保存当前的坐标系状态。
- popMatrix(): 恢复到最后一次 pushMatrix() 保存的状态。
- 为什么需要它们？ 因为我们要分别旋转左右手臂，如果不使用 push/pop，在旋转完左臂后，坐标系已经被改变了，再画右臂时就会出错。push/pop 确保了每个图形的变换都是独立的。