Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
body { padding: 0; margin: 0; overflow: hidden; }
// Options let opts = { lines: 80, xAmp: 400, // Horizontal amplitude yAmp: 200, // Vertical amplitude width: 150, frequency: 45, // Lines for a full wave speed: 1, strokeWeight: 2 }; function preload() {} function windowResized() { resizeCanvas(windowWidth, windowHeight); } function setup() { createCanvas(windowWidth, windowHeight); let gui = new dat.GUI(); gui.add(opts, "lines", 1, 200); gui.add(opts, "xAmp", 0, 1000); gui.add(opts, "yAmp", 0, 500); gui.add(opts, "width", 0, 500); gui.add(opts, "frequency", 0, 200); gui.add(opts, "speed", 0, 5); gui.add(opts, "strokeWeight", 0, 10); } function draw() { background(0); fill(0); stroke(100); strokeWeight(opts.strokeWeight); // calc gap const gap = windowHeight / opts.lines; // Calc amount of frequency change per line const frequencyInc = TWO_PI / opts.frequency; let frequency = frameCount / (100 - opts.speed * opts.speed); let height; let xOffset; let centerX = windowWidth / 2; let fillColor = 0; for (let i = 0; i < opts.lines; i++) { beginShape(); let lineY = gap * i; // Draw left edge for fill curveVertex(0, lineY + windowHeight); curveVertex(0, lineY + windowHeight); // Start on x-axis curveVertex(0, lineY); curveVertex(0, lineY); frequency += frequencyInc; let freqVal = sin(frequency); height = map(freqVal, -1, 1, opts.yAmp * -0.5, opts.yAmp * 0.5); xOffset = map(freqVal, -1, 1, opts.xAmp * -0.5, opts.xAmp * 0.5); let leftX = centerX - opts.width / 2 + xOffset; let middleX = centerX + xOffset; let rightX = centerX + opts.width / 2 + xOffset; curveVertex(leftX - 200, lineY); curveVertex(leftX, lineY); curveVertex(middleX, lineY + height); curveVertex(rightX, lineY); curveVertex(rightX + 200, lineY); // End on x-axis curveVertex(windowWidth, lineY); curveVertex(windowWidth, lineY); // Draw right edge for fill curveVertex(windowWidth, lineY + windowHeight); curveVertex(windowWidth, lineY + windowHeight); endShape(); } }