p5.js

新手入门神器!

程序基本结构

//初始化,只在程序开始运行的时候执行一次
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(条件){
  //语句
}

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