From fcf1ebb528deb7679adc9fb6d920463204a07ab0 Mon Sep 17 00:00:00 2001 From: Greg Shuflin Date: Wed, 12 Feb 2025 00:06:45 -0800 Subject: [PATCH] This was completely AI generated It actually looks pretty neat, but it's not what I wanted --- src/index.html | 1 + src/psychadelic-graphics/app.ts | 52 +++++++++++++++++++++++++++++ src/psychadelic-graphics/index.html | 21 ++++++++++++ 3 files changed, 74 insertions(+) create mode 100644 src/psychadelic-graphics/app.ts create mode 100644 src/psychadelic-graphics/index.html diff --git a/src/index.html b/src/index.html index e806d51..b17c04e 100644 --- a/src/index.html +++ b/src/index.html @@ -16,6 +16,7 @@
  • Gravity Points (mine)
  • Starfield
  • Hexgrid +
  • Psychadelic Graphics

    Reference Animations

    diff --git a/src/psychadelic-graphics/app.ts b/src/psychadelic-graphics/app.ts new file mode 100644 index 0000000..a205e32 --- /dev/null +++ b/src/psychadelic-graphics/app.ts @@ -0,0 +1,52 @@ +const canvas = document.getElementById('canvas') as HTMLCanvasElement; +const ctx = canvas.getContext('2d')!; + +// Set canvas size to window size +function resize() { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; +} +window.addEventListener('resize', resize); +resize(); + +// Animation variables +let time = 0; +const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF']; +let colorIndex = 0; + +function draw() { + time += 0.02; + + // Create a gradient background that shifts over time + const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height); + gradient.addColorStop(0, colors[(colorIndex) % colors.length]); + gradient.addColorStop(0.5, colors[(colorIndex + 2) % colors.length]); + gradient.addColorStop(1, colors[(colorIndex + 4) % colors.length]); + + ctx.fillStyle = gradient; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + // Draw psychedelic circles + for (let i = 0; i < 10; i++) { + const x = canvas.width / 2 + Math.cos(time + i) * 100; + const y = canvas.height / 2 + Math.sin(time * 1.5 + i) * 100; + const radius = 50 + Math.sin(time * 2 + i) * 30; + + ctx.beginPath(); + ctx.arc(x, y, radius, 0, Math.PI * 2); + ctx.fillStyle = colors[(colorIndex + i) % colors.length]; + ctx.fill(); + ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)'; + ctx.lineWidth = 2; + ctx.stroke(); + } + + // Slowly cycle through colors + if (Math.floor(time * 10) % 20 === 0) { + colorIndex = (colorIndex + 1) % colors.length; + } + + requestAnimationFrame(draw); +} + +draw(); \ No newline at end of file diff --git a/src/psychadelic-graphics/index.html b/src/psychadelic-graphics/index.html new file mode 100644 index 0000000..49768ae --- /dev/null +++ b/src/psychadelic-graphics/index.html @@ -0,0 +1,21 @@ + + + + + Psychadelic Graphics + + + + + + + \ No newline at end of file