1.PIXELS

1.1 显示屏的X/Y 坐标轴

Paste_Image.png

1.2 常用图形

只记录了基本用法，隐藏技能请自行尝试。

直线

line(a,b,c,d)：点(a,b)到点(c,d)的直线；

矩形

rect(a,b,c,d)：默认模式下rectMode(CORNER)，点(a,b)为左上角点坐标，点(c,d)为右下角点坐标的矩形；
rectMode(CENTER)：调整画矩形的模式为【中心】，此时输入rect(a,b,w,h)，点(a,b)为矩形中心点，w为宽，h为高。

椭圆

ellipse(a,b,w,h)：默认模式为ellipseMode(CENTER),点(a,b)为椭圆中心点，w为宽，h为高。

其他

三角形
triangle(a,b,c,d,e,f)：(a,b),(c,d),(e,f)为三顶点坐标；

弧形
arc(a,b,w,h,start,end):点(a,b)为椭圆中心点，w为宽，h为高，start为起始弧度，end为终止弧度。
arc的绘制有多种模式，详情参考弧度|Processing
注意："PI=π"

四边形
quad(x1,y1,x2,y2,x3,y3,x4,y4）；

曲线
curve(x1,y1,x2,y2,x3,y3,x4,y4）；

1.3 颜色

黑白

fill(x)：填充图案，x在[0,255]范围内；
stroke(x)：描边图案，x在[0,255]范围内；

彩色

fill(a,b,c)：填充图案，a,b,c在[0,255]范围内；
stroke(a,b,c)：描边图案，a,b,c在[0,255]范围内；

透明度

fill(a,b,c,d）：d为透明度，255为不透明，0为全透明；

自定范围

colorMode(RGB,100)：RGB模式，数值范围[0,100]。

1.4 良好编程习惯，及时分条注释

//这里写注释，不会被processing读取
line(0,0,100,100);

1.5 循环绘制

大括号中间是代码组

Paste_Image.png

程序的流程

void setup(){
//这里的内容运行一次
}

void draw(){
//这里的内容循环运行
}

Paste_Image.png

1.6 与鼠标相关的变量

mouseX：鼠标的x坐标
mouseY：鼠标的y坐标
abs(x)：x的绝对值
abs(mouseX-pmouseX)：鼠标在x轴的每一帧的位移绝对值
mousePressed()：鼠标点击
keyPressed()：键盘点击

Project1：羞耻的代码生物

void setup(){
// set the size of the window
size(200,200);
}

void draw(){
//draw a white background
background(255);
//set the mode of ellipse and rect
ellipseMode(CENTER);
rectMode(CENTER);

// draw the body of Jeeb
fill(150);
quad(100,100,60,125,100,150,140,125);

// draw the head of Jeeb
strokeWeight(2);
line(85,25,90,28);
line(115,25,110,28);
line(90,28,90,45);
line(110,28,110,45);
strokeWeight(1);
fill(255);
ellipseMode(CENTER);
ellipse(100,70,30,60);

// draw the eyes of Jeeb
fill(mouseX,0, mouseY);
ellipse(95,60,10,6);
ellipse(105,60,10,6);

// draw the legs of Jeeb
fill(0);
strokeWeight(1);
triangle(70,150,130,150,100,170);
line(80,180,100,170);
line(120,180,100,170);

}

术语翻译

Argument：实参，提供给函数调用的值；
Parameter：形参，函数的名称；
variable：变量；
a block of code:代码组；