p5.js 工作坊：创意编程探索指南

本文还有配套的精品资源，点击获取

简介：p5.js 是一个创意编程库，使得艺术家、设计师、教育者和初学者能够轻松创建互动图形、动画和声音。本工作坊包括一系列教程和示例项目，帮助学习者深入了解如何利用p5.js 创造动态视觉效果和实现Web浏览器中的交互性。内容涵盖基础绘图、动画、事件处理、图像处理、音频可视化、物理模拟和用户交互等，以及p5.js 和JavaScript的基础知识。学习者通过实践示例代码，将逐步熟悉p5.js 的功能和语法。

1. p5.js 库概述与创意编程环境

p5.js 是一个创意编程库，旨在将编程逻辑与视觉艺术创作紧密地结合。它使得创建图形、动画、交互变得更加直观和易于实现，特别适合艺术家、设计师、教育工作者和初学者。该库提供了一套功能丰富的API，能够简化Web开发中常见的图形和动画任务，同时它也支持JavaScript的基础功能，因此，熟悉p5.js并不难，特别是如果你已经了解JavaScript。

p5.js 将艺术与技术的融合提升到了新的高度，它基于Processing项目，一个广受赞誉的创意编程语言，旨在降低视觉艺术与编程之间的门槛。p5.js 提供了与Processing类似的语法，但是运行在浏览器中，这为创作提供了极大的便利性与灵活性。

接下来的章节将逐步深入探讨p5.js 的工作原理，以及如何创建激动人心的艺术项目。我们将从JavaScript 基础开始，逐渐过渡到p5.js 的核心功能和API，然后通过一系列示例项目来探索动画、交互性以及3D空间的处理。为了帮助读者更好地理解和运用p5.js，我们还将提供一些学习资源和社区支持的信息。让我们开始这段创意编程的旅程吧！

2. JavaScript 基础知识

2.1 数据类型与变量

JavaScript中的变量是用来存储信息的容器，而数据类型定义了这些信息的种类。理解这两者是学习编程的基础。

2.1.1 基本数据类型

基本数据类型在JavaScript中指的是不能再细分的数据类型，它们是： Number 、 String 、 Boolean 、 undefined 、 null 以及 Symbol 和 BigInt （ES6+ 新特性）。

let age = 30; // Number
let name = "Alex"; // String
let isHappy = true; // Boolean
let unassignedVariable; // undefined
let emptyValue = null; // null

let uniqueSymbol = Symbol("unique"); // Symbol
let bigIntValue = ***n; // BigInt

2.1.2 复杂数据类型

复杂数据类型，也称为引用类型，主要包括 Object 、 Array 、 Function 等。这些类型可以存储一个或多个值的集合。

let person = {
    name: "Alex",
    age: 30,
    greet: function() {
        console.log("Hello, my name is " + this.name);
    }
};

let fruits = ["Apple", "Banana", "Cherry"]; // Array

function sayHello(name) {
    console.log("Hello " + name);
} // Function

2.1.3 变量的作用域和生命周期

变量的作用域决定了它们在哪里可用，分为全局作用域和局部作用域。JavaScript使用函数作用域，变量在函数内声明，只在该函数内可用。

function myFunction() {
    let localVariable = "I am local";
}

console.log(localVariable); // Uncaught ReferenceError: localVariable is not defined

变量的生命周期是指变量存在的时间。全局变量在页面刷新前一直存在，局部变量则在函数执行结束时销毁。

2.2 控制结构与函数

2.2.1 条件语句与循环

条件语句允许我们根据不同的条件执行不同的代码块，常用的条件语句有 if 、 else if 、 else 。循环语句则用来重复执行代码，如 for 、 while 、 do...while 。

let score = 75;

if (score >= 90) {
    console.log("A");
} else if (score >= 80) {
    console.log("B");
} else if (score >= 70) {
    console.log("C");
} else {
    console.log("F");
}

for (let i = 0; i < 5; i++) {
    console.log(i);
}

2.2.2 函数定义与使用

函数是一段封装起来的代码，它接受输入参数并可能返回输出值。函数可以使用函数声明或函数表达式定义。

// 函数声明
function add(a, b) {
    return a + b;
}

// 函数表达式
const subtract = function(a, b) {
    return a - b;
};

console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2

2.2.3 作用域规则与闭包

作用域规则定义了变量如何在不同的代码块中被查找。闭包是指有权访问另一个函数作用域中的变量的函数。

