Processing:循环

1. 学会一个新单词:iteration..

2. 循环共有三种:while,do-while和for

3. while()其实就是:你给while一个条件,符合条件的他继续循环尖括号内的内容,不符合条件了,停止,或者干其他事。一个典型的例子:

pr6-1
pr6-1

size(100,100);
background(40,250,150);
smooth();

float w = width ;
while (w>0)
{
stroke(0);
fill(13,w+30,50);
ellipse(height/2,width/2,w,w);
w=w-5;
}

4. 有一种循环叫做死循环。。:
int x = 0;
while (x < 10) {
println(x);
x = x – 1;
}

如果你在pr中运行这段代码,那么就等着程序死吧。因为当x小于10的情况下,则无限在print窗口列印出x的值,而这里,x的值将永远小于10,因此,程序将无限的运行下去。当然,死 得越慢,意味着你的电脑性能越好。。

5. for循环的应用:
从0数到9:for (int i=0; i<10; i=i+1)
从0以10的间隔数到100:for (int i=0; i<101; i=i+10)
从100以5的间隔数到0:for (int i=100; i>=0; i=i-5)

pr6-2
pr6-2

6.
x++;等于x=x+1;
x–;等于x=x-1;
x+=2;等于x=x+2;
x*=3;等于x=x*3;

7. 用for来写上边那个用while来写的例子:
size(100,100);
background(40,250,150);
smooth();

for (float w=width; w>0; w-=5)
{
stroke(0);
fill(13,w+30,50);
ellipse(height/2,width/2,w,w);
}

8. 变量分为局部变量和全局变量。由名称可知,全局变量可以在整个程序的任何地方被调用,而局部变量则仅能在一个程序块中被调用。全局变量在程序之始便被申明,而局部变量则是在某个程序块中被申明,例如在draw()for里。比方说上例的变量x则仅适用于for程序块。

9. 理论上,全局变量与局部变量可以使用相同的名字,但是用屁眼想想都知道,为了避免引起混乱,最好还是别这么做ba。。

pr6-3
pr6-3,由于这里使用gif,所以颜色渐变不是很平滑,不过也懒得改了,看个大概吧

10. 一个例子很好:
int count=0;

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

void draw() {
count=count+1;
background(count);
}

运行它,然后将int count=0;放入draw()里申明,再运行看看。是的,这就是全局与局部变量的关系与区别。

本课有很多例子和练习,Daniel一个必出的练习就是让你试着将程序在forwhile之间相互转换,以熟悉两种循环的写法,大家也可以多试试,看看哪个更适合你的思维习惯。

Processing:条件式

1. 布尔表达式通常被称为条件式(conditionals)。

2. 条件式链(各种else if保准让你晕头转向):
if (boolean expression #1) {
// 如果布尔表达式 #1 为真时执行的代码
} else if (boolean expression #2) {
//
如果布尔表达式 #2 为真时执行的代码
} else if (boolean expression #n) {
//
如果布尔表达式 #n 为真时执行的代码
} else {
// 如果以上布尔表达式都为假时执行的代码
}

3. 记住一点就ok,当你的一堆条件式中的某条为真,则此条相应的代码将被执行,剩余的条件式同时被忽略。

4. 一个条件式中只能含有一对if和else,但却可以包含无限个else if。

5. 一个等号:赋值给一个变量;两个等号:某某和某某相等。

6. constrain()函数应用
if (r > 255) {
r = 255;
} else if (r < 0) { r = 0; }

等同于
r = constrain(r,0,255);

7. 发现一点,在做一个例子的时候:方块向右滑动,到X轴等于100的时候停止,我这么写:
if (x>99) {
x=99;
} else {
x=x+1;}
}

方块停是停下来了,但是却在不断左右颤抖,后来改成这样:
if (x>99) {
x=100;
} else {
x=x+1;}
}

正常。

当然,最简单的方式还是x= constrain(x,0,100);

8. 类似&&以及||这些逻辑表达式可以写在if的同一行,例如if(mouseX < 100 && mouseY < 100)

Exercise 5-6
Exercise 5-6

9. 练习5_6,把运行窗口分为四个矩形,鼠标离开之前停留的方块后颜色由白渐变入黑。低智商的我没有日出来,看了答案后发觉和我的思路完全不一样,而且我总觉得有其它实现方法(虽然Daniel老头的方法也并不复杂。它的关键点:设置每个方块的亮度一直在递减,注意是一直)。源文件.

10. 按钮的用法:

boolean button =  false;

int x = 50;

int y  = 50;

int w   = 100;

int h  = 75;

void setup()  {

size(200,200);

}

void draw()  {

if (mouseX >  x && mouseX < x +  w && mouseY >  y && mouseY <  y + h && mousePressed) {

button     =       true;

}  else{

button     =       false;


}

if (button)

{

background(255);

stroke(0);

}  else{


background(0);

stroke(255);

}

fill(175);

rect(x,y,w,h);

}

11. 点一下,换背景色,再点一下,换回来:

boolean button = false;


int x = 50;

int y = 50;

int w = 100;

