p5.js 笔记

贡献者： addis

　　 p5 是一个很适合用于入门（前端）编程的库。

• 质点加速的例子
• 百科知识树加速

1. 常识

• 使用 html5 的一个 <canvas>，而 canvas 本质上是一张位图。
• 通过编程的方式创建 GUI
• 坐标原点默认在左上角，向右为 $x$，向下为 $y$，单位是像素。
• createCanvas(400, 400); 创建 canvas。
• function setup() 会先执行，然后每一帧执行一次 function draw()。
• frameRate(30); 设置每秒钟的帧率

2. 几何绘图

• stroke(0, 0, 0, 50); 规定划线的 RGB 和透明度（0-255）。
• fill(200); 规定长方形等的填充颜色。
• line(x1, y1, x2, y2); 画一条线。
• background(255); 设置背景颜色（可以是 RGB 三个输入）
• textSize(16); 设置字体颜色
• text("This is a text box!", x, y); 显示一行字

3. 鼠标控制

• 全局变量 mouseX, mouseY 是鼠标的坐标
• function mousePressed() 按下鼠标的回调函数
• function mouseReleased()

4. 向量运算

• let v = createVector(10, 20, 30); 生成一个向量（二维或三维）
• 用 v.x, v.y, v.z 来获取
• v.mag() 获取长度，v.mult(s) 乘以标量