在p5.js中怎么引入minute()和 second(),使ellipse随机变色的频率为每分钟一次,scale的频率为每3.75秒一次
不知道你这个问题是否已经解决, 如果还没有解决的话:可以通过p5.js内置的minute()和second()函数来实现每分钟一次随机更改ellipse的颜色和每3.75秒一次改变scale的大小。
具体代码实现如下:
let scaleVal = 1;
let colorVal = 0;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
// 每3.75秒一次改变scale的大小
if (frameCount % 225 == 0) {
scaleVal += 0.1;
}
// 每分钟一次随机更改ellipse的颜色
if (second() == 0) {
colorVal = random(255);
}
fill(colorVal);
ellipse(width/2, height/2, 50*scaleVal, 50*scaleVal);
}
在上面的代码中,我们设置了两个变量:scaleVal和colorVal。scaleVal用来控制ellipse大小的变化,colorVal用来控制ellipse颜色的变化。在setup()函数中,我们创建了一个400x400的画布。在draw()函数中,我们首先将画布清空,然后判断当前帧数是否是每3.75秒一次,如果是,我们就将scaleVal的值增加0.1。接着,我们判断当前的秒数是否是整分钟的开始,如果是,我们就随机生成一个0-255之间的数字,并将其赋给colorVal。最后,我们使用fill()函数将colorVal作为填充颜色,并使用ellipse()函数绘制一个椭圆,椭圆的大小受到scaleVal控制。
请注意,在秒数变化的瞬间,如果ellipse大小也在此时产生变化,可能会导致画面闪屏。因此,将改变大小和改变颜色的时间间隔设置为不同的时间可以避免这个问题。