int h = 75;


void setup() {

size(200,200);

}


void draw() {

if (button) {

background(255);

stroke(0);

} else {

background(0);

stroke(255);

}


fill(175);

rect(x,y,w,h);

}


// When the mouse is pressed, the state of the button is toggled.

// Try moving this code to draw() like in the rollover example.  What goes wrong?

void mousePressed() {

if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) {

button = !button;

}

}

12.  一个设定布尔变量的例子,鼠标点击后,球从左边移动到右边。先设定布尔变量going为假,再设定鼠标点击后(void mousePressed())going为真,然后设定going为真时circleX=circleX+1;。源文件

13. 这里说一下布尔变量,布尔变量是一个只能为真或假的变量。申明方式为boolean+名称=false;(或true)

14. 在例5-6中,他提出了一个负的速度的概念,意思就是与正的速度相反运行(其实就是当x到达多少的时候,开始递减),这就出现了一个不停左右移动的球:

int x = 0;

int speed = 1;


void setup() {

size(200,200);

smooth();

}


void draw() {

background(255);


// Add the current speed to the x location.

x = x + speed;


// Remember, || means “or.”

if ((x > width) || (x < 0)) {

// If the object reaches either edge, multiply speed by -1 to turn it around.

speed = speed * -1;

}


// Display circle at x location

stroke(0);

fill(175);

ellipse(x,100,32,32);

}

15. speed = speed * -1;等同于speed *= -1;

16. 环环相扣的经典例子5-8,实现一个矩形围绕运行窗口边框运动的效果。巧妙的借用了一个变量state,值得好好学习玩味。源文件。为什么不试试让它反方向转动起来?

17. 例5-9是一个模拟重力加速度的例子:

float x = 100;   // x location of square

float y = 0;     // y location of square


float speed = 0;   // speed of square


// 一个新的变量,地心引力.

// 一般我们都选用一个较小的值(0.1)加以重力加速度上。

float gravity = 0.1;


void setup() {

size(200,200);


}


void draw() {

background(255);


// 画矩形

fill(175);

stroke(0);

rectMode(CENTER);

rect(x,y,10,10);


// 在y轴上加速

y = y + speed;


// 为速度加上加速度

speed = speed + gravity;


// 如果方块到底,则让速度反向

if (y > height) {

// 乘以 -0.95 取代 -1 使得方块每弹跳一下都在减速.

// 这叫做“”回潮“,是一种更真实的模拟现实效果(如果没有它,方块将永远都在弹跳而不会停止)

speed = speed * -0.95;

}

}
后来我把它改了一下,改成从鼠标点击点放下方块,很有意思,你试试?

Processing:变量

1. 申明一个变量:类型+名称,一个变量的名称必须是一个词(不带空格),必须以字母而不是数字开头(虽然可含有数字)。除了下划线外,它的名称不能含有任何标点或特殊符号。

2. 所有初级变量类型
· boolean : 真或假
· char : 一个字母, ‘ a ’ ,‘b ’ ,‘c ’ , 等等.
· byte : 一个小的数字, –128 ~ 127
· short : 一个更大的数字, –32768 ~ 32767
· int : 一个大的数字, –2147483648 ~ 2147483647
· long : 一个真正巨大的数字
· float : 一个小数,例如 3.14159
· double : 一个小数位多很多的小数(仅在需要数学精准度的高级编程中必要)

3. int count = 50;等同于
int count;
count = 50;

pr2-1
pr2-1

4. 关于变量的名称:不要使用那些pr系统中已有的名称作为变量名;尽量使它具有含义;以小写字母开头并在其中加入大写字母,因为在pr中,以大写开头的一般被预备为类(class)。

5. 经实验,int circleX = int circleY = 100;的写法是错误的。。。必须写两行,看来无限等于的方式并不适用于任何情况。

6. x=x-1 满好用哈~

7. 系统变量(我们自定义的变量名应与它们区分):
· width —sketch窗口的像素宽度.
· height —sketch窗口的像素高度.
· frameCount —运行的帧数.
· frameRate —每秒运行的帧数.
· screen.width —整个萤幕的像素宽度
· screen.height —整个萤幕的像素高度.
· key —最近的一次键盘敲击.
· keyCode —键盘敲击的数字代码(numeric code).
· keyPressed —真还是假?键盘被敲击了么?
· mousePressed —真还是假?鼠标被点击了么?
· mouseButton —哪个键被点击了?左键?右键?还是中键?

pr2-2
pr2-2

8. 以上在实际中的应用可见例子,在pr2-2这个例子中,无论如何变动size()函数,球、线以及两个矩形的相对位置、大小都会随之改变。

9. random(1,100):在1~100间随机。输出一个浮点值,第二引数必须大于第一引数。如果你需要一个整数,你可以这么写:int w = int(random(1,100)); (这里我发现,在pr里可以括号套括号也 ~!)

10. 一个random()应用的例子,还挺好:
float r;
float g;
float b;
float a;
float diam;
float x;
float y;
void setup() {
size(1300,300);
background(0);
smooth();
}

pr2-3
pr2-3

