岩石教程

p5.js

2024-06-15 21:57:44 140
p5.js 是一个基于 Processing 的开源 JavaScript 库，旨在让编程变得更加便捷和有趣，特别是对于创意编码和视觉艺术的应用。p5.js 提供了一系列简单易用的 API，适用于各种图形、动画和交互式项目。

主要特点和功能

  1. 简单易用: 提供直观的 API，使得编程变得简单且有趣，特别适合初学者和艺术家。
  2. 丰富的图形功能: 支持绘制各种图形、形状、文本和图像。
  3. 强大的动画和交互功能: 提供内置的动画和交互功能，方便创建动态效果。
  4. 跨平台支持: 兼容主流浏览器和设备，适用于各种 web 项目。
  5. 开放和扩展性: 提供插件系统和扩展机制，可以方便地扩展功能。
  6. 社区驱动: 拥有活跃的社区和丰富的资源，方便学习和交流。
  7. 与 Processing 兼容: 继承了 Processing 的设计理念，方便 Processing 用户迁移到 p5.js。
  8. 支持 3D 图形: 提供了基于 WebGL 的 3D 绘图功能。
  9. 内置媒体支持: 支持音频、视频和摄像头等多媒体功能。
  10. 数据可视化: 提供丰富的图表和数据可视化工具。

使用场景

p5.js 适用于广泛的应用场景，包括但不限于：

  • 创意编程: 艺术家和设计师使用 p5.js 创建交互式艺术和视觉效果。
  • 教育: 教师使用 p5.js 教授编程和计算机科学概念。
  • 数据可视化: 数据科学家和分析师使用 p5.js 创建动态数据可视化。
  • 原型设计: 开发者使用 p5.js 快速构建和测试交互式原型。
  • 游戏开发: 开发者使用 p5.js 创建简单的 2D 游戏和动画。

核心概览

p5.js 的核心设计理念是简化编程过程，使得非程序员也能够轻松创建和分享自己的作品。它的核心组件包括：

  • p5 对象: 提供全局的 p5 实例，包含所有的 p5.js 函数和变量。
  • setup() 函数: 初始化代码，设置画布和初始状态，只执行一次。
  • draw() 函数: 主绘图循环，绘制和更新内容，每帧执行一次。
  • 事件处理函数: 如 mousePressed(), keyPressed() 等，用于处理用户输入。

安装

可以通过多种方式使用 p5.js，包括直接引入 CDN 链接、下载库文件或使用 npm 安装：

引入 CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

下载库文件

可以从 p5.js 下载页面 下载并引入库文件。

使用 npm 安装

npm install p5

基本用法

以下是一个基本的 p5.js 示例，展示了如何创建一个画布并绘制一个圆形：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>p5.js Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <script>
    function setup() {
      createCanvas(800, 600);
    }
    
    function draw() {
      background(220);
      fill(255, 0, 0);
      ellipse(width / 2, height / 2, 100, 100);
    }
  </script>
</head>
<body>
</body>
</html>

高级用法

动画

p5.js 提供了简单的动画功能，可以方便地创建动态效果：

let x = 0;

function setup() {
  createCanvas(800, 600);
}

function draw() {
  background(220);
  fill(255, 0, 0);
  ellipse(x, height / 2, 100, 100);
  x += 2;
  if (x > width) {
    x = 0;
  }
}

3D 图形

p5.js 支持 3D 图形，可以使用 WEBGL 渲染模式创建 3D 内容：

function setup() {
  createCanvas(800, 600, WEBGL);
}

function draw() {
  background(220);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(200);
}

音频处理

p5.js 提供了丰富的音频处理功能，可以加载和播放音频文件：

let song;

function preload() {
  song = loadSound('assets/your-audio-file.mp3');
}

function setup() {
  createCanvas(800, 600);
  song.play();
}

function draw() {
  background(220);
}

常用 API 说明

创建和设置

  • createCanvas(width, height): 创建一个画布。
  • background(color): 设置背景颜色。
  • fill(color): 设置填充颜色。
  • stroke(color): 设置边框颜色。
  • noFill(): 不使用填充颜色。
  • noStroke(): 不使用边框颜色。

绘制图形

  • ellipse(x, y, w, h): 绘制一个椭圆。
  • rect(x, y, w, h): 绘制一个矩形。
  • line(x1, y1, x2, y2): 绘制一条直线。
  • point(x, y): 绘制一个点。

变换

  • translate(x, y): 平移坐标系。
  • rotate(angle): 旋转坐标系。
  • scale(s): 缩放坐标系。

事件处理

  • mousePressed(): 鼠标按下事件。
  • mouseReleased(): 鼠标释放事件。
  • keyPressed(): 键盘按下事件。
  • keyReleased(): 键盘释放事件。

媒体处理

  • loadImage(path): 加载图像文件。
  • loadSound(path): 加载音频文件。
  • loadFont(path): 加载字体文件。
  • createVideo(path): 创建视频元素。
  • createCapture(constraints): 创建摄像头捕获。

数学函数

  • dist(x1, y1, x2, y2): 计算两点之间的距离。
  • map(value, start1, stop1, start2, stop2): 将一个值从一个范围映射到另一个范围。
  • lerp(start, stop, amt): 线性插值。

官方资源