processing集训day02

单词

set up 建立 set 安置，设置
draw 绘画 draw 画画 sing song dance
print 打印 print(“hello,world”) println带换行的
map 地图 map 地图
mouse 鼠标 老鼠，鼠标

函数

绘制图形的命令是预先编写好的，我们可以直接调用

函数调用的书写格式是：函数名称（参数）

setup( ) 和 draw( ) 是由 Procossing 定义并会自动调用的函数，格式如下：

void setup( ) { 
步骤 1a
步骤 1b
步骤 1c
}

void draw( ) { 
步骤 2a
步骤 2b
}

式例：

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

void draw() {
  //画脸
  background(244, 210, 245);
  noStroke();
  fill(249, 236, 228);
  rect(200, 200, 400, 380);
  //画头发
  fill(0);
  rect(200, 200, 10, 100);
  rect(590, 200, 10, 100);
  rect(200, 200, 400, 50);
  //画耳朵
  fill(242, 206, 166);
  rect(150, 350, 50, 50);
  rect(600, 350, 50, 50);
  fill(255, 255, 255);
  画矩形鼻子
  fill(242, 206, 166);
  rect(375, 320, 50, 100);
  画嘴
  fill(255, 0, 0);
  ellipse(400, 500, 116, 32);
  fill(249, 236, 228);
  rect(340, 480, 122, 18);
  //画外边框眼睛
  fill(255);
  stroke(0);
  strokeWeight(5);
  ellipse(300, 300, 100, 50);
  ellipse(500, 300, 100, 50);
  //画眼睛
  noStroke();
  fill(57,41,41);
  float dx = map(mouseX,0,800,-25,25);
  float dy = map(mouseY,0,800,-8,8);
  ellipse(300+dx,300+dy,30,30);
  ellipse(500+dx,300+dy,30,30);
}

setup是只执行一次，draw会循环执行

processing编辑器中代码格式化在 编辑->自动对齐

获取鼠标位置

鼠标的位置可以用变量来表示：鼠标 x 轴坐标为 mouseX，鼠标 y 轴坐标为 mouseY。
变量更像是一个盒子，盒子可以储存各种数据，包括坐标或者其他信息等等。比如我们向第一个盒子中
放入的使鼠标的 x 轴坐标，第二个盒子里放的是鼠标的 y 轴坐标。
mouseX, mouseY 就像是盒子上的标签，其实就是变量名。通过变量名，我们就知道盒子里存的是什
么数据。我们可以把实时变化的鼠标 x 轴坐标的数据放在拥有 mouseX 标签的盒子内，把实时变化的鼠标
y 轴坐标的数据放在拥有 mouseY 标签的盒子内，当我们想用数据时，直接带走盒子就可以了。mouseX，
mouseY 是 processing 中的内置变量。我们可以随时调用。

我们可以用 println 函数在控制台观察到实时变化的鼠标的坐标。

println(mouseX, mouseY);

编写代码使矩形块跟随鼠标移动。

void setup(){
 size(800,800);
}
void draw(){
 background(244,210,245);
 println(mouseX,mouseY);
// 绘制跟随鼠标移动的矩形
 rect(mouseX,mouseY,50,50);
...
}

注释

在暂时不需要使用的代码前面加上”//”。效果如下，注释后的代码就变成了灰色。他们暂时就不能运行了。
如果我们想再次使用他们就可以把双斜杠删掉就可以了。但在大部分情况下注释就是对代码的解释和说明 ，其目的是让人们能够更加轻松地了解代码，能提高程序
代码的可读性。

变量

变量的使用：
使用变量分两步，第一步：声明变量，并指定变量类型。第二步：变量赋值。
一般会把声明变量和变量赋值两行代码进行合并。
如：
float a;
a = 2.1;
可以写成float a = 2.1;

映射函数

映射函数的作用就是将数字从一个范围映射到另一个范围。其实就是把一个区间里的值转换到另一个区间。
map(value, low1, high1, low2, high2)
value代表要被映射的数
low1-high1 代表要被映射的数 value所属区间的
最小值和最大值
low2-high2 代表映射到的新区间的
最小值和最大值

// 画随着鼠标移动的瞳孔
 float dx =map(mouseX,0,800,-20,20);
 float dy =map(mouseY,0,800,-6,6); 
 ellipse(300+dx,300+dy,30,40);
 ellipse(500+dx,300+dy,30,40);