p5.js

1- p5.js教程

p5.js 是一个基于 JavaScript 的开源图形库，旨在使艺术家、设计师和初学者能够轻松地在 Web 上创建交互式艺术、动画和图形。

1- 什么是 p5.js？

p5.js 是一个 JavaScript 库，基于 Processing 项目开发，旨在简化编程过程，使其更易于初学者上手。它提供了丰富的功能，可以用于绘图、动画、交互式图形等。

2- 入门教程

2.1- 1. 设置开发环境

你可以使用 p5.js Web 编辑器或本地开发环境（如 VS Code）来创建和保存你的 p5.js 项目。以下是基本步骤：

2.1.1- 使用 p5.js Web 编辑器：

登录 p5.js Web 编辑器。
创建一个新项目，并命名为“Interactive Landscape”。
保存项目。

2.1.2- 使用本地开发环境：

下载并安装 VS Code 或其他代码编辑器。
创建一个新的 p5.js 项目文件夹。
在文件夹中创建一个 index.html 文件和一个 sketch.js 文件。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js Sketch</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <script src="sketch.js"></script>
</head>
<body>
</body>
</html>

// sketch.js
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(200, 200, 50, 50);
}

3- 2. 基本绘图

在 p5.js 中，所有的绘图操作都在 setup() 和 draw() 函数中完成：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(200, 200, 50, 50);
}

setup() 函数在程序开始时运行一次，用于设置画布大小等初始化操作。
draw() 函数则会不断循环执行，用于绘制图形。

4- 3. 添加交互

你可以通过检测鼠标位置、键盘输入等方式来增加交互性。例如，以下代码会根据鼠标位置绘制一个圆：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(mouseX, mouseY, 50, 50);
}

5- 4. 加载图像和动画

p5.js 还支持加载和显示图像、创建动画等高级功能。例如，加载并显示一张图片：

let img;

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

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  image(img, 0, 0);
}

6- 5. 创建动画

你可以使用 frameCount 变量来创建简单的动画效果。例如，以下代码会根据帧数移动一个圆：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  let x = frameCount % width;
  ellipse(x, height / 2, 50, 50);
}

7- 高级主题

7.1- 1. 变换

p5.js 提供了多种变换函数，如 translate()、rotate() 和 scale()，可以对图形进行平移、旋转和缩放。例如：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  translate(width / 2, height / 2);
  rotate(frameCount / 100.0);
  rect(-25, -25, 50, 50);
}

7.2- 2. 处理用户输入

你可以使用 mousePressed()、keyPressed() 等函数来处理用户输入。例如：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

function mousePressed() {
  ellipse(mouseX, mouseY, 50, 50);
}

7.3- 3. 数据可视化

p5.js 还可以用于数据可视化。你可以使用 loadTable() 函数加载数据，并使用图形函数进行可视化。例如：

let table;

function preload() {
  table = loadTable('data.csv', 'csv', 'header');
}

function setup() {
  createCanvas(400, 400);
  for (let r = 0; r < table.getRowCount(); r++) {
    let x = table.getNum(r, 'x');
    let y = table.getNum(r, 'y');
    ellipse(x, y, 10, 10);
  }
}

8- 教育资源

p5.js 社区提供了丰富的教育资源，包括教程、工作坊和课程，帮助学习者和教育者更好地掌握和教授 p5.js。

12- 总结

p5.js 是一个功能强大且易于上手的工具，非常适合用于创意编程和交互式艺术的开发。通过上述教程，你可以快速入门并开始创建自己的 p5.js 项目。如果你希望深入学习，可以参考更多的高级教程和社区资源。

#编程

#p5.js

Ollama 上一篇

Remix 下一篇