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

Set up psychadelic colors canvas

Browse Source
This commit is contained in:
Greg Shuflin 2025-02-12 03:17:45 -08:00
parent dfc845f794
commit e1f1c69824
7 changed files with 1957 additions and 1450 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.parcelrc Normal file
View File

@ -0,0 +1,6 @@
{
"extends": "@parcel/config-default",
"transformers": {
"*.{glsl,frag,vert}": ["@parcel/transformer-glsl"]
}
}

6
package.json
View File

@ -6,11 +6,13 @@
"build": "parcel build" "build": "parcel build"
}, },
"devDependencies": { "devDependencies": {
"parcel": "^2.9.3" "@parcel/config-default": "^2.13.3",
"@parcel/transformer-glsl": "^2.13.3",
"parcel": "^2.13.3"
}, },
"dependencies": { "dependencies": {
"dat.gui": "^0.7.9", "dat.gui": "^0.7.9",
"konva": "^9.2.1", "konva": "^9.3.18",
"victor": "^1.1.0" "victor": "^1.1.0"
} }
} }

3258
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

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>
<li> <a href="./psychadelic-graphics-ai-generated/index.html">Psychadelic Graphics (AI Generated)</a> <li> <a href="./psychadelic-graphics-ai-generated/index.html">Psychadelic Graphics (AI Generated)</a>
</ul> </ul>

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

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

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>

19
src/psychadelic-graphics/psychadelicColors.frag.glsl Normal file
View File

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