本节知识点

初识Processing

IDE界面

绘制矩形

void setup(){
  size(640,360);
}

void draw(){
  background(255,255,255);
  
  stroke(255,255,255);
  fill(0,255,0);
  
  rect(100,50,100,100);
  
  fill(255,0,0);
  rect(200,100,100,100);
  
  stroke(255,255,0);
  fill(0,0,200,125);
  ellipse(300,200,50,100);
}

代码说明

void(){}必须填写，在里面写size(x,y)可以生成窗口，定义窗口尺寸。
void draw(){}绘制图形。
background(r,g,b);定义背景颜色，采用RGB格式。
stroke(r,g,b);定义边框颜色。
fill(r,g,b);定义填充色。

代码是按顺序执行的，后执行的代码的效果会遮盖先执行的代码的效果。

rect(x,y,w,h);定义一个矩形，参数分别是距离左边距、上边距、长、高。
ellipse(x,y,w,h);定义一个椭圆，参数同上，长和高相等时是圆形。

stroke：n. 一击；一画，一笔；(游泳或划船的)划，划法；游法；钟的敲声；中风；轻抚。vt. 轻抚，抚摸。
rectangle：n. [数]长方形, 矩形。
ellipse：n. [数]椭圆形，椭圆

运行效果

绘制线

代码：

void setup(){
  size(640,360);
}

void draw(){
  background(255,255,255);
  strokeWeight(4);
  stroke(0,255,255);
  line(20,40,200,250);
  
  strokeWeight(1);
  stroke(0,0,0);
  line(10,100,400,100);
}

运行效果：

strokeWeight(w);定义线的宽度。

简单交互

绘制一只兔子

void setup(){
  size(600,600);
}

void draw(){
  background(0,0,0);
  noStroke();
  fill(255,255,255);
  
  ellipse(220,200,50,300);
  ellipse(380,200,50,300);
  ellipse(300,300,300,200);
  
  float dx = map(mouseX,0,600,-10,10);
  float dy = map(mouseY,0,600,-10,10);
  
  fill(255,0,0);
  ellipse(200 + dx,300 + dy,10,10);
  ellipse(400 + dx,300 + dy,10,10);
  
}

增加兔子眼睛跟着光标移动的效果：
float dx = map(mouseX,0,600,-10,10);
map是一个映射，让数字的范围映射到指定的范围。
mouseX能够返回光标在画面中X轴的实时位置，在上面的代码中，我们将mouseX的值从区间0,600映射到区间-10,10，然后存储在变量dx中。
将dx写在ellipse()中，与x坐标相加，就可以将光标移动所映射的眼睛的偏移效果增加上去了。
对y的偏移原理同上，这里不赘述。

演示效果

移动光标，兔子的眼睛可以跟着光标一起移动。