效果:
<script>
let xspacing = 8; // 每个水平位置的距离
let waveHeight; // 用数组保存波的高度(不完全需要)
let maxwaves = 10; // 相加的波的总数
let theta = 10;
// x 的增量值,根据周期和水平位置距离来计算
let dx = new Array(maxwaves); // 4个空值
let dx1 = new Array(maxwaves); // 4个空值
let dx2 = new Array(maxwaves); // 4个空值
// setup() 函数将在程式开始时被调用一次
function setup() {
theta=random(10)
createCanvas(windowWidth, windowHeight);
frameRate(30); //每一秒该显示的影格数 1s/30帧 帧数越高越清晰 最高,否则很卡
// colorMode(RGB, 255, 255, 255, 100);
//width=windowWidth,波的宽度,储存画布宽度的系统变量。这值是由 createCanvas() 函数的第一个参数所定义
for (let i = 0; i < maxwaves; i++) {
dx[i] = random(0.1, 0.2); //波的陡峭度
dx1[i] = random(0.03, 0.12); //波的陡峭度
dx2[i] = random(0.1, 0.15); //波的陡峭度
}
waveHeight = new Array(floor(width / xspacing));
colorMode(HSB);
}
// 在 setup() 之后被调用,持续地重复执行其中的代码
function draw() {
background("white"); //画布背景色
calcWave(dx);
renderWave(150,5);
calcWave(dx1);
renderWave(220,3);
calcWave(dx2);
renderWave(98,4);
}
function calcWave(dx) {
// theta 增量(尝试赋予 ‘角速度’ 不同的数值)
theta += 0.01 //波形滚动速度
// 所有高度设为 0
for (let i = 0; i < waveHeight.length; i++) {
waveHeight[i] = 0;
}
// 累积波的高度
for (let j = 0; j < maxwaves; j++) {
let x = theta;
for (let i = 0; i < waveHeight.length; i++) {
// 正弦余弦交替
x += dx[j];
if (j % 2 === 0) waveHeight[i] += sin(x) * 9;
else waveHeight[i] += cos(x) * 6;
x-=0.05
}
}
}
function renderWave(c,h) {
noStroke(0) //线条颜色 无
fill(c,39,90,0.3); //填充色
translate(1,35)
beginShape()
// 顶点形成的。vertex() 可用于定义点、线、三角形、四角形及多边形的顶点坐标。它只能在 beginShape() 和 endShape() 函数之间使用。
vertex(width, height);
vertex(0,height);
for (let x = 0; x < waveHeight.length; x++) {
vertex(x * (xspacing), width / h + waveHeight[x]+ h*4)
}
endShape()
}
</script>