码绘实践第一课——动态图形的实现

本文主要是介绍码绘实践第一课——动态图形的实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

码绘实践——使用p5.js来绘制

1. 用于临摹的动态图形 在这里插入图片描述
观察动图的构成，是由白色的六边形和黑色的背景组成。从p5.js的官方网站上找到参考实例用到其中的写正多边形的函数。

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);
}

polygon(x, y, radius, npoints)改变最后的系数，就可以显示出不同的正多边形。
开始进行临摹：
function draw() {
background(0);
push();
translate(width 0.2,height0.2);
rotate(frameCount / 20.0);
polygon(0,0,40,6);
pop();
}
第一步做一个自转的正六边形，rotate函数来控制它的旋转；
在这里插入图片描述
第二步开始实现多个的排列：但现在的排列实现是用多个重复的上述语句来实现的，根据观察是奇数排为六个正六边形，偶数排是五个正六边形。开始用for循环来简化代码。

for(var i=0;i<=5;i++){
push();
translate(width (0+i0.2),height*0);
rotate(frameCount / 20.0);
polygon(0,0,40,6);
pop();
}【0~6】个正六边形的实现
观察每排之间间隙：
在这里插入图片描述
实现代码：【完整】

function setup() {createCanvas(400, 400);
}
function draw() {background(0);fill(211,211,211);//淡灰色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);polygon(0,0,40,6);pop();}}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);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);
}

在这里插入图片描述
改变边数做出像齿轮滚动一样的感觉：

2.临摹的第二个动图：
尝试后是sin函数相位的变化来制作出动态的感觉；

function draw() {background(0);
// -------- 获取时间 ------------------- //
// 获得毫秒数
var Millis = millis();
// 获得秒数，相比second()，能获得小数点后的部分
var Second = millis()/300;var wt=Second;stroke(255,99,71);strokeWeight(4);fill(0);arc(200,200,350,350,PI,PI+PI*(39/80*sin(wt+10/5)+41/80));arc(200,200,325,325,PI,PI+PI*(39/80*sin(wt+9/5)+41/80));…………//省略~

在这里插入图片描述

分布截图显示：
在这里插入图片描述
小拓展##
用循环写的时候发现的奇特改变,wt也随循环次数改变；
for(var i=1;i<=13;i++){
arc(200,200,0+(i25),0+(i25),PI,PI+PI*((39/80cos(wt+(i/5)))+41/80));
}

若是在setup建立背景而不再draw中每次刷新背景；

（类似雨刷器的效果）感受到数字的神奇~
stroke(20i,15i,150+i);//改变颜色做出绚丽感觉。

以上动图找到的规律是PI,PI+PI(39/80*sin(wt+【】)+41/80)
sin函数中的【】数值越大就会越快抵达尽头处。
在这里插入图片描述
2.p5.js使用中，有很多有用的函数在示例和参考文献中；本次的实验就尝试学习到了许多有趣的东西；其中还有3Dbox的实现也十分的好看：

function setup() {createCanvas(500, 500,WEBGL);
}
function draw() {background(0);noFill();strokeWeight(2);rotateX(frameCount * 0.05);rotateY(frameCount * 0.05);stroke(255,215,0);box(130, 130, 130, 4, 4);rotateX(frameCount * 0.03);rotateY(frameCount * 0.01);stroke(0,255,255);box(100, 100, 100, 4, 4);rotateX(frameCount * (-0.03));rotateY(frameCount * (-0.03));stroke(160,32,240);box(70, 70, 70, 4, 4);
}