function createCounter() {
    let count = 0;
    return function() {
        count++;
        console.log(count);
    };
}

const myCounter = createCounter();
myCounter(); // 1
myCounter(); // 2

2.3 JavaScript 对象与类

2.3.1 对象字面量与构造函数

对象字面量是用大括号 {} 定义的对象。构造函数是创建新对象的特殊函数。

// 对象字面量
let person = {
    name: "John",
    age: 30,
    greet: function() {
        console.log("Hello, my name is " + this.name);
    }
};

// 构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

let person2 = new Person("Jane", 25);

2.3.2 原型链与继承

JavaScript中的继承是通过原型链实现的。每个对象都有一个原型对象，原型对象也有自己的原型，这样一层层向上直到一个对象的原型是 null 。根据这种链式关系，一个对象能够继承另一个对象的属性。

Person.prototype.greet = function() {
    console.log("Hello, my name is " + this.name);
};

person2.greet(); // Hello, my name is Jane

2.3.3 ES6+ 新特性概览

ES6及之后的版本引入了许多新特性，如箭头函数、模板字符串、解构赋值、类、模块等。

// 箭头函数
let greet = () => console.log("Hello!");

// 模板字符串
let greeting = `Hello, my name is ${person.name}`;

// 解构赋值
let [first, , third] = fruits;

// 类
class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    area() {
        return this.height * this.width;
    }
}

// 模块
import { myFunction } from './module.js';

在本章节中，我们讨论了JavaScript的基本概念，从数据类型、控制结构到对象和类的高级特性。这些知识点对于编程者构建功能丰富且结构清晰的应用是必不可少的。接下来，我们将深入探讨p5.js示例项目，并通过具体案例学习如何运用JavaScript的基础知识来实现创意编程。

3. p5.js 示例项目介绍

3.1 创意项目案例分析

3.1.1 互动艺术作品

互动艺术作品在现代艺术展览中越来越受欢迎，它们通常结合了创意和技术，为观众提供独特的视觉和触觉体验。使用p5.js，开发者可以轻松构建互动艺术作品，将艺术与编程无缝结合。例如，可以创建一个“触碰音乐”的项目，当观众与画布互动时，不同的几何形状会响应他们的动作，同时触发不同的音符或音乐片段。

代码块：

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

function draw() {
  background(220);
  fill(0, 102, 153);
  ellipse(mouseX, mouseY, 50, 50);
}

function mousePressed() {
  playTone();
}

function playTone() {
  let frequency = map(mouseX, 0, width, 20, 500);
  let oscillator = new p5.Oscillator();
  oscillator.setType('sine');
  oscillator.freq(frequency);
  oscillator.amp(random(0.5, 1));
  oscillator.start();
  oscillator.play();
}

在上述代码中，我们创建了一个响应鼠标点击的音调生成器。每次点击不同的位置，都会播放一个不同的音调频率。这种类型的互动艺术作品可以进一步扩展，加入更多的音调，图形甚至颜色，以创建更加丰富的互动体验。

3.1.2 数据可视化项目

数据可视化是一种强大的方式，能够帮助我们从复杂的数据集中提取有价值的信息。p5.js可以用来制作动态和互动的数据可视化。例如，可以通过编码创建一个条形图，其中条形的长度根据实时数据动态改变，而颜色则反映数据的类别或值域。

3.1.3 游戏开发示例

p5.js同样适用于快速原型设计和游戏开发。其轻松的语法和内置的绘图功能让游戏开发变得简单。一个简单的“贪吃蛇”游戏可以通过p5.js来实现，玩家控制一条蛇，通过键盘方向键移动，目标是吃掉出现的食物同时避免撞到自己的尾巴或墙壁。

3.2 核心功能与API探究

3.2.1 画布设置与渲染

p5.js通过 createCanvas() 函数让用户可以轻松设置画布的尺寸，这是一个基础且关键的功能，因为几乎所有绘图都需要在这个画布上进行。

3.2.2 颜色系统与形状绘制

颜色在视觉艺术中扮演着至关重要的角色。p5.js提供了一个颜色系统，使得定义和运用颜色变得更加直观和方便。你可以使用RGB、HSL或者十六进制等格式来指定颜色。

代码块：

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

function draw() {
  background(220);
  fill(255, 0, 0); // 红色填充
  ellipse(50, 50, 50, 50); // 椭圆形状
}

