Set up psychadelic colors canvas

2025-02-12 03:17:45 -08:00 · 2025-02-12 03:17:45 -08:00 · e1f1c69824
commit e1f1c69824
parent dfc845f794
7 changed files with 1957 additions and 1450 deletions
--- a/.parcelrc
+++ b/.parcelrc
@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{glsl,frag,vert}": ["@parcel/transformer-glsl"]
+  }
+}
--- a/package.json
+++ b/package.json
@ -6,11 +6,13 @@
 		"build": "parcel build"
 	},
 	"devDependencies": {
-		"parcel": "^2.9.3"
+		"@parcel/config-default": "^2.13.3",
+		"@parcel/transformer-glsl": "^2.13.3",
+		"parcel": "^2.13.3"
 	},
 	"dependencies": {
 		"dat.gui": "^0.7.9",
-		"konva": "^9.2.1",
+		"konva": "^9.3.18",
 		"victor": "^1.1.0"
 	}
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/index.html
+++ b/src/index.html
@ -16,6 +16,7 @@
            <li> <a href="./gravity-points/index.html">Gravity Points (mine)</a>
            <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>

--- a/src/psychadelic-graphics/app.ts
+++ b/src/psychadelic-graphics/app.ts
@ -0,0 +1,82 @@
+import psychadelicColors from './psychadelicColors.frag.glsl';
+
+
+const canvas = document.getElementById('canvas') as HTMLCanvasElement;
+const gl = canvas.getContext('webgl2')!;
+
+// 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
+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
+
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    requestAnimationFrame(draw);
+}
+
+draw(0); 
--- a/src/psychadelic-graphics/index.html
+++ b/src/psychadelic-graphics/index.html
@ -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> 
--- a/src/psychadelic-graphics/psychadelicColors.frag.glsl
+++ b/src/psychadelic-graphics/psychadelicColors.frag.glsl
@ -0,0 +1,19 @@
+#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);
+}