void draw() {
// Fill all variables with random values
r = random(255);
g = random(255);
b = random(255);
a = random(255);
diam = random(20);
x = random(width);
y = random(height);
// Use values to draw an ellipse
noStroke();
fill(r,g,b,a);
ellipse(x,y,diam,diam);
}

Processing:互动

1. setup()里的内容仅执行一次,而后跳到draw(),draw()里的内容无限循环运行,直到你设置它停或手动让其停止。

2. setup()里的内容最先运行,size()应当始终作为setup()里的第一行,因为这是pr的习惯。。

3. mouseX和mouseY是两个关键值,你可以暂时将它们用做目前的变量。用它们代替一些值试试,会有好玩的互动。

4. pmouseX, pmouseY:鼠标的上一个坐标值。

5. 将值放到abs()中将得到它的绝对值(absolute value)。因此,鼠标移动速度的绝对值就是abs( mouseX – pmouseX ) 。

6. mousePressed() :鼠标按下;keyPressed():键盘按键按下。对应的,你不能让这个动作无限循环执行下去,因此,你需要写第三堆代码,例子如下:
void setup()
{
size(200,200);
background(255);
}
// 本例中,draw()内不发生任何事
void draw()
{
}
// 无论何时用户点击鼠标,mousePressed()内的代码被执行
void mousePressed() {
stroke(0);
fill(175);
rectMode(CENTER);
rect(mouseX,mouseY,16,16);
}
// 无论何时用户点击键盘,keyPressed()内的代码被执行
void keyPressed() {
background(255);
}

7. frameRate():在draw()里循环每秒的帧数,可以填入1~60,例:frameRate(30),代表每秒30帧。如果不包含这个参数,则pr会尝试以每秒60帧的速度运行你的sketch。由于不同的计算机会以不同的速度运行,于是frameRate()可以确保跨计算机运行时,保证你sketch的速率。但这仅是一个参数而已,如果你画了一百万个矩形在你的sketch里,那么draw循环以及运行的速度都将奇慢无比。

Processing: Processing

1. 全屏运行Processing:Sketch -> Present,或者shift+鼠标单击run。Present不会改变你萤幕的分辨率,所以如果你想让sketch覆盖整个萤幕,你需将size()设为你萤幕的分辨率。

2. Processing草图文件名不允许空格和连字符,同时,也不能以数字作为开始。

3. 如果代码里有很多错误,pr只会提示你第一个错误,你将之改正后,又继续后边的错误提示。写到这,Shiffman老头这里说了一句颇有哲理的话:因为每次只需要看一个错误,我们的生活因此变得更加简单。

4. Processing现在只有在线参考,而没有离线参考,这点有点不爽,意味着我没网的话就看不了参考了。双击sketch里任意一个关键词,选择Help -> Find in Reference。

5. 导出后,将applet文件夹那一堆传到你的服务器空间里,就可以通过你的域名/你的pr文件名的方式通过网络来访问它了,因为其默认的页面就是index.html,样式就是你在很多pr例网上看到的那个样子。由于这属于网页设计的范畴,这里就不赘述了。

Processing:像素

pr1-1
pr1-1

1. 计算机萤幕左上角坐标为0,0,横向为x、纵向为y轴。

2. 画矩形有三种方式:i. CORNER: rect(左上x, 左上y, 宽, 高);ii. CENTER: rect(中心x, 中心y, 宽, 高);iii. CORNERS: rect(左上x, 左上y, 右下x, 右下y)。画椭圆(ellipse)也是用同样的思路。看起来很难记比较容易混淆,但是只要记住有中心的就是center,出现一个角的坐标值的是corner,出现两个角的坐标值的就是复数,所以是corners。

3. 写ellipseMode的时候我发现processing的代码严格区分大小写,大小写不对狗日不认,完全不认。

4. 边框stroke()和填充fill()要写在被填色物的形状代码之前。背景色background()要写在他们所有之前。要除去边框和填充应当使用noStroke()和noFill()命令。而不要在括号里使用0,记住这里的0不是“没有”的意思,而是代表黑色。另外,注意不要同时使用noStroke()和noFill(),因为这样将什么也不会出现。

5. 从教材里的两个例子我发现一点,如果不指定rectMode的话,默认的模式是CORNER–rect(左上x, 左上y, 宽, 高)。而ellipse默认的则是CENTER–ellipse(中心x, 中心y, 宽, 高)。

pr1-2
pr1-2

6. Processing按由上往下、承上启下的方式执行代码。所以很多属性,如果是之前写过的,你就没必要在之后再重写了。

7. 如果你在点击run后,修改了代码想要再看效果,不用关闭之前运行的窗口,或者点击stop后再run,直接点run即可。

8. fill()的第四位引数代表它的透明度(前三位为RGB数值),和颜色一样,值255代表100%不透明,191则代表75%不透明,这个值越小,则透明度越高。

9. 原来颜色除了RGB,还有个HSB(色调、饱和度、亮度)可供表述。。。colorMode()可以在这两者间切换,并将它们的范围用第二引数的方式重新设定。