Compare commits
No commits in common. "e1f1c69824b71297acf062b1d3bcbd45d33a9015" and "fcf1ebb528deb7679adc9fb6d920463204a07ab0" have entirely different histories.
e1f1c69824
...
fcf1ebb528
@ -1,6 +0,0 @@
|
||||
{
|
||||
"extends": "@parcel/config-default",
|
||||
"transformers": {
|
||||
"*.{glsl,frag,vert}": ["@parcel/transformer-glsl"]
|
||||
}
|
||||
}
|
||||
@ -6,13 +6,11 @@
|
||||
"build": "parcel build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@parcel/config-default": "^2.13.3",
|
||||
"@parcel/transformer-glsl": "^2.13.3",
|
||||
"parcel": "^2.13.3"
|
||||
"parcel": "^2.9.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"dat.gui": "^0.7.9",
|
||||
"konva": "^9.3.18",
|
||||
"konva": "^9.2.1",
|
||||
"victor": "^1.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
3270
pnpm-lock.yaml
generated
3270
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -17,7 +17,6 @@
|
||||
<li> <a href="./starfield/index.html">Starfield</a>
|
||||
<li> <a href="./hexgrid/index.html">Hexgrid</a>
|
||||
<li> <a href="./psychadelic-graphics/index.html">Psychadelic Graphics</a>
|
||||
<li> <a href="./psychadelic-graphics-ai-generated/index.html">Psychadelic Graphics (AI Generated)</a>
|
||||
</ul>
|
||||
|
||||
<h2>Reference Animations</h2>
|
||||
|
||||
@ -1,52 +0,0 @@
|
||||
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();
|
||||
@ -1,21 +0,0 @@
|
||||
<!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>
|
||||
@ -1,82 +1,52 @@
|
||||
import psychadelicColors from './psychadelicColors.frag.glsl';
|
||||
|
||||
|
||||
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
|
||||
const gl = canvas.getContext('webgl2')!;
|
||||
const ctx = canvas.getContext('2d')!;
|
||||
|
||||
// Basic vertex shader (just passes coordinates)
|
||||
const vertexShaderSource = `#version 300 es
|
||||
in vec4 a_position;
|
||||
void main() {
|
||||
gl_Position = a_position;
|
||||
}`;
|
||||
|
||||
// Compile shader
|
||||
function createShader(type: number, source: string) {
|
||||
const shader = gl.createShader(type)!;
|
||||
gl.shaderSource(shader, source);
|
||||
gl.compileShader(shader);
|
||||
|
||||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||||
console.error(gl.getShaderInfoLog(shader));
|
||||
gl.deleteShader(shader);
|
||||
throw new Error('Shader compilation failed');
|
||||
}
|
||||
return shader;
|
||||
}
|
||||
|
||||
// Create shader program
|
||||
const vertexShader = createShader(gl.VERTEX_SHADER, vertexShaderSource);
|
||||
const fragmentShader = createShader(gl.FRAGMENT_SHADER, psychadelicColors);
|
||||
const program = gl.createProgram()!;
|
||||
gl.attachShader(program, vertexShader);
|
||||
gl.attachShader(program, fragmentShader);
|
||||
gl.linkProgram(program);
|
||||
|
||||
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
||||
console.error(gl.getProgramInfoLog(program));
|
||||
throw new Error('Program link failed');
|
||||
}
|
||||
|
||||
// Set up a rectangle covering the entire canvas
|
||||
const positions = new Float32Array([
|
||||
-1, -1, // bottom left
|
||||
1, -1, // bottom right
|
||||
-1, 1, // top left
|
||||
1, 1, // top right
|
||||
]);
|
||||
const positionBuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
|
||||
|
||||
// Set up vertex attributes
|
||||
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
|
||||
gl.enableVertexAttribArray(positionAttributeLocation);
|
||||
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
|
||||
|
||||
// Get uniform locations
|
||||
const timeUniformLocation = gl.getUniformLocation(program, 'u_time');
|
||||
const canvasWidthLocation = gl.getUniformLocation(program, 'u_canvasWidth');
|
||||
const canvasHeightLocation = gl.getUniformLocation(program, 'u_canvasHeight');
|
||||
|
||||
// Set up resize handler
|
||||
// Set canvas size to window size
|
||||
function resize() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
gl.viewport(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
window.addEventListener('resize', resize);
|
||||
resize();
|
||||
|
||||
// Animation loop
|
||||
function draw(time: number) {
|
||||
gl.useProgram(program);
|
||||
gl.uniform1f(timeUniformLocation, time * 0.001); // Convert to seconds
|
||||
gl.uniform1f(canvasWidthLocation, canvas.width); // Convert to seconds
|
||||
gl.uniform1f(canvasHeightLocation, canvas.height); // Convert to seconds
|
||||
// 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;
|
||||
}
|
||||
|
||||
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
draw(0);
|
||||
draw();
|
||||
@ -1,19 +0,0 @@
|
||||
#version 300 es
|
||||
precision highp float;
|
||||
|
||||
uniform float u_time;
|
||||
|
||||
uniform float u_canvasWidth;
|
||||
uniform float u_canvasHeight;
|
||||
|
||||
|
||||
out vec4 fragColor;
|
||||
|
||||
void main() {
|
||||
vec2 uv = gl_FragCoord.xy/vec2(u_canvasWidth, u_canvasHeight);
|
||||
// Example: Create a moving color pattern
|
||||
fragColor = vec4(sin(uv.x + u_time) * 0.5 + 0.5,
|
||||
sin(uv.y + u_time) * 0.5 + 0.5,
|
||||
sin(u_time) * 0.5 + 0.5,
|
||||
1.0);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user