P5.js 常量和结构完整参考

P5.js是一个基于Processing语言的JavaScript库，它使得使用JavaScript开发交互式图形和动画变得更加容易。在这里，我们将介绍常量和结构的完整参考。

常量

常量——颜色：

P5.js库中包含了一些颜色常量。这些常量包括以下颜色：

• BLACK 黑色
• WHITE 白色
• RED 红色
• GREEN 绿色
• BLUE 蓝色
• YELLOW 黄色
• ORANGE 橙色
• PURPLE 紫色
• GRAY 灰色

例子：

background(BLUE);
fill(RED);
stroke(GREEN);

常量——角度：

默认情况下，P5.js中的角度单位为弧度。为了方便，库中也包含以下角度常量：

• DEGREES 角度
• RADIANS 弧度

例子：

angleMode(DEGREES);
rotate(45);

常量——图形：

P5.js包含许多预定义的图形常量。这些常量可以作为绘制形状的参数。

• POINTS 点
• LINES 直线
• LINE_STRIP 直线条
• LINE_LOOP 直线循环
• TRIANGLES 三角形
• TRIANGLE_FAN 三角形扇
• TRIANGLE_STRIP 三角形带
• QUADS 矩形
• QUAD_STRIP 矩形带
• POLYGON 多边形

例子：

beginShape(TRIANGLES);
vertex(10, 10);
vertex(20, 30);
vertex(30, 10);
endShape();

常量——混合模式：

混合模式影响图形的绘制方式。P5.js支持以下混合模式：

• BLEND 混合
• ADD 加法混合
• DARKEST 取最小值混合
• LIGHTEST 取最大值混合
• DIFFERENCE 差异混合
• EXCLUSION 排除混合
• MULTIPLY 乘法混合
• SCREEN 屏幕混合
• REPLACE 替换混合

例子：

blendMode(MULTIPLY);
rect(25, 25, 50, 50);

结构

结构——鼠标：

P5.js包含了一些用于处理鼠标的结构。以下是P5.js中使用的鼠标结构：

• mouseX 鼠标在画布中的横坐标
• mouseY 鼠标在画布中的纵坐标
• pmouseX 上一帧的鼠标横坐标
• pmouseY 上一帧的鼠标纵坐标
• winMouseX 鼠标在屏幕中的横坐标
• winMouseY 鼠标在屏幕中的纵坐标
• pwinMouseX 上一帧鼠标在屏幕中的横坐标
• pwinMouseY 上一帧鼠标在屏幕中的纵坐标
• mouseButton 鼠标按下的按钮代码（0表示鼠标左键，1表示鼠标滚轮，2表示鼠标右键）

例子：

function draw() {
  if (mouseIsPressed) {
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

结构——键盘：

和鼠标一样，P5.js同样可以与键盘进行交互。以下是P5.js中使用的键盘结构：

• key 表示当前按下的键所表示的字符
• keyCode 表示当前按下的键的代码值
• keyIsDown() 表示传递的代码值对应的键是否按下

例子：

function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    x -= 10;
  } else if (keyCode === RIGHT_ARROW) {
    x += 10;
  }
}

结构——音频：

P5.js可以用于处理声音。以下是P5.js中使用的音频结构：

• loadSound() 从文件加载音频
• play() 播放音频
• pause() 暂停音频
• stop() 停止音频
• isPlaying() 检查音频是否正在播放
• setVolume() 设置音频音量

例子：

let mySound;

function preload() {
  mySound = loadSound('sound.mp3');
}

function mouseClicked() {
  mySound.play();
}

结构——图像：

P5.js负责处理图像的显示。以下是P5.js中使用的图像结构：

• loadImage() 从文件加载图像
• createGraphics() 创建一个新的图像
• image() 绘制图像
• tint() 修改图像的色彩
• resizeCanvas() 调整画布的大小
• push() 保存状态
• pop() 恢复状态
• translate() 沿x，y轴平移原点
• rotate() 以弧度旋转图像
• scale() 按比例缩放图像

例子：

let img;

function preload() {
  img = loadImage('image.jpg');
}

function draw() {
  tint(255, 128); // Set transparency value (255 = opaque, 0 = transparent)
  image(img, 0, 0);
}

结构——运动：

P5.js可以用于完成动画。以下是P5.js中使用的运动结构：

• frameRate() 帧速率
• millis() 当前时间
• loop() 开始动画循环
• noLoop() 停止动画循环
• redraw() 重新绘制

例子：

function setup() {
  frameRate(30);
}

function draw() {
  background(200);
}

function keyPressed() {
  redraw();
}

以上就是P5.js中常量和结构的完整参考。在使用过程中，您可以据此进行了解与掌握。