使用p5.js临摹动态图形：解析颜色与空间规律

"p5.js实现动态图形临摹的代码示例和步骤解析" 在本文中，我们将探讨如何使用p5.js库来实现一个动态图形的临摹项目。p5.js是一个基于JavaScript的创意编程库，它使艺术家、设计师、教育工作者和初学者能够轻松地在Web上创建交互式图形。 首先，我们要理解动态图形临摹的关键在于分析图形的规律。这个特定的动态图形具有以下特点： 1. **空间分布**：图形由5行5列的大小相同的圆组成，形成一个网格结构。 2. **颜色规律**：在与对角线平行的线上，所有圆的颜色都相同，这形成了不同颜色的线条。 3. **单个圆动态变化**：每个圆会经历一个逐渐被掩盖然后再次出现的过程，掩盖是匀速的。 4. **整体动态变化**：变化从右上角开始，按对角线方向向下移动，同一线上颜色相同的圆同步变化，相邻颜色线之间的变化有固定间隔。 接下来，我们逐步实现这个动态效果： ### 1. 基本空间布局 `setup()`函数用于初始化画布，`draw()`函数用于每帧的绘制。`drawsbkg()`函数专门用来绘制背景和圆。 ```javascript function setup() { createCanvas(400, 400); } function draw() { noStroke(); drawsbkg(); } function drawsbkg() { background(0); fill(255); // 循环绘制5行5列的圆 for (var i = 0; i < 5; i++) { for (var j = 0; j < 5; j++) { ellipse(i * 60 + 75, j * 60 + 75, 50, 50); // 绘制椭圆 } } } ``` ### 2. 添加颜色 通过分析原始图形，我们可以获取每个圆的颜色，并在`drawsbkg()`函数中根据行列位置（i和j）设定填充颜色。这里使用了`switch`语句来切换不同颜色。 ```javascript function drawsbkg() { background(0); for (var i = 0; i < 5; i++) { for (var j = 0; j < 5; j++) { var m = i + j; switch (m) { case 0: fill(color(97, 44, 142)); break; case 1: fill(color(22, 116, 188)); break; case 2: fill(color(1, 163, 150)); break; case 3: fill(color(129, 196, 64)); break; case 4: fill(color(245, 181, 47)); break; case 5: fill(color(237, 91, 52)); break; case 6: fill(color(234, 35, 94)); break; case 7: fill(color(186, 34, 129)); // ...其他颜色 } ellipse(i * 60 + 75, j * 60 + 75, 50, 50); } } } ``` ### 3. 实现动态变化 要实现动态效果，我们需要在`draw()`函数中添加时间相关的变量，例如帧数，然后用它来控制圆的可见性。我们可以创建一个变量`frameCount`来跟踪帧数，然后用它来控制圆的透明度。例如，当`frameCount % speed == 0`时，圆将变得不透明，然后随着`frameCount`增加，逐渐变透明。 ```javascript let frameCount = 0; let speed = 10; function draw() { frameCount++; noStroke(); drawsbkg(); // 根据帧数调整圆的透明度 for (var i = 0; i < 5; i++) { for (var j = 0; j < 5; j++) { var m = i + j; // 控制圆的透明度，实现掩盖和显现的效果 var alpha = map(frameCount % speed, 0, speed, 255, 0); fill(color(...getColorArray(m), alpha)); ellipse(i * 60 + 75, j * 60 + 75, 50, 50); } } } // 获取对应颜色数组 function getColorArray(index) { switch (index) { case 0: return [97, 44, 142]; case 1: return [22, 116, 188]; // ...其他颜色 } } ``` 至此，我们已经成功地实现了动态图形的临摹。通过调整速度和其他参数，你可以进一步定制和探索新的动态效果。p5.js的强大之处在于其灵活性和易用性，这使得我们能轻松地创造出各种有趣的图形动画。继续研究p5.js的更多功能，如动画控制、事件处理和用户交互，你将能够创建出更为复杂的互动作品。