一三套绘图引擎总览

在砚码科创里，同一份“画图”需求可以有三套写法。它们语法不同，但绘图思路完全一致：设背景 → 选颜色 → 画图形 → （动态）每帧重画。先认清各自定位，再按需选用。

二p5.js 核心概念

无论用哪套语法，最终都翻译成 p5.js。掌握这四个核心概念，就掌握了动态绘图。

1. 坐标系

画布像一张坐标纸：原点 (0,0) 在左上角，x 向右增大，y 向下增大。单位是像素。

• 画布大小：createCanvas(宽, 高)，如 createCanvas(400, 300)。
• 常用宏：width（画布宽）、height（画布高）——写动画时用它避免写死数值。

2. 颜色

p5.js 默认用 RGB，每个分量 0–255。可选加第 4 个参数表示透明度 alpha。

3. setup 与 draw：静态 vs 动态

这是 p5.js 的灵魂：

• setup()：只在开始时执行一次——建画布、设初始状态。
• draw()：每秒约 60 次循环执行——每帧重画，形成动画。
• 只要在 draw() 里用了会变的量（frameCount、mouseX…），画面就“动”起来。

4. 交互：鼠标与键盘

把图形坐标写成 mouseX, mouseY，图形就会跟着鼠标走。

三C++ 风格绘图

用 C++ 的语法习惯写，底层转译成 p5.js。只替换了类型关键字和函数定义，循环、分支、绘图 API 原样保留，几乎感受不到底层是 JS。

语法对照

最小示例：一个圆

C++ 风格void setup() {
  createCanvas(400, 300);
}
void draw() {
  background(220);
  fill(192, 57, 43);
  circle(200, 150, 100);
}

动画示例：鼠标跟随 + 循环

C++ 风格void setup() {
  createCanvas(400, 300);
}
void draw() {
  background(20, 20, 30, 40);   // 半透明背景 → 留下轨迹
  for(int i = 0; i < 6; i++) {
    fill(255, i * 40, 100);
    circle(mouseX + i * 10, mouseY, 30);
  }
}

四Python 风格绘图

用 Python 的缩进写法，转译器按缩进补大括号，映射 def / for range / if / while。

语法对照

最小示例：一个圆

Python 风格def setup():
    createCanvas(400, 300)

def draw():
    background(220)
    fill(192, 57, 43)
    circle(200, 150, 100)

动画示例：循环点阵

Python 风格def setup():
    createCanvas(400, 300)

def draw():
    background(20)
    for i in range(8):
        for j in range(6):
            fill(255, i * 30, j * 40)
            circle(40 + i * 48, 30 + j * 46, 26)

五绘图 API 速查（三语对照）

以下 API 在 C++ 风格、Python 风格、p5.js 里写法完全一致（语法壳不改变函数名）。

六教学路径：从静态到动态

按台阶递进，每一步都能看到即时反馈，适合课上一次带学生“动起来”。

七经典示例（可直接在动态绘图里运行）

1. 正弦波 动态C++

C++void setup() { createCanvas(400, 300); }
void draw() {
  background(240);
  stroke(44, 95, 138); noFill();
  beginShape();
  for(int x = 0; x <= width; x += 5) {
    float y = height/2 + sin(x*0.05 + frameCount*0.05) * 60;
    vertex(x, y);
  }
  endShape();
}

2. 行星轨道 动态Python

Pythondef setup():
    createCanvas(400, 300)

def draw():
    background(10, 10, 20)
    translate(width/2, height/2)
    fill(255, 210, 120)
    circle(0, 0, 50)
    fill(120, 180, 255)
    circle(cos(frameCount * 0.05) * 90, sin(frameCount * 0.05) * 90, 18)

3. 点击变色 交互Python

Pythondef setup():
    createCanvas(400, 300)

def draw():
    background(240)
    if mouseIsPressed:
        fill(255, 100, 100)
    else:
        fill(44, 95, 138)
    circle(mouseX, mouseY, 40)

4. 粒子雨 创意C++

C++int n = 60;
float px[60], py[60];
void setup() {
  createCanvas(400, 300);
  for(int i=0; i<n; i++){ px[i]=random(0,width); py[i]=random(0,height); }
}
void draw() {
  background(20, 20, 30, 40);
  for(int i=0; i<n; i++){
    py[i] += 2; if(py[i]>height){ py[i]=0; px[i]=random(0,width); }
    fill(150, 200, 255, 160);
    circle(px[i], py[i], 4);
  }
}

八常见错误排查

C++ 风格

Python 风格

通用

九课时建议（2–3 节课）

建议结合「砚码五宝」流程：选题（砚）→ 探究（码）→ 表达（笔）→ 存证（纸），让绘图作品进入项目与证据链。