程序基本结构

// 初始化，只在程序开始运行的时候执行一次
function preload(){
  // img = loadImage(imageFilePath);
  // snd = loadSound(soundFilePath);
}

// 初始化，只在程序开始运行的时候执行一次
function setup(){
  // createCanvas(width, height);
  //width代表画布宽度，height代表画布高度
}

//在初始化之后一直循环执行
function draw(){
	//渲染循环
}
				

系统变量

windowWidth / windowHeight
//窗口的高度和宽度
width / height
//当前画布的高度和宽度
frameCount
//程序开始运行到现在经过的帧数
mouseX / mouseY
//当前鼠标的X坐标和Y坐标
key
//上一个按下的键盘键值
keyCode
// 按下的特殊按键，如: BACKSPACE, DELETE,
// ENTER, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT,
// UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW
				

系统事件

// 按键按下
function keyPressed(){
}
// 鼠标移动
function mouseMoved(){
}
// 鼠标按下
function mousePressed(){
}
// 鼠标点击
function mouseClicked(){
}
// 窗口大小改变
function windowResized(){
  // resizeCanvas(windowWidth, windowHeight);
}
				

2d 空间

• 网格系统

• 弧度制

push(); // 保存当前的样式和画布变换
  translate(xDisplace, yDisplace);
  scale(xFactor, yFactor);
  rotate(angle);
pop(); //  恢复保存的样式和画布变换

angleMode(DEGREES);  //默认：弧度制
			

颜色

background(color);  // 填充背景

fill(color);  // 设置填充色
noFill();  // 取消填充
stroke(color);  // 设置描边颜色
noStroke();  // 取消描边

fill('red');  // 颜色名称
fill('#222222');  // 6位十六进制数
fill(gray);
fill(gray, alpha);
fill(red, green, blue);
fill(red, green, blue, alpha);

colorMode(HSL, maxH, maxS, maxL, maxA);
fill(hue, saturation, lightness, alpha);

colorMode(HSB, maxH, maxS, maxB, maxA);
fill(hue, saturation, brightness, alpha);

colorMode(RGB, 255);  // 恢复默认颜色模式

colorVariable = color(120, 50, 90);
			

基础形状

ellipseMode(CORNER);  // 默认: 中心
rectMode(CENTER); // 默认: 左上角

strokeWeight(weight);
// 设置描边宽度

line(x1, y1, x2, y2);

ellipse(x, y, width, height);

rect(x, y, width, height);

arc(x, y, width, height, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //添加更多的顶点
endShape(CLOSE);
			

文本

font = loadFont(filePath);
// 加载TTF或者OTF格式的字体

textFont(font, size);
// 设置字体字号

textSize(size);
// 设置字号

textAlign(horizontal, vertical);
// 水平: LEFT (默认), CENTER or RIGHT
// 垂直: TOP, BOTTOM, CENTER or BASELINE (默认)

text("string", x, y);
text("multiline string", x, y, boxwidth, boxheight);
			

• line() 直线

• ellipse() 圆

• rect() 矩形

• arc() 扇形

• vertex() 顶点

• text() 文本

调试输出

print("string: " + variable);
// 在调试控制台上输出

// 双斜杠表示注释内容
			

数学

+ - / *  //基本运算符

random(low, high); //生成随机数
noise(x, y, z); //生成0到1之间的柏林噪音（平滑连续随机数）

round(value); //取最接近的整数

map(value, in1, in2, out1, out2);
//把一个值从一个范围内映射到另一个范围。

dist(x1, y1, x2, y2);
//计算两点之间的距离
			

if/then 逻辑

if(条件){
	语句
}

===  //等于
!=  //不等于
>   //大于
<   //小于
>=  //大于等于
<=  //小于等于

&&  //逻辑与
||  //逻辑或
！   //逻辑非

for 循环

for ( init; test; update ) {
  statements
}

//示例
for (var i = 0; i < 10; i++) {
  print(i);
}