greg/Spazer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

This was completely AI generated

Browse Source 
It actually looks pretty neat, but it's not what I wanted
This commit is contained in:
Greg Shuflin 2025-02-12 00:06:45 -08:00
parent d66c7782a2
commit fcf1ebb528
3 changed files with 74 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/index.html
View File

@ -16,6 +16,7 @@
<li> <a href="./gravity-points/index.html">Gravity Points (mine)</a> <li> <a href="./gravity-points/index.html">Gravity Points (mine)</a>
<li> <a href="./starfield/index.html">Starfield</a> <li> <a href="./starfield/index.html">Starfield</a>
<li> <a href="./hexgrid/index.html">Hexgrid</a> <li> <a href="./hexgrid/index.html">Hexgrid</a>
<li> <a href="./psychadelic-graphics/index.html">Psychadelic Graphics</a>
</ul> </ul>
<h2>Reference Animations</h2> <h2>Reference Animations</h2>

52
src/psychadelic-graphics/app.ts Normal file
View File

@ -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();

21
src/psychadelic-graphics/index.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Psychadelic Graphics</title>
<style>
body {
margin: 0;
overflow: hidden;
background: black;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="module" src="./app.ts"></script>
</body>
</html>