Processing 的代码绘图功能比较丰富，可以通过直接输入代码定义坐标来绘制，也可以通过鼠标互动进行绘制，当然也可以使用一些函数来绘制更复杂一些的图形，同时使用函数来绘制也可以把代码变得更加简单。工具/原料moreProcessing3电脑方法/步骤1/7分步阅读

Processing 中使用 map 映射函数

输入代码：

void setup() {

size(240, 120);

strokeWeight(12);

smooth();

}

void draw() {

background(204);

stroke(255);

line(120, 60, mouseX, mouseY); // 白色线条

stroke(0);

float mx = map(mouseX, 0, width, 60, 180);

line(120, 60, mx, mouseY); // 黑色线条

}

运行函数，效果是通过鼠标的晃动可以使两个线条跟随着鼠标而动

2/7

直线跟随鼠标移动

输入代码：

void setup() {

size(240, 120);

strokeWeight(12);

smooth();

}

void draw() {

background(204);

stroke(255);

line(120, 60, mouseX, mouseY);

stroke(0);

float mx = mouseX/2 + 60;

line(120, 60, mx, mouseY);

}

3/7

Processing 中识别鼠标的点击动作

输入代码：

void setup() {

size(240, 120);

smooth();

strokeWeight(30);

}

void draw() {

background(204);

stroke(102);

line(40, 0, 70, height);

if (mousePressed == true) {

stroke(0);

}

line(0, 70, width, 50);

}

当单击鼠标左键时，线条会变成黑色

4/7

线条通过鼠标的指示运动

输入代码：

float x;

int offset = 10;

void setup() {

size(240, 120);

smooth();

x = width/2;

}

void draw() {

background(204);

if (mouseX x) {

x += 0.5;

offset = -10;

}

if (mouseX x) {

x -= 0.5;

offset = 10;

}

line(x, 0, x, height);

line(mouseX, mouseY, mouseX + offset, mouseY - 10);

line(mouseX, mouseY, mouseX + offset, mouseY + 10);

line(mouseX, mouseY, mouseX + offset*3, mouseY);

}

5/7

通过鼠标位置改变图形

输入代码：

int x = 120;

int y = 60;

int radius = 12;

void setup() {

size(240, 120);

smooth();

ellipseMode(RADIUS);

}

void draw() {

background(204);

float d = dist(mouseX, mouseY, x, y);

if (d radius) {

radius++;

fill(0);

} else {

fill(255);

}

ellipse(x, y, radius, radius);

}

6/7

鼠标放置在图形的位置，图形变为黑色

输入代码：

int x = 80;

int y = 30;

int w = 80;

int h = 60;

void setup() {

size(240, 120);

}

void draw() {

background(204);

if ((mouseX x) (mouseX x+w)

(mouseY y) (mouseY y+h)) {

fill(0);

} else {

fill(255);

}

rect(x, y, w, h);

}

7/7

代码回顾1：使用 if 语句

注意事项

经验中还有更多关于 Processing 编程的内容，感兴趣可以查看

函数PROCESSINGPROCESSING编程ARDUINO