3.2.3 字符与文本处理

文本处理是p5.js的另一个强大功能。你可以加载自定义字体，改变文字大小、颜色，并且在画布上的任何位置进行绘制。

代码块：

let font;

function preload() {
  font = loadFont('assets/Roboto-Regular.ttf');
}

function setup() {
  createCanvas(400, 400);
  textFont(font);
  textSize(36);
}

function draw() {
  fill(0);
  text('Hello, p5!', 10, 50);
}

在上述代码中，我们加载了一个名为 Roboto-Regular.ttf 的字体文件，并在画布上显示了“Hello, p5!”。这展示了文本的基本处理和显示。

下一章节将探索p5.js在基础绘图与几何形状操作上的功能。

4. 基础绘图与几何形状操作

4.1 二维几何形状绘制

4.1.1 点、线、面的基本绘制

在p5.js中，绘图的基础是点、线、面的概念，它们是构成任何复杂形状和图像的基石。让我们通过一些基本的函数来深入理解如何使用这些元素。

使用 point(x, y) 函数可以在画布上绘制一个点。例如：

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

function draw() {
  point(50, 50); // 在坐标(50, 50)位置绘制一个点
}

通过 line(x1, y1, x2, y2) 函数绘制线段：

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

function draw() {
  line(50, 50, 350, 350); // 从坐标(50, 50)到(350, 350)绘制一条线段
}

面的绘制通常涉及到使用 beginShape() 和 endShape() 函数来定义多边形的顶点，以及 vertex(x, y) 函数来定义顶点位置：

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

function draw() {
  beginShape();
  vertex(50, 50);
  vertex(150, 50);
  vertex(150, 150);
  vertex(50, 150);
  endShape(CLOSE); // CLOSE参数使顶点形成封闭形状
}

4.1.2 曲线与贝塞尔曲线

当我们要创建更平滑的曲线时，可以使用 curve() 和 bezier() 函数。这两个函数使用贝塞尔曲线，它们在设计和动画中非常常见。

curve(x1, y1, x2, y2, x3, y3, x4, y4) 函数用于绘制平滑曲线，它需要四个点作为参数：两个控制点和两个端点：

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

function draw() {
  curve(50, 50, 100, 25, 300, 350, 350, 300);
}

相似地， bezier() 函数用于绘制贝塞尔曲线：

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

function draw() {
  bezier(50, 50, 150, 50, 150, 200, 50, 300);
}

4.1.3 复杂几何图形构建

构建复杂几何形状通常涉及到对点、线、面的组合与操作。在p5.js中，你可以通过组合使用 beginShape() , vertex() , curveVertex() , 和 endShape() 来创建复杂的自定义多边形。

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

function draw() {
  beginShape();
  vertex(100, 100); // 开始绘制多边形
  vertex(100, 200); // 指定一个顶点
  curveVertex(150, 250); // 使用曲线顶点
  vertex(200, 200); // 继续多边形的顶点
  vertex(200, 100); // 完成多边形
  endShape(CLOSE); // 结束并闭合图形
}

4.2 三维空间与渲染

4.2.1 3D 绘图基础

p5.js提供了一系列用于三维绘图的函数，使我们可以轻松地将二维绘图扩展到三维空间。要开始3D绘图，首先需要启用3D模式：

function setup() {
  createCanvas(400, 400, WEBGL); // 使用WEBGL参数创建3D画布
}

function draw() {
  // 示例绘制3D立方体
  push(); // 保存当前变换状态
  translate(0, 0, -200); // 将绘制原点移入屏幕
  box(100); // 绘制一个边长为100的立方体
  pop(); // 恢复之前的变换状态
}

4.2.2 光照与材质处理

为了使3D对象看起来更真实，p5.js允许我们添加不同的光照效果和材质属性。例如，可以使用 ambientLight() , pointLight() , 和 directionalLight() 来创建不同的光源：

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

function draw() {
  ambientLight(102, 102, 102); // 创建环境光
  pointLight(255, 255, 255, 0, 0, 100); // 创建一个点光源
  // 绘制几何体
  push();
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(100);
  pop();
}

材质可以通过 noStroke() , fill() , ambientMaterial() , specularMaterial() 等函数来设置，它们控制了对象表面如何反射光线：

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

function draw() {
  ambientMaterial(102, 102, 102); // 设置漫反射材质颜色
  box(100);
}

