程序基本结构

//初始化，只在程序开始运行的时候执行一次
function setup(){
  createCanvas(800,600); //画布长度和宽度，单位是像素
}

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

系统变量

windowWidth / windowHeight
//窗口的高度和宽度

width / height
//当前画布的高度和宽度

mouseX / mouseY
//当前鼠标的X坐标和Y坐标

调试输出

print();
//在调试控制台上输出

//可以用双斜杠表示注释内容

颜色

fill(120); //gray(灰度): 0-255
fill(100,125,255); //r（红）, g（绿）, b（蓝）: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha（）透明度
fill('red'); //颜色名称
fill('#ccc'); //3位十六进制值
fill('#222222'); //6位十六进制值
color(0, 0, 255); //p5.Color对象

数学

+ - / *  //基础数学运算符号

random(low,high); //产生随机数

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

2d 基本图形

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);

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

• 网格系统

• line() 线条

• ellipse() 圆

• rect() 矩形

• arc() 扇形

• vertex() 顶点

属性

background(color);
//设置背景颜色

fill(color);
//设置填充颜色

noFill();
//取消填充

stroke(color);
//设置描边颜色

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

noStroke();
//取消描边

ellipseMode(MODE);
rectMode(MODE);
//参数被解读的方式 中心模式，边角模式

textSize(pixels);
//文字大小

if/then 逻辑

if(条件){
  //语句
}

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