本文介绍如何使用p5.js库进行代码绘图，通过定义正六边形函数并结合translate平移与rotate旋转函数，实现基础图形的批量排列与持续旋转效果。文章提供了完整代码示例，并演示了如何通过调整颜色与时间参数对图形进行简单改编，帮助初学者理解编程生成动态视觉元素的基本逻辑。
p5.js动态图形临摹概述
一、临摹
近期在探索代码绘图技术时，笔者参考了现有的动态视觉效果，尝试进行复刻练习。
临摹结果 经过观察分析，该动态图案的核心构成单元为基础的正六边形。
基础正六边形绘制与旋转实现
首先，需要初始化并创建一个绘图画布。
function setup() {
createCanvas(400, 400);
}绘制六边形的核心函数定义如下：
function polygon(x, y, radius, npoints) {//绘制正多边形函数
let angle = TWO_PI / npoints;
beginShape();
for (let a = 0; a < TWO_PI; a += angle) {
let sx = x + sin(a) * radius;
let sy = y + cos(a) * radius;
vertex(sx, sy);
}
endShape(CLOSE);
}其中，参数x和y用于指定六边形在画布上的坐标位置，radius定义六边形的半径（即边长相关参数），npoints则指定多边形的边数，此处固定为6以生成正六边形。
观察发现，该图案中的六边形仅围绕各自中心点进行旋转，未发生位移或缩放等其他几何变换。因此，实现思路为批量生成六边形实例，并赋予其持续的旋转动画。
利用嵌套循环结构配合平移函数，即可在画布上布局多个六边形。
具体而言，通过调用translate函数动态改变每个六边形的中心坐标，从而确定其在网格中的具体位置。
同时，引入时间相关函数（如millis()或frameCount），驱动旋转角度随时间递增，从而产生持续旋转的视觉效果。
完整的实现代码如下：
function setup() {
createCanvas(400, 400);
}
function draw() {
background(10,10,10);
var t=millis()/2000;
fill(123,0,0);
for(var j=0;j<=4;j++){
for(var h=0;h<=4;h++){
push();
translate(width *(0.1+j*0.2),height*(0.17+h*0.34));
rotate(t);
polygon(0,0,40 ,6);
pop();
}
}
for(var i=0;i<=5;i++){
for(var k=0;k<=5;k++){
push();
translate(width *i*0.2,height*k*0.34);
rotate(t);
polygon(0,0,40 ,6);
pop();
}
}
}
function polygon(x, y, radius, npoints) {//绘制正多边形函数
let angle = TWO_PI / npoints;
beginShape();
for (let a = 0; a < TWO_PI; a += angle) {
let sx = x + sin(a) * radius;
let sy = y + cos(a) * radius;
vertex(sx, sy);
}
endShape(CLOSE);
}最终生成的动态效果图如下所示：
图形颜色与尺寸的动态改编
图形改编
在基础版本上进行微调，主要改动包括：为六边形添加随机颜色切换功能，并引入随时间变化的尺寸缩放效果，使图形呈现由小变大的动态过程。
改编后的代码如下：
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0,10,200);
var t=5*millis()/1000;
//fill(211,0,0);
for(var j=0;j<=4;j++){
for(var h=0;h<=4;h++){
push();
translate(width *(0.1+j*0.2),height*(0.17+h*0.34));
rotate(frameCount / 22.0);
let c2=random(100,255);
fill(0,c2,0);
if (t<50)
{polygon(0,0,t ,6);}
if(t>50)
{
fill(255,0,0);
polygon(0,0,50 ,6);
}
pop();
}
}
for(var i=0;i<=5;i++){
for(var k=0;k<=5;k++){
push();
translate(width *(0+i*0.2),height*(0+k*0.34));
rotate(frameCount / 22.0);
let c2=random(100,255);
fill(0,c2,0);
if (t<50)
{polygon(0,0,t ,6);}
if(t>50)
{
fill(0,255,0);
polygon(0,0,50 ,6);
}
pop();
}
}
}
function polygon(x, y, radius, npoints) {//绘制正多边形函数
let angle = TWO_PI / npoints;
beginShape();
for (let a = 0; a < TWO_PI; a += angle) {
let sx = x + sin(a) * radius;
let sy = y + cos(a) * radius;
vertex(sx, sy);
}
endShape(CLOSE);
}学习总结与展望
总结
本次实践使我对代码编程有了初步的认识，逐步掌握了分析与解决基础图形生成问题的方法。尽管目前处理的案例较为简单，且创意有限，但该课程极具趣味性，期望未来能投入更多时间深入研习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。