4.2.3 3D 物体操作与场景构建

在三维空间中构建场景通常涉及到对物体进行操作和变换，如移动、旋转和缩放。在p5.js中， translate() , rotate() , 和 scale() 函数可以用来实现这些变换。

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

function draw() {
  // 在绘制之前，我们使用变换函数来定位和操作物体
  push(); // 保存变换状态
  translate(100, 0, -200); // 移动物体位置
  rotateX(frameCount * 0.01); // 绕X轴旋转物体
  box(100); // 绘制立方体
  pop(); // 恢复之前的变换状态
  // 可以继续添加更多物体和变换
  push();
  translate(-100, 0, -200);
  rotateY(frameCount * 0.01);
  box(100);
  pop();
}

通过这些函数的组合使用，你可以创建复杂的三维场景，并通过动态的绘图逻辑为它们添加动画效果。在下一章节中，我们将探讨如何通过p5.js实现动画效果和交互性。

5. 动画与交互性实现

在前面的章节中，我们已经了解了p5.js的基础知识和如何使用它来创建基础图形。现在，我们将深入探讨如何利用p5.js来实现动画效果和交互性，这将把我们的作品带到一个全新的水平。

5.1 动画技术与循环

5.1.1 时间与帧率管理

动画是由一系列快速连续的静态图像组成的，它们在视网膜上产生一种连续运动的视觉错觉。在p5.js中，我们通常使用 draw() 函数来创建动画。该函数会不断重复执行，以每一帧为基础更新画布。

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

function draw() {
  // 更新每一帧时的背景
  background(220);
  // 在屏幕上绘制一个圆形，并根据帧数改变位置
  ellipse(mouseX, mouseY, 50, 50);
}

上段代码中， ellipse 函数的位置是根据鼠标的当前位置动态变化的，这导致了圆形跟随鼠标移动的动画效果。

5.1.2 动画循环与缓动函数

动画循环中，帧率是控制动画速度的关键因素。通过调整 frameRate() 函数的参数，我们可以控制每秒绘制的帧数。

function setup() {
  createCanvas(400, 400);
  frameRate(30); // 设置每秒30帧
}

function draw() {
  background(220);
  // 动态的椭圆形
  ellipse(frameCount % width, height / 2, 50, 50);
}

在动画中使用缓动函数可以给动画添加平滑过渡的效果。一个基本的线性缓动函数是：

function lerp(start, stop, amt) {
  return (1 - amt) * start + amt * stop;
}

5.1.3 逐帧动画与状态管理

逐帧动画涉及到在 draw() 函数中根据不同的时间或帧数更新画布上的内容。我们可以使用一个变量来追踪动画的状态，并基于它来更新画布。

let frame = 0;

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

function draw() {
  background(220);
  // 动画状态管理
  if (frame < 100) {
    // 随着帧数的增加逐渐增大
    fill(255, frame * 2, 0);
  } else {
    // 一旦达到最大值，重置动画状态
    fill(255, 255, 0);
    frame = 0;
  }
  ellipse(width / 2, height / 2, frame * 2 + 20, frame * 2 + 20);
  frame++;
}

5.2 交互式元素与事件

5.2.1 鼠标与键盘事件处理

p5.js提供了许多内置的事件函数，使得与用户的交互变得简单。例如， mousePressed() 函数允许我们在鼠标按键被按下时执行特定的代码。

let circleX;
let circleY;

function setup() {
  createCanvas(400, 400);
  circleX = width / 2;
  circleY = height / 2;
}

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

function mousePressed() {
  // 当鼠标按下时，更新圆形的位置到鼠标位置
  circleX = mouseX;
  circleY = mouseY;
}

5.2.2 触摸与手势支持

除了鼠标事件，p5.js同样支持触摸事件，这在移动设备上尤其有用。例如，使用 touchStarted() 函数，我们可以创建触摸开始时的响应逻辑。

let text;

function setup() {
  createCanvas(400, 400);
  text = "Touch the screen";
}

function draw() {
  background(220);
  fill(0);
  textSize(32);
  textAlign(CENTER);
  text(text, width / 2, height / 2);
}

function touchStarted() {
  // 触摸开始时更新文本
  text = "Touch detected!";
}

5.2.3 交互式反馈机制设计

