let numberPoints;
function setup() {
var canvasDiv = document.getElementById('background'); var myCanvas = createCanvas(canvasDiv.offsetWidth, canvasDiv.offsetHeight); myCanvas.parent("background"); frameRate(60);
}
function windowResized() {
var canvasDiv = document.getElementById('background'); resizeCanvas(canvasDiv.offsetWidth, canvasDiv.offsetHeight);
}
function draw() {
windowResized(); background(51); if (width > 1000) { numberPoints = 750; } else { numberPoints = width / 2; } fill(75,75,75,255); stroke(75); beginShape(); vertex(0, height); for (var x = 0; x <= numberPoints; x++) { var nx = map(x*width/numberPoints, 0, 1000, frameCount/200+10000, 10+frameCount/200+10000); var y = (height/2 * noise(nx)) + height*2/7; vertex(x*width/numberPoints, y); } vertex(width, height); endShape(); fill(51,51,51,51); noStroke(); beginShape(); vertex(0, height); for (var x = 0; x <= numberPoints; x++) { var nx = map(x*width/numberPoints, 0, 1000, frameCount/150+1000.05, 10+frameCount/150+1000.05); var y = (height/2 * noise(nx)) + height*1/3-5; vertex(x*width/numberPoints, y); } vertex(width, height); endShape(); fill(51,121,183,255); stroke(51,121,183); beginShape(); vertex(0, height); for (var x = 0; x <= numberPoints; x++) { var nx = map(x*width/numberPoints, 0, 1000, frameCount/150+1000, 10+frameCount/150+1000); var y = (height/2 * noise(nx)) + height*1/3; vertex(x*width/numberPoints, y); } vertex(width, height); endShape(); fill(75,75,75,50); noStroke(); beginShape(); vertex(0, height); for (var x = 0; x <= numberPoints; x++) { var nx = map(x*width/numberPoints, 0, 1000, frameCount/100+0.05, 10+frameCount/100+0.05); var y = (height/2 * noise(nx)) + height*1/2-5; vertex(x*width/numberPoints, y); } vertex(width, height); endShape(); fill(255,255,255,255); stroke(255); beginShape(); vertex(0, height); for (var x = 0; x <= numberPoints; x++) { var nx = map(x*width/numberPoints, 0, 1000, frameCount/100, 10+frameCount/100); var y = (height/2 * noise(nx)) + height*1/2; vertex(x*width/numberPoints, y); } vertex(width, height); endShape(); //let fps = frameRate(); //fill(0); //stroke(0); //textSize(50); //text("FPS: " + fps.toFixed(2), 10, height - 10);
}