p5.js图形绘制实战：几何图形与色彩艺术
项目地址: https://gitcode.com/GitHub_Trending/p5/p5.js 你是否曾想过用几行代码就能创作出令人惊艳的视觉艺术？p5.js作为一款基于Processing理念的客户端JavaScript平台，让艺术家、设计师和初学者都能轻松在网页上实现创意编程。本文将带你掌握几何图形绘制与色彩运用的核心技巧，通过简单示例体验代码生成艺术的魅力。
环境准备与基础框架
p5.js采用Canvas（画布）作为绘图载体，所有视觉元素都在这个虚拟画布上呈现。从官网获取最新版本后，通过以下基础结构启动你的第一个项目：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.4/lib/p5.js"></script>
<title>几何与色彩艺术</title>
</head>
<body>
<script>
function setup() {
createCanvas(600, 400); // 创建600×400像素的画布
background(240); // 设置浅灰色背景
}
function draw() {
// 绘图代码将在这里循环执行
}
</script>
</body>
</html>
上述代码定义了两个核心函数：setup()在程序启动时执行一次，用于初始化画布和设置参数；draw()则以默认60帧/秒的频率持续运行，形成动画效果。基础模板文件可参考p5.js项目结构中的示例。
几何图形绘制基础
p5.js提供了丰富的基础图形绘制函数，让我们从最常用的几种开始探索：
矩形与圆形
矩形通过rect(x, y, width, height)函数绘制，其中(x,y)是矩形左上角坐标：
fill(255, 165, 0); // 设置填充色为橙色
noStroke(); // 取消边框
rect(50, 50, 100, 80); // 在(50,50)位置绘制100×80的矩形
圆形使用circle(x, y, diameter)函数，参数分别代表圆心坐标和直径：
fill(135, 206, 235); // 天蓝色填充
circle(300, 200, 120); // 中心画直径120的圆
复杂图形组合
通过组合基础图形，我们可以创建更复杂的图案。以下示例绘制一个简单的表情图标：
function draw() {
background(240);
// 脸部
fill(255, 255, 0);
circle(300, 200, 150);
// 眼睛
fill(0);
circle(260, 170, 20);
circle(340, 170, 20);
// 嘴巴
noFill();
stroke(0);
strokeWeight(5);
arc(300, 220, 80, 60, 0, PI); // 绘制半圆弧
}
这段代码展示了图形绘制的基本流程：设置样式（填充、描边）→ 调用绘制函数。所有图形绘制功能都基于p5.js核心渲染模块实现，该模块处理画布创建、尺寸调整和渲染上下文管理。
色彩系统与艺术表现
色彩是视觉表达的核心元素，p5.js提供了灵活的色彩控制机制，支持RGB、HSB等多种色彩模式。
RGB色彩基础
默认的RGB模式中，颜色由红(R)、绿(G)、蓝(B)三原色组成，每种颜色取值范围0-255：
fill(255, 0, 0); // 纯红色
fill(0, 255, 0); // 纯绿色
fill(0, 0, 255); // 纯蓝色
添加第四个参数可控制透明度(Alpha)：
fill(255, 192, 203, 128); // 半透明粉色
色彩创建功能在src/color/creating_reading.js中实现，支持通过数值、数组或CSS颜色字符串创建颜色对象。
HSB色彩模式
HSB模式（色相、饱和度、亮度）更符合人类对色彩的直觉认知，通过colorMode(HSB)切换：
colorMode(HSB, 360, 100, 100); // 色相0-360，饱和度0-100，亮度0-100
fill(120, 100, 100); // 纯绿色（色相120°）
色彩渐变与艺术效果
通过颜色插值函数lerpColor()可以创建平滑的色彩过渡效果，实现渐变或彩虹等高级视觉效果：
function draw() {
background(0);
colorMode(HSB, 360, 100, 100);
for (let x = 0; x < width; x++) {
let hue = map(x, 0, width, 0, 360); // 将x坐标映射为色相值
let c = color(hue, 80, 90);
stroke(c);
line(x, 0, x, height); // 绘制垂直线条形成彩虹渐变
}
}
这段代码利用循环创建了从红到紫的连续色相渐变，展示了如何将数学概念转化为视觉艺术。
实践案例：动态几何构图
结合所学知识，我们来创建一个随鼠标交互的动态几何图案。这个案例将展示图形变换、色彩动态变化和用户交互的综合应用：
let angle = 0;
function setup() {
createCanvas(600, 400);
noStroke();
}
function draw() {
background(245);
translate(width/2, height/2); // 将原点移至画布中心
angle += 0.02;
// 绘制旋转的几何图形组合
for (let i = 0; i < 12; i++) {
push();
rotate(angle + i * radians(30)); // 每个图形旋转不同角度
// 根据鼠标位置调整颜色和大小
let size = map(mouseX, 0, width, 50, 150);
let hue = map(mouseY, 0, height, 0, 360);
fill(hue, 70, 90, 150);
rect(0, 0, size, size/2); // 绘制矩形
pop();
}
}
这个互动作品中，矩形阵列会随时间旋转，同时其大小和颜色会响应鼠标位置变化。push()和pop()函数用于保存和恢复坐标系状态，实现复杂的图形变换。
总结与进阶方向
通过本文学习，你已经掌握了p5.js的基础图形绘制和色彩控制能力。这些知识是创意编程的基础，在此之上你可以探索更高级的主题：
- 3D图形：使用p5.js的WebGL模式创建三维空间作品
- 粒子系统：通过大量微小图形模拟自然现象
- 图像滤镜：利用像素操作实现照片处理效果
- 交互装置：结合传感器数据创作实体互动艺术
p5.js社区提供了丰富的学习资源和示例作品，官方参考文档和示例库是继续深入学习的绝佳起点。记住，创意编程的核心不是代码本身，而是通过代码表达创意和思想的能力。现在就开始你的创作吧！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