交互式反馈机制可以增加用户体验，例如，当用户执行特定操作时，可以通过视觉或声音反馈给用户一个提示。在下面的代码中，我们用 noStroke() 和 fill() 函数来改变圆形的颜色，作为视觉反馈。

let circleX;
let circleY;
let isTouched = false;

function setup() {
  createCanvas(400, 400);
  circleX = width / 2;
  circleY = height / 2;
}

function draw() {
  background(220);
  fill(isTouched ? 255 : 0); // 根据isTouched变量改变颜色
  ellipse(circleX, circleY, 50, 50);
}

function mousePressed() {
  // 改变isTouched状态
  isTouched = !isTouched;
}

5.3 物理与动态模拟

5.3.1 简单的粒子系统

在p5.js中，我们可以使用数组来创建一个简单的粒子系统。粒子通常包含位置、速度和生命周期等属性。

let particles = [];

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

function draw() {
  background(220);
  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    particles[i].show();
    if (particles[i].isDead()) {
      particles.splice(i, 1);
    }
  }
  if (frameCount % 100 === 0) {
    particles.push(new Particle(mouseX, mouseY));
  }
}

class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(random(-1, 1), random(-1, 1));
    this.lifespan = 255;
  }

  update() {
    this.vel.mult(0.99); // 模拟空气阻力
    this.pos.add(this.vel);
    this.lifespan -= 4; // 模拟自然衰减
  }

  show() {
    colorMode(HSB);
    stroke(255, 255, this.lifespan);
    strokeWeight(2);
    point(this.pos.x, this.pos.y);
  }

  isDead() {
    return this.lifespan < 0;
  }
}

5.3.2 引力与碰撞检测

粒子系统可以很容易地扩展到包含物理模拟，如引力和碰撞检测。

// 在Particle类中添加以下方法：
class Particle {
  // ...
  applyForce(force) {
    this.vel.add(force);
  }

  checkEdges() {
    if (this.pos.x > width || this.pos.x < 0) {
      this.vel.x *= -1;
    }
    if (this.pos.y > height || this.pos.y < 0) {
      this.vel.y *= -1;
    }
  }
}

function draw() {
  // ...
  for (let i = 0; i < particles.length; i++) {
    for (let j = i + 1; j < particles.length; j++) {
      let d = dist(particles[i].pos.x, particles[i].pos.y, particles[j].pos.x, particles[j].pos.y);
      if (d < 20) {
        let force = p5.Vector.sub(particles[i].pos, particles[j].pos);
        force.mult(0.1);
        particles[i].applyForce(force);
        particles[j].applyForce(force.mult(-1));
      }
    }
  }
  // ...
}

5.3.3 动态环境与场景交互

通过模拟现实世界中的物理规则，我们可以构建一个动态的环境，使粒子之间以及粒子与环境之间产生互动。

// 在Particle类中添加以下方法：
class Particle {
  // ...
  checkEdges() {
    if (this.pos.x > width) {
      this.pos.x = 0;
    } else if (this.pos.x < 0) {
      this.pos.x = width;
    }
    if (this.pos.y > height) {
      this.pos.y = 0;
    } else if (this.pos.y < 0) {
      this.pos.y = height;
    }
  }
}

function draw() {
  // ...
  particles.forEach(p => {
    p.applyForce(createVector(0.1, 0)); // 添加一个向右的恒定力
    p.checkEdges();
    p.update();
    p.show();
  });
  // ...
}

通过以上代码，我们不仅创建了一个粒子系统，还引入了简单的重力和碰撞检测，使得场景中的粒子能够与周围环境进行交互。这为动画和交互性增加了新的维度，允许我们在各种项目中创建更加动态和丰富的视觉效果。

在下一章中，我们将探讨如何通过学习资源和社区支持来进一步提升我们的p5.js技能，探索更多的创意项目，并与其他开发者共享我们的作品。

本文还有配套的精品资源，点击获取

简介：p5.js 是一个创意编程库，使得艺术家、设计师、教育者和初学者能够轻松创建互动图形、动画和声音。本工作坊包括一系列教程和示例项目，帮助学习者深入了解如何利用p5.js 创造动态视觉效果和实现Web浏览器中的交互性。内容涵盖基础绘图、动画、事件处理、图像处理、音频可视化、物理模拟和用户交互等，以及p5.js 和JavaScript的基础知识。学习者通过实践示例代码，将逐步熟悉p5.js 的功能和语法。

本文还有配套的精品资源，点击获取