139 lines
3.1 KiB
JavaScript
139 lines
3.1 KiB
JavaScript
// Copyright John Salguero All rights Reserved
|
|
const canvas = document.getElementById("waveCanvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
const pCanvas = document.getElementById("particleCanvas");
|
|
const pctx = pCanvas.getContext("2d");
|
|
|
|
let t = 0;
|
|
|
|
// Draw the left anchored Waves
|
|
function drawLeftWaves(){
|
|
|
|
// angle controls diagonal direction
|
|
const angle = -Math.PI * t / 10 + Math.PI * 2/5; // oscilation
|
|
|
|
const cos = Math.cos(angle);
|
|
const sin = Math.sin(angle);
|
|
|
|
for (let i = 0; i < 3; i++) {
|
|
ctx.beginPath();
|
|
|
|
let offset = i * canvas.height * (5/12); // spacing
|
|
|
|
for (let x = 0; x < canvas.width; x += 10) {
|
|
// rotate coordinate system
|
|
let rx = x * cos;
|
|
let ry = x * sin;
|
|
|
|
let wave =
|
|
Math.sin((rx + ry) * 0.01 + t + i) * 40 +
|
|
Math.sin((rx + ry) * 0.005 + t * 0.5) * 25;
|
|
|
|
let y = ry + wave + offset;
|
|
|
|
ctx.lineTo(x, y);
|
|
}
|
|
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
// Draw the right anchored waves
|
|
function drawRightWaves() {
|
|
|
|
// angle controls diagonal direction
|
|
const angle = Math.PI * t / 8; // oscilation
|
|
|
|
const cos = Math.cos(angle);
|
|
const sin = Math.sin(angle);
|
|
|
|
for (let i = 0; i < 3; i++) {
|
|
ctx.beginPath();
|
|
|
|
let offset = i * canvas.height * (5/12); // spacing
|
|
|
|
for (let x = 0; x < canvas.width; x += 10) {
|
|
// rotate coordinate system
|
|
let rx = x * cos;
|
|
let ry = x * sin;
|
|
|
|
let wave =
|
|
-Math.sin((rx + ry) * 0.01 + t + i) * 40 -
|
|
Math.sin((rx + ry) * 0.005 + t * 0.5) * 25;
|
|
|
|
let y = ry + wave + offset;
|
|
|
|
ctx.lineTo(canvas.width - x, y);
|
|
}
|
|
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
// Draw the waves
|
|
function drawWaves() {
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Horizontal Waves
|
|
ctx.globalAlpha = 0.15;
|
|
ctx.strokeStyle = "#ffffff";
|
|
ctx.lineWidth = 2;
|
|
drawLeftWaves();
|
|
|
|
// Vertical Waves
|
|
ctx.globalAlpha = 0.12;
|
|
ctx.strokeStyle = "#ffffff";
|
|
ctx.lineWidth = 2;
|
|
drawRightWaves()
|
|
|
|
t += 0.01;
|
|
requestAnimationFrame(drawWaves);
|
|
}
|
|
|
|
// Draw the particles
|
|
function drawParticles() {
|
|
pctx.clearRect(0, 0, pCanvas.width, pCanvas.height);
|
|
|
|
pctx.fillStyle = "rgba(255,255,255,0.4)";
|
|
|
|
for (let p of particles) {
|
|
p.x += p.dx;
|
|
p.y += p.dy;
|
|
|
|
if (p.x < 0) p.x = pCanvas.width;
|
|
if (p.x > pCanvas.width) p.x = 0;
|
|
if (p.y < 0) p.y = pCanvas.height;
|
|
if (p.y > pCanvas.height) p.y = 0;
|
|
|
|
pctx.beginPath();
|
|
pctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
|
pctx.fill();
|
|
}
|
|
|
|
requestAnimationFrame(drawParticles);
|
|
}
|
|
|
|
// resize function
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
pCanvas.width = window.innerWidth;
|
|
pCanvas.height = window.innerHeight;
|
|
}
|
|
|
|
|
|
resize();
|
|
// Define the particles
|
|
const particles = Array.from({ length: 80 }, () => ({
|
|
x: Math.random() * window.innerWidth,
|
|
y: Math.random() * window.innerHeight,
|
|
r: Math.random() * 2 + 1,
|
|
dx: (Math.random() - 0.5) * 0.3,
|
|
dy: (Math.random() - 0.5) * 0.3
|
|
}));
|
|
drawParticles();
|
|
drawWaves();
|
|
|
|
window.addEventListener("resize", resize); |