写给设计师的OF编程指南（3）－ 图形的运动（上）
在开始看这节之前，希望你已经熟悉了基本的函数绘图方法。
前面的有关绘图部分，我们的代码都只写在 draw 函数中，这节会开始介绍 setup 函数和 update 函数。
在开始做运动图形之前，我们需要了解“动画”是如何产生的。
上图相当吸引人，而且非常直观地揭示了动画的实现原理。
动画是魔法，是关于视觉欺骗的魔法。只是在这个信息爆炸，视频满天飞的年代，我们已经对它习以为常了。也很少有人会去惊叹，能看到动画，本身就是一件神奇的事。
在程序中制作动画，原理是相通的。我们只要考虑怎么在每页上画上不同的图形，程序就会自动去翻页，而大脑会将它脑补成动画。
下面会聊聊如何实现基本的动画运动，在此之前需要我们了解一些变量的基础知识。
变量
变量是数据的容器，它可以在程序中反复使用。
代码示例（2-1）：（窗口大小为 500 X 500）
void ofApp::draw(){
ofDrawCircle(100, 250, 25);
ofDrawCircle(200, 250, 25);
ofDrawCircle(300, 250, 25);
ofDrawCircle(400, 250, 25);
}这段代码没有用到变量，在屏幕上画了四个圆。仔细观察，会发现这四个圆的宽高都是一样的。既然一样，为了减少数值的重复输入，我们其实可以定义一个符号来表示，这个符号就是变量。
使用变量后的代码：
代码示例（2-2）：（窗口大小为 500 X 500）
void ofApp::draw(){
int a = 25;
ofDrawCircle(100, 250, a);
ofDrawCircle(200, 250, a);
ofDrawCircle(300, 250, a);
ofDrawCircle(400, 250, a);
}绘图的结果与原来是完全一样的。
定义了变量 a ，我们就可以很方便地改变数值。如果将 a = 25,改成a ＝ 50。那所有圆的半径都会统一变成 50，这样就无需再逐一修改数值了。变量是个相当好的发明～
变量的创建
变量使用前需要先声明，并且需要指定它的数据类型。
int i；
i ＝ 50；第一句代码声明了一个变量 i。int 是一个专门用来声明变量的符号。声明时，会在电脑内存中开辟一个空间，相当于生成了一个“箱子”，专门用来存放整数数据。
第二句代表把 50 赋值给变量 i。执行这句以后，数据就会稳稳地存放在了 i 这个变量上了。
你也可以用更便捷的方法，两步并作一步，声明的同时完成赋值。
int i ＝ 50；变量的命名规则
变量名的命名比较自由，但也有讲究的地方。
必须是字母和数字或下划线的组合。可以用一个字符，也可以用一个单词，
区分大小写，name 和 Name 代表不同的变量
名字尽量简洁易懂，首字符只能以字母开头，不要用数字和特殊字符。
不能用已有的关键字作为变量名，比如 int，float
以下，都是错误的声明方式
int $a;
int 89b;以下是合法的声明
int r;
int super_24;
int openTheDoor;变量的类型
除了可以声明为整数数据，还可以声明为小数数据（也叫浮点数据），用关键字float。
float b = 0.5这里要牢记声明数据时，用了变量类型。若是用了关键字 int ，后面赋值时就不能写 i ＝ 0.5 之类，这样程序会出错。但反过来是可以的，比如 float i ＝ 5 是正确的语法，程序仍会将它识别为小数。
运算符
Openframeworks 中的常用运算符有几种:
+加
-减
*乘
\除
％取模，得出余数
加减乘除大家都不陌生，％ 可能是第一次看到，它得出的数是余数。9 % 3的结果是 0 。而 9 % 5 的结果会是 4。
运算符可以在数值以及变量间使用。
代码示例（2-3）：
void ofApp::draw(){
int a = 1; //声明整数变量a，赋值为1
int b = 2; //声明了整数变量b，赋值为2
int c; //声明了整数变量c
c = a + b; //将两变量相加，并赋值给c
cout << c << endl; //输出变量c
} 输出的结果不会显示在窗口，而是在下方的控制台。
第四行的写法看上去很特别。这是计算机赋值操作的常用格式。等号的左边要写最终赋值的变量，等号右边写上运算的过程。若写成 a + b = c; 则是无效的
第五行的 cout << ? << endl 可以先理解为一个固定写法，？ 中可以填写数值，变量又或是表达式，通过它就可以在控制台输出相应的结果，这同时是检查程序有否出现异常的常用方法。
实时运行程序时，下面的数字 3 则为输出的计算结果。你会发现控制台上的数字会不断往下刷新。这是由于我们将 cout 句式写在 draw 函数中导致的。后面会提到具体原因。
运算规则
Openframeworks 中进行运算，需要搞清变量的类型。其中特别要留意的，是浮点数与整数类型之间的转换。
代码示例（2-4）：
cout << 9 / 5 << endl; //输出结果 1在程序中，整数与整数进行运算只会得到整数,9 除以 5 的实际结果是 1.8 ，但程序中的输出结果却会是 1 。这是由于程序对结果不进行四舍五入处理，而是直接舍去小数点之后的数。
代码示例（2-5）：
cout << 9.0 / 5.0 << endl ; //输出结果 1.8浮点数与浮点数之间运算会得出浮点数，实际结果是 1.8 ，程序输出结果也会是 1.8。
代码示例（2-6）：
cout << 9 / 5.0 << endl ; //输出结果 1.8
cout << 9.0 / 5 << endl ; //输出结果 1.8最后是整数和浮点数混用，最终输出的结果会是浮点数 1.8。
其实只需记住一点，规则这样设计是为了不损失数据的精度，所以只要有一方是浮点数，结果都会是浮点数。
Setup函数,Update 函数 与 Draw函数
铺垫完基础的知识，离制作动画越来越接近了。
setup,update 以及 draw函数，相当于是 Openframeworks 里面的主函数。这三个函数非常特殊，它们是程序的基本框架，会控制程序的流程。
基本格式：
void ofApp::setup(){
}
void ofApp::update(){
}
void ofApp::draw(){
}程序看似能灵活地响应多个任务，实现丰富复杂的功能。但它内部是其实有一个非常严谨的运行流程。通过前面提到的 cout 命令，我们可以通过控制台的输出直观地了解过程。
示例代码：
void ofApp::setup(){
cout << 1 << endl;
}
void ofApp::update(){
cout << 2 << endl;
}
void ofApp::draw(){
cout << 3 << endl;
}我们先试着在三个函数中输入以上代码。点击三角符运行一段时间再关闭程序。以下是运行结果：
控制台输出的第一个结果为数字1，后面则是 2 3 之间来回交替。
cout 命令每执行一遍，就会输出一个结果。setup 函数在程序中是第一个执行的，同时只会运行一次。所以你会发现“1”只出现了一次。而 update 函数和 draw 函数则是循环交替执行的，并且先运行 update 函数再运行 draw函数。所以你会看到先输出的是数字“2”，后面出现的才是数字“3”。
由于这种特性，setup函数往往用于初始化环境属性，如设置屏幕宽高，背景颜色，进行变量的赋值等等。而涉及大量数据运算的，则放在 update 函数内。而 draw函数 ，则用于放绘图函数，以此产生不断变化的图像。
update与draw的运行频率
相信现在你能明白，实例（2－3）中为会不断地输出 3了。因为我们将代码写在 draw 函数内，所以 draw 函数内的代码都会从上至下，不断循环执行，重复输出结果。
由于 update 函数和 draw 函数在 OF 中的运行频率默认为每秒 60 次（60 FPS）。所以在一秒之内，draw 函数的每一行代码都会执行 60 次。如果你仅仅是为了获得计算结果，多余的计算是没有意义的。所以更好的办法应该是直接放在 setup 函数里面。代码同样会被执行，并且只运行一次。
代码示例（2-7）：
void ofApp::setup(){
int a = 1; //声明整数变量a，赋值为1
int b = 2; //声明了整数变量b，赋值为2
int c; //声明了整数变量c
c = a + b; //将两变量相加，并赋值给c
cout << c << endl; //输出变量c
} 与帧率相关的函数：
设置帧率
OF程序默认每秒 60 帧的频率是可以被改变的，通过 ofSetFrameRate（） 函数就能进行设置
格式：
ofSetFrameRate（x）x 代表设置后的帧速率
－－代码示例（2-9）：
void ofApp::setup(){
ofSetFrameRate(1);
}
void ofApp::update(){
cout << 1 << endl;
}程序运行后，现在就变成每隔一秒，才从控制台输出一个数字1
获取帧率
尽管设置了程序的帧率，在程序中未必就是按预置的帧率来运行的。特别对于运算量大的程序，往往会有卡帧的情况出现。我们可以通过 ofGetFrameRate() 获取程序当前的实时帧数。
－－代码示例（2-10）：
void ofApp::setup(){
ofSetFrameRate(10);
}
void ofApp::update(){
cout << ofGetFrameRate() << endl;
}通过这种方法，你可以了解你的程序是否运行流畅。
平移的圆
为了加深这三个函数的理解，最好的办法莫过于做一个动画。
Openframeworks 中写动画效果的方式是“很笨拙”的。没有我们想象中的智能。不存在某种现成的指令，比如指定某图形做曲线运动，再设置速度，移动距离等产生，程序便自动生成动画。
既然你是程序世界的造物主，你就需要亲力亲为，去定义这些细节。电脑需要非常明确的指令，每帧要画怎样的图形。
我们先从一个平移运动的动画开始去了解。
代码示例（2-11）：
—- ofApp.cpp内 —-
void ofApp::setup(){
ofSetWindowShape(300,300);
x = 0;
y = ofGetHeight()/2;
}
void ofApp::update(){
x = x+1;
}
void ofApp::draw(){
ofBackground(234, 113, 107);
ofDrawCircle(x, y, 25, 25);
}前面都只在 ofApp.cpp 中写代码，到这里我们还需要在 ofApp.h 中写上
—- ofApp.h内 —-
int x;
int y;运行效果：
一段纯用代码实现的动画就出来了
代码解释
我们先来看最奇怪的部分。现在是第一次在 ofApp.h 里面写代码。写了两个声明整形变量 x 与 y 的语句。细心的人会发现，前面的例子 2-2 中，变量的声明是直接写在 draw 函数中的，这与在 ofApp.h 里有何区别？
在 ofApp.h 中声明的变量，为全局变量,它的好处是只要声明过一次，这个变量在 setup ，update 或是 draw 函数中都能使用。
而如果仅在某个函数中声明的变量，则为局部变量。它只能在这个函数中使用。
理解 ofApp.h 部分后，我们再来看 ofApp.cpp 中的代码。前面声明了两个变量x，y。用于储存圆的坐标位置。变量的初值设定，在setup函数中也实现了，这代表的就是圆的起始坐标。
setup 里面有一句
ofSetWindowShape(300,300);它的作用是设置窗口的大小，与通过前面的 main.cpp 中的 ofSetupOpenGL() 语句去设置，效果是一样的。
现在关键代码其实是 update 函数中的这个：
x = x + 1;我们不要将它看成数学等式，否则会很奇怪。这里的“＝”号是一个赋值符号，代表把右边的数值放到左边的变量里。假设 x 为 50，代码运行后。等号右边就等于 50 + 1，即 51。最终这个结果会赋到变量 x 里，于是x的值就变更为 51 了。
顺着程序的流程走，update 函数每运行一次，x的数值就会增加1。于是每次绘图，圆形都会比上一帧多向右平移一个像素，图形因此就动起来了。
如果你之前有使用过 Processing，就会发觉 Openframeworks 中多了一个 update 函数，那 update 函数与 draw 函数具体有何区别？什么代码应该写在 update 中，什么代码应该写在 draw 里？
可以简记为一点
数据部分放 update ，绘图部分放 draw
与图形运动相关的数据运算，尽量写在 update 函数中，而实现绘图部分的代码，则写在 draw 函数内。这样将数据部分与视觉部分加以区分，可以更好地管理，Debug时也更容易发现错误。另外绘图函数只有写在 draw 里面，才能在画布上显示。
控制运动方向
图形往哪个方向运动，取决于你怎么变化你的坐标。如果改成 y＝y＋1，圆就会往下运动，如果 x，y 都同时增加 1，圆就会往右下方运动。写成减号会朝相反的方向。
－－代码示例（2-12）:
—- ofApp.cpp内 —-
void ofApp::setup(){
ofSetWindowShape(300,300);
x = 0;
y = 0;
}
void ofApp::update(){
x = x + 1;
y = y + 1;
}
void ofApp::draw(){
ofBackground(234, 113, 107);
ofDrawCircle(x, y, 25, 25);
}—- ofApp.h内 —-
int x;
int y;控制运动速率
由于 update 函数和 draw 函数默认都是每秒运行60帧的。因此按这个速率去推算，上面的圆，每秒就会向右移动60像素。
想改变图形的速率，有两个办法。一个就是增大每次 x 的变化值。
x＝x＋10;这样速度就会比原来提升10倍！
另一个就是改变画布的帧速率，用前面提到的 ofSetFrameRate()。假如你在setup函数内写上ofSetFrameRate（10），就会将播放速度设置成 10 帧每秒。这样较原来默认的 60 帧每秒就变慢了6倍。
但第二种方法不推荐，因为会降低画面的流畅度。
OF 中的背景
前面的例子，都是将 background 函数写在draw里的，有没有想过，写在setup里，会有何不同？现在在平移运动的例子上作些改动。
－－代码示例（2-13）:
—- ofApp.cpp内 —-
void ofApp::setup(){
ofSetWindowShape(300,300);
ofBackground(234, 113, 107);
x = 0;
y = ofGetHeight()/2;
}
void ofApp::update(){
x = x+1;
}
void ofApp::draw(){
ofDrawCircle(x, y, 25, 25);
}
—- ofApp.h内 —-
int x;
int y;从结果上看其实是没有区别的。这点与 Processing 完全不同。这是因为 OF 中会默认开启自动刷新背景的功能。我们需要关闭它才能看到效果。
在 setup 中加入一行代码。
ofSetBackgroundAuto(false);－－代码示例（2-14）:
—- ofApp.cpp内 —-
void ofApp::setup(){
ofSetWindowShape(300,300);
ofSetBackgroundAuto(false);
ofBackground(234, 113, 107);
x = 0;
y = ofGetHeight()/2;
}
void ofApp::update(){
x = x+1;
}
void ofApp::draw(){
ofDrawCircle(x, y, 25, 25);
}
—- ofApp.h内 —-
int x;
int y;这时会发现动画变得有所不同了，画面上运动的圆形似乎没有被清除。若是将自动刷新的功能关闭，draw 函数里面的图形都会绘制到同一个画布上。
这种不重绘的方式，适当运用可以做出很特别的效果,复制下面代码体验一番
－－代码示例（2-14）:
void ofApp::setup(){
ofSetWindowShape(300,300);
ofSetBackgroundAuto(false);
}
void ofApp::update(){
}
void ofApp::draw(){
ofSetColor(0);
ofDrawCircle(mouseX, mouseY, mouseX/5.0,mouseY/5.0);
ofSetColor(0);
ofDrawCircle(ofGetWidth() - mouseX, mouseY, mouseX/5.0,mouseY/5.0);
ofSetColor(255);
ofDrawCircle(mouseX, ofGetHeight() - mouseY, mouseX/5.0,mouseY/5.0);
ofSetColor(255);
ofDrawCircle(ofGetWidth() - mouseX, ofGetHeight() - mouseY, mouseX/5.0,mouseY/5.0);
}
mouseX,mouseY 可以获取鼠标的横纵坐标
在程序中实现对称非常简单。若已知某点的横纵坐标为（x,y）。则与它左右对称的坐标则为 （ofGetWidth() - x,y）,上下对称的坐标则为 （x,ofGetHeight() - y）,中心对称的坐标则为 （ofGetWidth() - x, ofGetHeight() - y）。
实现拖尾效果
通过命令 ofSetBackgroundAuto(false) ，OF 的画布就有了不清除的特性。我们可以结合已知的绘图函数实现一些有趣的效果。
－－代码示例（2-15）：
void ofApp::setup(){
ofSetWindowShape(300,300);
ofSetBackgroundAuto(false);
ofBackground(234, 113, 107);
x = 0;
y = ofGetHeight()/2;
}
void ofApp::update(){
x = x+1;
}
void ofApp::draw(){
ofSetColor(234, 113, 107,15);
ofDrawRectangle(0,0,ofGetWidth(),ofGetHeight());
ofSetColor(255);
ofDrawCircle(x, y, 25, 25);
}上节提到过，写在 draw 开头的
ofSetColor(x);
ofDrawRectangle(0,0,ofGetWidth(),ofGetHeight());组合起来使用，结果与
ofBackground();实现的效果是一样的。
但若是结合 ofSetBackgroundAuto() 函数，则可以很巧妙地实现特殊效果。其中的关键在于填充矩形时，添加的是带透明度的色彩。每刷新一帧，在每次绘制前都会覆盖一层和背景色相同且透明的矩形，这就使得前一帧的所有图形都变淡了。随着时间的推移，越是在前面的图形，就会覆盖数量更多透明矩形，也就逐渐变淡直至消失。这个透明度的值，就会影响拖尾效果的强弱。透明度越小则遮盖得越少，留下的残影持续的时间也越长。
抖动的圆
现在再回到运动部分。如果我希望圆的运动方向是不规则的怎么办？random函数可以做到这点。 random是一个高频使用的函数，可以用来生成随机数。它像神出鬼没的精灵，一旦变量和它扯上关系，你完全无法预测下一步会发生什么。通过它，你可以感受程序中不确定性所带来的魅力。
调用形式：
ofRandom(high);high 可以填整数，也可以填小数。它代表随机的上限，默认下限是 0。比如 ofRandom（10）。就会从 0 到 10 之间，随机生成一个小数值（包括0，但不包括10）。
ofRandom(low，high);如果设置两个参数，那就会返回这两个数之间的随机值。比如random（5，10）。就会从 5 到 10 之间，随机生成一个小数值（包括5，但不包括10）。
－－代码示例（2-16）：
void ofApp::draw(){
float x;
x = ofRandom(50,100);
cout << x << endl;
}每次运行程序，会在控制台上输出不同的数值。
值得注意的是，通过 ofRandom 函数生成的数值为浮点类型（小数类型），如果要赋值给整型变量，要通过函数int（）进行转换，转换的过程不遵循四舍五入，而是直接将小数部分舍去。因此 int（ofRandom（5）），输出的数值只有五种可能，0，1，2，3，4。
熟悉 random 函数的用法之后，可以直接看下面的例子。
－－代码示例（2-17）：
--- ofApp.cpp内 ---
void ofApp::setup(){
ofSetWindowShape(300,300);
x = ofGetWidth()/2;
y = ofGetHeight()/2;
}
void ofApp::update(){
x += int(ofRandom(-5, 5));
y += int(ofRandom(-5, 5));
}
void ofApp::draw(){
ofBackground(234, 113, 107);
ofDrawCircle(x, y, 25, 25);
}--- ofApp.h内 ---
int x;
int y;
之前坐标增加的数值都是固定的。所以只要增加一个随机值，圆就会往不确定的方向移动。而随机的范围越大，它就“抖动”得越厉害。因为数值变化是跳跃的，所以运动就不平滑。好比前一帧还是在（150，150），后一帧就有可能“瞬移”到（170，170）的位置了。
游走的圆
理解ofNoise
那有没有可能产生平滑的运动？ofNoise 函数可以做到这点。它比标准的 ofRandom 函数更有韵律，生成的数值是连续的，但又带有变化。
调用形式：
ofNoise(t);与 ofRandom 不同，ofNoise 无法定义它的输出范围。程序中规定它只能生成从 0 到 1 的浮点数。并且固定的输入只能产生固定的输出。
－－代码示例（2-18）：
void ofApp::setup(){
float x = ofNoise(0.33);
float y = ofNoise(0.33);
cout << x << endl;
cout << y << endl;
}由于上面输入的参数都是 5，所以输出的两个结果都是相同的。那如何才能使结果产生变化呢？答案就是动态地改变输入的参数。ofNoise 可以将它理解为一个无限长的音轨。输入的参数就好比是“当前时间”，如果我们的参数输入是连续的，输出也会是连续的。
以下例子绘制了 y 值的变化轨迹。便于我们理解 ofNoise 函数。
－－代码示例（2-17）：
--- ofApp.cpp内 ---
void ofApp::setup(){
ofSetWindowShape(700, 100);
ofSetBackgroundAuto(false);
ofBackground(0);
x = 0;
}
void ofApp::update(){
x += 1;
y = ofNoise(ofGetFrameNum()/100.0)*100;
}
void ofApp::draw(){
ofDrawCircle(x, y, 1);
}--- ofApp.h内 ---
int x;
int y;其中 ofGetFrameNum 会获取程序从开始运行到当前的总帧数。和前面介绍的 ofGetWidth ，ofGetHeight 不一样。它返回的不是一个定值。而是会从 0 开始，不断递增，如果用开头演示的动图去理解，就代表翻到了第几页。
ofGetFrameNum 返回的是整数，整数除以整数，程序中会默认将结果处理成整数。所以为了提高结果精度，需要将 100 写成 100.0 。整数除以浮点数，会得到浮点数。
为了使 y 轴坐标在 0 到 100 里变化，需将 ofNoise 返回的结果乘以 100。以此控制随机值的范围。
但为何 ofGetFrameNum 要除以 100 ？不能直接写 ofGetFrameNum ？实际上是可以的，但这里为了更好地展示 ofNoise 函数的特性，所以放慢了“播放速率”。下面的例子就展示了不同变化速率下，输出值的变化。
－－代码示例（2-18）：
--- ofApp.cpp内 ---
void ofApp::setup(){
ofSetWindowShape(700, 500);
ofSetBackgroundAuto(false);
ofBackground(0);
x = 0;
}
void ofApp::update(){
x += 1;
y1 = ofNoise(ofGetFrameNum() + 0.32)*100;
y2 = ofNoise(ofGetFrameNum()/10.0)*100;
y3 = ofNoise(ofGetFrameNum()/100.0)*100;
y4 = ofNoise(ofGetFrameNum()/1000.0)*100;
y5 = ofNoise(ofGetFrameNum()/10000.0)*100;
}
void ofApp::draw(){
ofSetColor(255);
ofDrawCircle(x, y1, 1);
ofDrawCircle(x, y2+100, 1);
ofDrawCircle(x, y3+200, 1);
ofDrawCircle(x, y4+300, 1);
ofDrawCircle(x, y5+400, 1);
ofSetColor(80);
ofDrawLine(0,100,ofGetWidth(),100);
ofDrawLine(0,200,ofGetWidth(),200);
ofDrawLine(0,300,ofGetWidth(),300);
ofDrawLine(0,400,ofGetWidth(),400);
}--- ofApp.h内 ---
int x,y1,y2,y3,y4,y5;可以将 ofNoise 里面变化的参数理解成进度条，变化这个参数，就相当于拨动进度条。所以在这个“音轨”上，当输入参数的变化幅度越大，输出值前后的连续性也会越弱（可以想象2倍速，5倍速，20倍速播放一段音乐或是视频）。当参数的变化幅度大于某个值，可能就与 ofRandom 函数生成的值没有太大差别了。
ofNoise 与 P5 中的 noise 函数是相对应的。但又略有不同。ofNoise 中参数输入为整数时，返回的数值必定为 0.5，所以我们需要避免整数，在 ofNoise 的参数输入上添加一个小数来错开。
若不加上小数，y1的纵坐标则是固定不变的。图形也会变成一条直线。下面的红点标示了当输入参数为整数时的点坐标，会看到得到的都是定值。
ofNoise 控制运动效果
如果前面的例子都能理解。那画一个游走的圆，是再简单不过的事。你也会明白其中的道理。
－－代码示例（2-19）：
--- ofApp.cpp内 ---
void ofApp::setup(){
ofSetWindowShape(300,300);
}
void ofApp::update(){
x = ofNoise(ofGetFrameNum()/100.0 + 2.32)*300;
y = ofNoise(ofGetFrameNum()/100.0) * 300;
}
void ofApp::draw(){
ofBackground(234, 113, 107);
ofDrawCircle(x, y, 25, 25);
}--- ofApp.h内 ---
int x,y;现在的运动就比较有意思了，像一个旋转摇摆的陀螺。
其中变量 x 里的 ofNoise 中的参数之所以要加上 2.32 ,是为了错开一段距离,让运动更有随机性。若是 x，y 里面 ofNoise 函数输入的参数完全一样，又或是过于接近。x，y坐标的变化就会趋近相同。
用鼠标移动圆
并不是所有运动都必须通过函数计算出来，还有一种最原始的方法，那就是用鼠标。mouseX 和 mouseY 在前面一个实例里有提到过，可以实时获取鼠标的横纵坐标。当初在看到这两个概念的时候，就让人两眼发光。因为这是与图像发生交互最直接的方式。灵活运用它，可以写出很多有趣的程序。
－－代码示例（2-20）：
void ofApp::setup(){
ofSetWindowShape(300,300);
}
void ofApp::update(){
}
void ofApp::draw(){
ofBackground(234, 113, 107);
ofDrawCircle(mouseX, mouseY, 25);
}可以尝试改变正负号，又或是交换 mouseX 和 mouseY
Tips－代码格式
代码书写是有一定规范的。
为了代码有更好的可读性，大括号里面的每行代码前面应该留出一定的空间，并且尽量对齐。键入 TAB 或者若干空格可以进行缩进。
程序中空格符与换行符不会影响程序本身，多打一个少打一个往往没有关系。
End
通过熟悉这些命令，你已经可以简单地指挥图形的运动了。结合上节内容，就可以做出很多有意思的动效。
下一节会展示更多丰富的实例，同时也会用上数学函数，将它和图形的运动结合起来。
Processing 版：