1. 简介
p5.js是一种易懂的、针对没有编程基础的艺术家和设计师做的编程语言，可以制作网页的图象、动画和交互作品，实现了web端的互动艺术创作，释放出互联网创意变成的魅力，以Processing为基础的JavaScript框架。
p5.js 官网： https://p5js.org/
2. 草图
在p5.js创作中，草图十分重要，不建议直接进行图形代码的编写，而应该在纸上绘制一些原型草图，然后再用代码把想要表现的图形呈现在屏幕上。
3. 编程结构
p5.js非常类似于create.js，但是p5.js 图形封装库更齐全，并针对设计作了优化，非常方便。
基本语法：
//初始化，只运行一次
function setup () {}
//绘制图形，每一帧都读取
function draw() {}
4. 案例一 鼠标描边
function setup() {
createCanvas(400, 400);
}
function draw() {
if(mouseIsPressed){
stroke(220);
}else{
stroke(0);
}
line(300,300,mouseX,mouseY);
}
效果描述：中心点是（300,300），鼠标移动描边，按下时是白色，不按下是黑色。截图如下：
5. 画布与基本形状
（列举部分，不齐全，可在官网上学习更多基本形状画法）
| 类型 | 语法 |
|---|---|
| 画布 | createCanvas(width,height) |
| 点 | point(x,y) |
| 线段 | line(x1,y1,x2,y2) |
| 三角形 | trangle(x1,y1,x2,y2,x3,y3) |
| 四边形 | quad(x1,y1,x2,y2,x3,y3,x4,y4) |
| 矩形 | rect(x,y,width,height) |
| 椭圆 | ellipse(x,y,width,height) |
| 圆弧线 | arc(x,y,width,height) |
| 贝塞尔曲线 | Bezier(x1,y1,cx1,cy1,cx2,cy2,x2,y2) |
| 自定义曲线 | – |
6. 绘图顺序和颜色填充
绘制顺序按照代码先后顺序，越前面的越在底层
颜色填充：fill，stroke。
7. 案例二 画两个小动物
function setup() {
createCanvas(500, 150);
background(0);
}
function draw(){
//左边的小动物
fill(255);
//point能独立存在，可被多面共享，不唯一。
//vertex不能独立存在，只能存在一个平面内，唯一。
beginShape();
vertex(125,150);
vertex(129,100);
vertex(110,90);
vertex(115,80);
vertex(130,85);
vertex(140,10);
vertex(147,30);
vertex(183,32);
vertex(190,12);
vertex(195,90);
vertex(210,100);
vertex(205,110);
vertex(195,105);
vertex(200,150);
endShape();
fill(0);
ellipse(153,60,6,6);
ellipse(176,60,6,6);
noFill();
ellipse(164,90,10,20);
//右边的小动物
fill(255);
beginShape();
vertex(270,150);
vertex(270,114);
vertex(250,110);
vertex(260,104);
vertex(270,105);
vertex(270,60);
vertex(260,50);
vertex(270,55);
vertex(300,55);
vertex(320,45);
vertex(310,55);
vertex(320,105);
vertex(330,100);
vertex(335,105);
vertex(323,113);
vertex(325,150);
endShape();
fill(0);
ellipse(280,80,3,7);
ellipse(290,80,3,7);
noFill();
arc(285,90,20,20,radians(20),radians(90));
}
截图：
8. 案例三 随机换色盘
function setup() {
createCanvas(500, 500);
background(0);
rectMode(CENTER);
colorMode(HSB,360,80,80);
}
function draw(){
for(let x=0;x<550;x+=50){
for(let y=0;y<550;y+=50){
stroke(random(360,80,80));
fill(random(360),80,80);
rect(x,y,random(50),random(50));
}
}
}