|
|
@@ -0,0 +1,1843 @@
|
|
|
+---
|
|
|
+name: genart-ops
|
|
|
+description: "Generative art programming - three.js scenes, p5.js sketches, SVG generation, GLSL shaders, procedural algorithms, and color for creative coding. Use for: generative art, creative coding, three.js, p5.js, SVG, GLSL, shader, noise, perlin, simplex, flow field, particle system, SDF, ray marching, procedural, L-system, voronoi, delaunay, cellular automata, wave function collapse, instanced mesh, post-processing, bloom, WebGL, canvas, fragment shader, vertex shader, FBM, domain warping."
|
|
|
+license: MIT
|
|
|
+allowed-tools: "Read Write Bash"
|
|
|
+metadata:
|
|
|
+ author: claude-mods
|
|
|
+ related-skills: color-ops, javascript-ops, typescript-ops
|
|
|
+---
|
|
|
+
|
|
|
+# Generative Art Operations
|
|
|
+
|
|
|
+Practical patterns for creative coding and generative art. Covers three.js, p5.js, SVG generation, GLSL shaders, procedural algorithms, and color theory for computational aesthetics.
|
|
|
+
|
|
|
+> Color-ops handles CSS color, accessibility, and design tokens. This skill focuses on generative/procedural color techniques (palette algorithms, shader color, gradient interpolation in perceptual space).
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 1. Three.js -- Scene Scaffolding (2026)
|
|
|
+
|
|
|
+### Minimal Scene
|
|
|
+
|
|
|
+```javascript
|
|
|
+import * as THREE from 'three';
|
|
|
+
|
|
|
+const scene = new THREE.Scene();
|
|
|
+const camera = new THREE.PerspectiveCamera(
|
|
|
+ 75, // fov
|
|
|
+ window.innerWidth / window.innerHeight, // aspect
|
|
|
+ 0.1, // near
|
|
|
+ 1000 // far
|
|
|
+);
|
|
|
+camera.position.set(0, 2, 5);
|
|
|
+
|
|
|
+const renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
|
+renderer.setPixelRatio(window.devicePixelRatio);
|
|
|
+renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
|
|
+document.body.appendChild(renderer.domElement);
|
|
|
+
|
|
|
+// --- Responsive ---
|
|
|
+window.addEventListener('resize', () => {
|
|
|
+ camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
+ renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
+});
|
|
|
+```
|
|
|
+
|
|
|
+### Animation Loop (Timer-based, 2026 pattern)
|
|
|
+
|
|
|
+```javascript
|
|
|
+const timer = new THREE.Timer();
|
|
|
+timer.connect(document); // auto-pauses on tab switch
|
|
|
+
|
|
|
+renderer.setAnimationLoop(() => {
|
|
|
+ timer.update();
|
|
|
+ const delta = timer.getDelta();
|
|
|
+ const elapsed = timer.getElapsed();
|
|
|
+
|
|
|
+ // animate objects using delta/elapsed
|
|
|
+ mesh.rotation.y += delta;
|
|
|
+
|
|
|
+ renderer.render(scene, camera);
|
|
|
+});
|
|
|
+```
|
|
|
+
|
|
|
+### OrbitControls
|
|
|
+
|
|
|
+```javascript
|
|
|
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
|
+
|
|
|
+const controls = new OrbitControls(camera, renderer.domElement);
|
|
|
+controls.enableDamping = true;
|
|
|
+controls.dampingFactor = 0.05;
|
|
|
+controls.maxPolarAngle = Math.PI * 0.5;
|
|
|
+controls.minDistance = 2;
|
|
|
+controls.maxDistance = 20;
|
|
|
+
|
|
|
+// Must call update in animation loop when damping enabled
|
|
|
+renderer.setAnimationLoop(() => {
|
|
|
+ controls.update();
|
|
|
+ renderer.render(scene, camera);
|
|
|
+});
|
|
|
+```
|
|
|
+
|
|
|
+### Lighting Rig (Three-point)
|
|
|
+
|
|
|
+```javascript
|
|
|
+// Key light
|
|
|
+const key = new THREE.DirectionalLight(0xffffff, 1.5);
|
|
|
+key.position.set(5, 5, 5);
|
|
|
+scene.add(key);
|
|
|
+
|
|
|
+// Fill light (softer, opposite side)
|
|
|
+const fill = new THREE.DirectionalLight(0x8888ff, 0.5);
|
|
|
+fill.position.set(-5, 3, -5);
|
|
|
+scene.add(fill);
|
|
|
+
|
|
|
+// Rim / back light
|
|
|
+const rim = new THREE.DirectionalLight(0xffffff, 0.8);
|
|
|
+rim.position.set(0, 5, -10);
|
|
|
+scene.add(rim);
|
|
|
+
|
|
|
+// Ambient baseline
|
|
|
+scene.add(new THREE.AmbientLight(0x404040, 0.5));
|
|
|
+```
|
|
|
+
|
|
|
+### Post-Processing Pipeline (Bloom)
|
|
|
+
|
|
|
+```javascript
|
|
|
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
|
|
|
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
|
|
|
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
|
|
|
+import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
|
|
|
+
|
|
|
+const composer = new EffectComposer(renderer);
|
|
|
+composer.addPass(new RenderPass(scene, camera));
|
|
|
+
|
|
|
+const bloomPass = new UnrealBloomPass(
|
|
|
+ new THREE.Vector2(window.innerWidth, window.innerHeight),
|
|
|
+ 1.5, // strength
|
|
|
+ 0.4, // radius
|
|
|
+ 0.85 // threshold
|
|
|
+);
|
|
|
+composer.addPass(bloomPass);
|
|
|
+composer.addPass(new OutputPass()); // always last -- handles tone mapping
|
|
|
+
|
|
|
+// In animation loop: composer.render() instead of renderer.render()
|
|
|
+// On resize: composer.setSize(width, height)
|
|
|
+```
|
|
|
+
|
|
|
+### InstancedMesh (Particle Systems / Mass Geometry)
|
|
|
+
|
|
|
+```javascript
|
|
|
+const geometry = new THREE.SphereGeometry(0.05, 8, 8);
|
|
|
+const material = new THREE.MeshStandardMaterial({ color: 0xff6600 });
|
|
|
+const COUNT = 10000;
|
|
|
+
|
|
|
+const mesh = new THREE.InstancedMesh(geometry, material, COUNT);
|
|
|
+scene.add(mesh);
|
|
|
+
|
|
|
+const dummy = new THREE.Object3D();
|
|
|
+const matrix = new THREE.Matrix4();
|
|
|
+
|
|
|
+for (let i = 0; i < COUNT; i++) {
|
|
|
+ dummy.position.set(
|
|
|
+ (Math.random() - 0.5) * 40,
|
|
|
+ (Math.random() - 0.5) * 40,
|
|
|
+ (Math.random() - 0.5) * 40
|
|
|
+ );
|
|
|
+ dummy.updateMatrix();
|
|
|
+ mesh.setMatrixAt(i, dummy.matrix);
|
|
|
+}
|
|
|
+mesh.instanceMatrix.needsUpdate = true;
|
|
|
+
|
|
|
+// Per-instance color
|
|
|
+const color = new THREE.Color();
|
|
|
+for (let i = 0; i < COUNT; i++) {
|
|
|
+ color.setHSL(Math.random(), 0.8, 0.6);
|
|
|
+ mesh.setColorAt(i, color);
|
|
|
+}
|
|
|
+mesh.instanceColor.needsUpdate = true;
|
|
|
+
|
|
|
+// Animate instances
|
|
|
+function animateInstances(elapsed) {
|
|
|
+ for (let i = 0; i < COUNT; i++) {
|
|
|
+ mesh.getMatrixAt(i, matrix);
|
|
|
+ matrix.decompose(dummy.position, dummy.quaternion, dummy.scale);
|
|
|
+ dummy.position.y += Math.sin(elapsed + i * 0.1) * 0.001;
|
|
|
+ dummy.updateMatrix();
|
|
|
+ mesh.setMatrixAt(i, dummy.matrix);
|
|
|
+ }
|
|
|
+ mesh.instanceMatrix.needsUpdate = true;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Custom ShaderMaterial
|
|
|
+
|
|
|
+```javascript
|
|
|
+const shaderMaterial = new THREE.ShaderMaterial({
|
|
|
+ uniforms: {
|
|
|
+ uTime: { value: 0 },
|
|
|
+ uResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
|
|
|
+ uMouse: { value: new THREE.Vector2(0, 0) },
|
|
|
+ uColor: { value: new THREE.Color(0x3b82f6) },
|
|
|
+ },
|
|
|
+ vertexShader: /* glsl */ `
|
|
|
+ varying vec2 vUv;
|
|
|
+ varying vec3 vPosition;
|
|
|
+ uniform float uTime;
|
|
|
+
|
|
|
+ void main() {
|
|
|
+ vUv = uv;
|
|
|
+ vPosition = position;
|
|
|
+ vec3 pos = position;
|
|
|
+ pos.z += sin(pos.x * 3.0 + uTime) * 0.2;
|
|
|
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
|
|
|
+ }
|
|
|
+ `,
|
|
|
+ fragmentShader: /* glsl */ `
|
|
|
+ uniform float uTime;
|
|
|
+ uniform vec2 uResolution;
|
|
|
+ uniform vec3 uColor;
|
|
|
+ varying vec2 vUv;
|
|
|
+
|
|
|
+ void main() {
|
|
|
+ vec3 col = uColor * (0.5 + 0.5 * sin(vUv.x * 10.0 + uTime));
|
|
|
+ gl_FragColor = vec4(col, 1.0);
|
|
|
+ }
|
|
|
+ `,
|
|
|
+ side: THREE.DoubleSide,
|
|
|
+});
|
|
|
+
|
|
|
+// Update in animation loop:
|
|
|
+shaderMaterial.uniforms.uTime.value = elapsed;
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 2. p5.js -- Sketch Patterns (2026)
|
|
|
+
|
|
|
+### Global Mode (Quick Sketching)
|
|
|
+
|
|
|
+```javascript
|
|
|
+function setup() {
|
|
|
+ createCanvas(800, 800);
|
|
|
+ colorMode(HSB, 360, 100, 100, 100);
|
|
|
+ noStroke();
|
|
|
+}
|
|
|
+
|
|
|
+function draw() {
|
|
|
+ background(0, 0, 10);
|
|
|
+ for (let i = 0; i < 100; i++) {
|
|
|
+ let x = random(width);
|
|
|
+ let y = random(height);
|
|
|
+ fill(random(360), 80, 90, 50);
|
|
|
+ circle(x, y, random(5, 30));
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Instance Mode (Multiple Sketches / Modules)
|
|
|
+
|
|
|
+```javascript
|
|
|
+const sketch = (p) => {
|
|
|
+ let particles = [];
|
|
|
+
|
|
|
+ p.setup = () => {
|
|
|
+ p.createCanvas(800, 800);
|
|
|
+ p.colorMode(p.HSB, 360, 100, 100, 100);
|
|
|
+ for (let i = 0; i < 200; i++) {
|
|
|
+ particles.push({
|
|
|
+ x: p.random(p.width),
|
|
|
+ y: p.random(p.height),
|
|
|
+ vx: p.random(-1, 1),
|
|
|
+ vy: p.random(-1, 1),
|
|
|
+ hue: p.random(360),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ p.draw = () => {
|
|
|
+ p.background(0, 0, 5, 10); // trailing fade
|
|
|
+ for (let pt of particles) {
|
|
|
+ pt.x += pt.vx;
|
|
|
+ pt.y += pt.vy;
|
|
|
+ if (pt.x < 0 || pt.x > p.width) pt.vx *= -1;
|
|
|
+ if (pt.y < 0 || pt.y > p.height) pt.vy *= -1;
|
|
|
+ p.fill(pt.hue, 80, 90, 60);
|
|
|
+ p.noStroke();
|
|
|
+ p.circle(pt.x, pt.y, 6);
|
|
|
+ }
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+new p5(sketch, document.getElementById('canvas-container'));
|
|
|
+```
|
|
|
+
|
|
|
+### WebGL Mode
|
|
|
+
|
|
|
+```javascript
|
|
|
+function setup() {
|
|
|
+ createCanvas(800, 800, WEBGL);
|
|
|
+}
|
|
|
+
|
|
|
+function draw() {
|
|
|
+ background(0);
|
|
|
+ orbitControl();
|
|
|
+ ambientLight(60);
|
|
|
+ directionalLight(255, 255, 255, 0.5, -1, -0.5);
|
|
|
+
|
|
|
+ push();
|
|
|
+ rotateX(frameCount * 0.01);
|
|
|
+ rotateY(frameCount * 0.013);
|
|
|
+ normalMaterial();
|
|
|
+ torus(150, 50, 24, 16);
|
|
|
+ pop();
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Custom Shaders in p5.js
|
|
|
+
|
|
|
+```javascript
|
|
|
+let myShader;
|
|
|
+
|
|
|
+const vertSrc = `
|
|
|
+ precision highp float;
|
|
|
+ uniform mat4 uModelViewMatrix;
|
|
|
+ uniform mat4 uProjectionMatrix;
|
|
|
+ attribute vec3 aPosition;
|
|
|
+ attribute vec2 aTexCoord;
|
|
|
+ varying vec2 vTexCoord;
|
|
|
+
|
|
|
+ void main() {
|
|
|
+ vTexCoord = aTexCoord;
|
|
|
+ vec4 positionVec4 = vec4(aPosition, 1.0);
|
|
|
+ gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
|
|
|
+ }
|
|
|
+`;
|
|
|
+
|
|
|
+const fragSrc = `
|
|
|
+ precision highp float;
|
|
|
+ uniform float uTime;
|
|
|
+ uniform vec2 uResolution;
|
|
|
+ varying vec2 vTexCoord;
|
|
|
+
|
|
|
+ void main() {
|
|
|
+ vec2 uv = vTexCoord;
|
|
|
+ vec3 col = 0.5 + 0.5 * cos(uTime + uv.xyx + vec3(0, 2, 4));
|
|
|
+ gl_FragColor = vec4(col, 1.0);
|
|
|
+ }
|
|
|
+`;
|
|
|
+
|
|
|
+function setup() {
|
|
|
+ createCanvas(800, 800, WEBGL);
|
|
|
+ myShader = createShader(vertSrc, fragSrc);
|
|
|
+}
|
|
|
+
|
|
|
+function draw() {
|
|
|
+ shader(myShader);
|
|
|
+ myShader.setUniform('uTime', millis() / 1000.0);
|
|
|
+ myShader.setUniform('uResolution', [width, height]);
|
|
|
+ rect(0, 0, width, height);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Pixel Manipulation
|
|
|
+
|
|
|
+```javascript
|
|
|
+function draw() {
|
|
|
+ loadPixels();
|
|
|
+ for (let x = 0; x < width; x++) {
|
|
|
+ for (let y = 0; y < height; y++) {
|
|
|
+ let idx = (x + y * width) * 4;
|
|
|
+ let n = noise(x * 0.01, y * 0.01, frameCount * 0.01);
|
|
|
+ pixels[idx] = n * 255; // R
|
|
|
+ pixels[idx + 1] = n * 128; // G
|
|
|
+ pixels[idx + 2] = 255 - n*255; // B
|
|
|
+ pixels[idx + 3] = 255; // A
|
|
|
+ }
|
|
|
+ }
|
|
|
+ updatePixels();
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Recording / Export
|
|
|
+
|
|
|
+```javascript
|
|
|
+// Frame export (PNG sequence)
|
|
|
+function draw() {
|
|
|
+ // ... drawing code ...
|
|
|
+ if (frameCount <= 300) {
|
|
|
+ saveCanvas('frame-' + nf(frameCount, 4), 'png');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// SVG export (requires p5.js-svg library)
|
|
|
+function setup() {
|
|
|
+ createCanvas(800, 800, SVG);
|
|
|
+}
|
|
|
+function draw() {
|
|
|
+ // ... vector drawing ...
|
|
|
+ save('artwork.svg');
|
|
|
+ noLoop();
|
|
|
+}
|
|
|
+
|
|
|
+// With canvas-sketch (standalone, not p5)
|
|
|
+// npm install canvas-sketch canvas-sketch-cli -g
|
|
|
+const canvasSketch = require('canvas-sketch');
|
|
|
+
|
|
|
+const settings = {
|
|
|
+ dimensions: [2048, 2048],
|
|
|
+ animate: true,
|
|
|
+ fps: 30,
|
|
|
+ duration: 5,
|
|
|
+ suffix: '-artwork',
|
|
|
+};
|
|
|
+
|
|
|
+const sketch = () => {
|
|
|
+ return ({ context, width, height, time }) => {
|
|
|
+ const ctx = context;
|
|
|
+ ctx.fillStyle = '#000';
|
|
|
+ ctx.fillRect(0, 0, width, height);
|
|
|
+ // ... drawing with Canvas 2D API ...
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+canvasSketch(sketch, settings);
|
|
|
+// Export: Ctrl+Shift+S for PNG, or --stream flag for MP4
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 3. SVG Generation
|
|
|
+
|
|
|
+### Programmatic SVG in JavaScript
|
|
|
+
|
|
|
+```javascript
|
|
|
+function createSVG(width, height) {
|
|
|
+ const NS = 'http://www.w3.org/2000/svg';
|
|
|
+ const svg = document.createElementNS(NS, 'svg');
|
|
|
+ svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
|
|
|
+ svg.setAttribute('xmlns', NS);
|
|
|
+ return svg;
|
|
|
+}
|
|
|
+
|
|
|
+function addPath(svg, d, attrs = {}) {
|
|
|
+ const NS = 'http://www.w3.org/2000/svg';
|
|
|
+ const path = document.createElementNS(NS, 'path');
|
|
|
+ path.setAttribute('d', d);
|
|
|
+ for (const [k, v] of Object.entries(attrs)) {
|
|
|
+ path.setAttribute(k, v);
|
|
|
+ }
|
|
|
+ svg.appendChild(path);
|
|
|
+ return path;
|
|
|
+}
|
|
|
+
|
|
|
+// Serialize to string
|
|
|
+function svgToString(svg) {
|
|
|
+ return new XMLSerializer().serializeToString(svg);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### SVG Path Commands Reference
|
|
|
+
|
|
|
+| Command | Name | Syntax | Notes |
|
|
|
+|---------|------|--------|-------|
|
|
|
+| `M x y` | Move to | Absolute | Start new subpath |
|
|
|
+| `m dx dy` | Move to | Relative | |
|
|
|
+| `L x y` | Line to | Absolute | Straight line |
|
|
|
+| `l dx dy` | Line to | Relative | |
|
|
|
+| `H x` | Horizontal line | Absolute | |
|
|
|
+| `h dx` | Horizontal line | Relative | |
|
|
|
+| `V y` | Vertical line | Absolute | |
|
|
|
+| `v dy` | Vertical line | Relative | |
|
|
|
+| `C x1 y1 x2 y2 x y` | Cubic bezier | 2 control points + endpoint |
|
|
|
+| `c dx1 dy1 dx2 dy2 dx dy` | Cubic bezier | Relative |
|
|
|
+| `S x2 y2 x y` | Smooth cubic | Reflects previous control point |
|
|
|
+| `Q x1 y1 x y` | Quadratic bezier | 1 control point + endpoint |
|
|
|
+| `T x y` | Smooth quadratic | Reflects previous control point |
|
|
|
+| `A rx ry rot large-arc sweep x y` | Arc | Elliptical arc |
|
|
|
+| `Z` | Close path | Back to subpath start |
|
|
|
+
|
|
|
+### Generative SVG Patterns
|
|
|
+
|
|
|
+```javascript
|
|
|
+// Generative organic blob
|
|
|
+function blob(cx, cy, radius, points = 8, variance = 0.3) {
|
|
|
+ const pts = [];
|
|
|
+ for (let i = 0; i < points; i++) {
|
|
|
+ const angle = (i / points) * Math.PI * 2;
|
|
|
+ const r = radius * (1 + (Math.random() - 0.5) * variance);
|
|
|
+ pts.push([
|
|
|
+ cx + Math.cos(angle) * r,
|
|
|
+ cy + Math.sin(angle) * r,
|
|
|
+ ]);
|
|
|
+ }
|
|
|
+ return smoothClosedPath(pts);
|
|
|
+}
|
|
|
+
|
|
|
+// Convert points to smooth cubic bezier closed path
|
|
|
+function smoothClosedPath(points) {
|
|
|
+ const n = points.length;
|
|
|
+ let d = `M ${points[0][0]} ${points[0][1]}`;
|
|
|
+ for (let i = 0; i < n; i++) {
|
|
|
+ const curr = points[i];
|
|
|
+ const next = points[(i + 1) % n];
|
|
|
+ const prev = points[(i - 1 + n) % n];
|
|
|
+ const next2 = points[(i + 2) % n];
|
|
|
+
|
|
|
+ const cp1x = curr[0] + (next[0] - prev[0]) / 6;
|
|
|
+ const cp1y = curr[1] + (next[1] - prev[1]) / 6;
|
|
|
+ const cp2x = next[0] - (next2[0] - curr[0]) / 6;
|
|
|
+ const cp2y = next[1] - (next2[1] - curr[1]) / 6;
|
|
|
+
|
|
|
+ d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${next[0]} ${next[1]}`;
|
|
|
+ }
|
|
|
+ return d + ' Z';
|
|
|
+}
|
|
|
+
|
|
|
+// Generative line hatching
|
|
|
+function hatchRect(x, y, w, h, angle, spacing) {
|
|
|
+ const paths = [];
|
|
|
+ const cos = Math.cos(angle);
|
|
|
+ const sin = Math.sin(angle);
|
|
|
+ const diag = Math.sqrt(w * w + h * h);
|
|
|
+
|
|
|
+ for (let d = -diag; d < diag; d += spacing) {
|
|
|
+ const x1 = x + d * cos - diag * sin;
|
|
|
+ const y1 = y + d * sin + diag * cos;
|
|
|
+ const x2 = x + d * cos + diag * sin;
|
|
|
+ const y2 = y + d * sin - diag * cos;
|
|
|
+ // Clip to rect bounds and add to paths
|
|
|
+ paths.push(`M ${x1} ${y1} L ${x2} ${y2}`);
|
|
|
+ }
|
|
|
+ return paths.join(' ');
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### SVG Filters for Generative Effects
|
|
|
+
|
|
|
+```xml
|
|
|
+<!-- Organic texture -->
|
|
|
+<filter id="organic">
|
|
|
+ <feTurbulence type="fractalNoise" baseFrequency="0.02"
|
|
|
+ numOctaves="4" seed="42" result="noise"/>
|
|
|
+ <feDisplacementMap in="SourceGraphic" in2="noise"
|
|
|
+ scale="20" xChannelSelector="R" yChannelSelector="G"/>
|
|
|
+</filter>
|
|
|
+
|
|
|
+<!-- Glow effect -->
|
|
|
+<filter id="glow">
|
|
|
+ <feGaussianBlur stdDeviation="4" result="blur"/>
|
|
|
+ <feMerge>
|
|
|
+ <feMergeNode in="blur"/>
|
|
|
+ <feMergeNode in="SourceGraphic"/>
|
|
|
+ </feMerge>
|
|
|
+</filter>
|
|
|
+
|
|
|
+<!-- Paper texture -->
|
|
|
+<filter id="paper">
|
|
|
+ <feTurbulence type="fractalNoise" baseFrequency="0.04"
|
|
|
+ numOctaves="5" result="noise"/>
|
|
|
+ <feDiffuseLighting in="noise" lighting-color="white"
|
|
|
+ surfaceScale="2" result="lit">
|
|
|
+ <feDistantLight azimuth="45" elevation="60"/>
|
|
|
+ </feDiffuseLighting>
|
|
|
+ <feComposite in="SourceGraphic" in2="lit"
|
|
|
+ operator="multiply"/>
|
|
|
+</filter>
|
|
|
+
|
|
|
+<!-- Eroded / distressed edges -->
|
|
|
+<filter id="eroded">
|
|
|
+ <feTurbulence type="turbulence" baseFrequency="0.05"
|
|
|
+ numOctaves="2" result="noise"/>
|
|
|
+ <feDisplacementMap in="SourceGraphic" in2="noise"
|
|
|
+ scale="6" xChannelSelector="R" yChannelSelector="G"
|
|
|
+ result="displaced"/>
|
|
|
+ <feGaussianBlur in="displaced" stdDeviation="0.5"/>
|
|
|
+</filter>
|
|
|
+
|
|
|
+<!-- Usage -->
|
|
|
+<path d="..." filter="url(#organic)" fill="oklch(0.7 0.15 200)"/>
|
|
|
+```
|
|
|
+
|
|
|
+### SVG Animation
|
|
|
+
|
|
|
+```xml
|
|
|
+<!-- SMIL animation (native SVG) -->
|
|
|
+<circle cx="50" cy="50" r="20" fill="oklch(0.7 0.2 250)">
|
|
|
+ <animate attributeName="r" from="20" to="40"
|
|
|
+ dur="2s" repeatCount="indefinite"
|
|
|
+ values="20;40;20" keyTimes="0;0.5;1"/>
|
|
|
+ <animate attributeName="fill-opacity" from="1" to="0.3"
|
|
|
+ dur="2s" repeatCount="indefinite"/>
|
|
|
+</circle>
|
|
|
+
|
|
|
+<!-- Morph path -->
|
|
|
+<path fill="oklch(0.6 0.18 150)">
|
|
|
+ <animate attributeName="d" dur="4s" repeatCount="indefinite"
|
|
|
+ values="M10,80 Q52,10 95,80 T180,80;
|
|
|
+ M10,80 Q52,50 95,20 T180,80;
|
|
|
+ M10,80 Q52,10 95,80 T180,80"/>
|
|
|
+</path>
|
|
|
+
|
|
|
+<!-- CSS animation on SVG -->
|
|
|
+<style>
|
|
|
+ @keyframes dash {
|
|
|
+ to { stroke-dashoffset: 0; }
|
|
|
+ }
|
|
|
+ .draw-in {
|
|
|
+ stroke-dasharray: 1000;
|
|
|
+ stroke-dashoffset: 1000;
|
|
|
+ animation: dash 3s ease-in-out forwards;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<path class="draw-in" d="..." stroke="#000" fill="none"/>
|
|
|
+```
|
|
|
+
|
|
|
+### SVG Optimization (SVGO)
|
|
|
+
|
|
|
+```bash
|
|
|
+# Install
|
|
|
+npm install -g svgo
|
|
|
+
|
|
|
+# Optimize single file
|
|
|
+svgo input.svg -o output.svg
|
|
|
+
|
|
|
+# Batch optimize
|
|
|
+svgo -f ./input-dir -o ./output-dir
|
|
|
+
|
|
|
+# Preserve viewBox, remove dimensions (responsive)
|
|
|
+svgo input.svg -o output.svg --config='{ "plugins": [
|
|
|
+ { "name": "removeDimensions" },
|
|
|
+ { "name": "removeViewBox", "active": false }
|
|
|
+]}'
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 4. GLSL Shaders
|
|
|
+
|
|
|
+### Shader Boilerplate (Standalone WebGL)
|
|
|
+
|
|
|
+```glsl
|
|
|
+// --- Vertex Shader ---
|
|
|
+attribute vec2 aPosition;
|
|
|
+varying vec2 vUv;
|
|
|
+
|
|
|
+void main() {
|
|
|
+ vUv = aPosition * 0.5 + 0.5;
|
|
|
+ gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
|
+}
|
|
|
+
|
|
|
+// --- Fragment Shader ---
|
|
|
+precision highp float;
|
|
|
+uniform float uTime;
|
|
|
+uniform vec2 uResolution;
|
|
|
+uniform vec2 uMouse;
|
|
|
+varying vec2 vUv;
|
|
|
+
|
|
|
+void main() {
|
|
|
+ vec2 uv = gl_FragCoord.xy / uResolution;
|
|
|
+ // ... shader logic ...
|
|
|
+ gl_FragColor = vec4(col, 1.0);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Common Uniforms
|
|
|
+
|
|
|
+```glsl
|
|
|
+uniform float uTime; // seconds elapsed
|
|
|
+uniform vec2 uResolution; // canvas pixel dimensions
|
|
|
+uniform vec2 uMouse; // mouse position (normalized or pixels)
|
|
|
+uniform float uFrame; // frame counter
|
|
|
+uniform sampler2D uTexture; // texture input
|
|
|
+```
|
|
|
+
|
|
|
+### Hash / Random Functions
|
|
|
+
|
|
|
+```glsl
|
|
|
+// 1D hash
|
|
|
+float hash(float n) {
|
|
|
+ return fract(sin(n) * 43758.5453123);
|
|
|
+}
|
|
|
+
|
|
|
+// 2D hash
|
|
|
+float hash(vec2 p) {
|
|
|
+ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
|
|
|
+}
|
|
|
+
|
|
|
+// 2D -> 2D hash
|
|
|
+vec2 hash2(vec2 p) {
|
|
|
+ p = vec2(dot(p, vec2(127.1, 311.7)),
|
|
|
+ dot(p, vec2(269.5, 183.3)));
|
|
|
+ return fract(sin(p) * 43758.5453123);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Value Noise
|
|
|
+
|
|
|
+```glsl
|
|
|
+float valueNoise(vec2 p) {
|
|
|
+ vec2 i = floor(p);
|
|
|
+ vec2 f = fract(p);
|
|
|
+ vec2 u = f * f * (3.0 - 2.0 * f); // smoothstep
|
|
|
+
|
|
|
+ return mix(
|
|
|
+ mix(hash(i + vec2(0, 0)), hash(i + vec2(1, 0)), u.x),
|
|
|
+ mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), u.x),
|
|
|
+ u.y
|
|
|
+ );
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Simplex Noise (2D)
|
|
|
+
|
|
|
+```glsl
|
|
|
+// Credit: Stefan Gustavson, Ian McEwan (MIT)
|
|
|
+vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
|
|
|
+vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
|
|
|
+vec3 permute(vec3 x) { return mod289(((x * 34.0) + 1.0) * x); }
|
|
|
+
|
|
|
+float snoise(vec2 v) {
|
|
|
+ const vec4 C = vec4(
|
|
|
+ 0.211324865405187, // (3.0-sqrt(3.0))/6.0
|
|
|
+ 0.366025403784439, // 0.5*(sqrt(3.0)-1.0)
|
|
|
+ -0.577350269189626, // -1.0 + 2.0 * C.x
|
|
|
+ 0.024390243902439); // 1.0 / 41.0
|
|
|
+
|
|
|
+ vec2 i = floor(v + dot(v, C.yy));
|
|
|
+ vec2 x0 = v - i + dot(i, C.xx);
|
|
|
+
|
|
|
+ vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
|
|
|
+ vec4 x12 = x0.xyxy + C.xxzz;
|
|
|
+ x12.xy -= i1;
|
|
|
+
|
|
|
+ i = mod289(i);
|
|
|
+ vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))
|
|
|
+ + i.x + vec3(0.0, i1.x, 1.0));
|
|
|
+
|
|
|
+ vec3 m = max(0.5 - vec3(
|
|
|
+ dot(x0, x0),
|
|
|
+ dot(x12.xy, x12.xy),
|
|
|
+ dot(x12.zw, x12.zw)
|
|
|
+ ), 0.0);
|
|
|
+ m = m * m;
|
|
|
+ m = m * m;
|
|
|
+
|
|
|
+ vec3 x = 2.0 * fract(p * C.www) - 1.0;
|
|
|
+ vec3 h = abs(x) - 0.5;
|
|
|
+ vec3 ox = floor(x + 0.5);
|
|
|
+ vec3 a0 = x - ox;
|
|
|
+
|
|
|
+ m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
|
|
|
+
|
|
|
+ vec3 g;
|
|
|
+ g.x = a0.x * x0.x + h.x * x0.y;
|
|
|
+ g.yz = a0.yz * x12.xz + h.yz * x12.yw;
|
|
|
+
|
|
|
+ return 130.0 * dot(m, g);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### FBM (Fractal Brownian Motion)
|
|
|
+
|
|
|
+```glsl
|
|
|
+float fbm(vec2 p, int octaves) {
|
|
|
+ float value = 0.0;
|
|
|
+ float amplitude = 0.5;
|
|
|
+ float frequency = 1.0;
|
|
|
+
|
|
|
+ for (int i = 0; i < 8; i++) { // max octaves = 8
|
|
|
+ if (i >= octaves) break;
|
|
|
+ value += amplitude * snoise(p * frequency);
|
|
|
+ frequency *= 2.0; // lacunarity
|
|
|
+ amplitude *= 0.5; // gain / persistence
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Domain Warping
|
|
|
+
|
|
|
+```glsl
|
|
|
+// Single warp
|
|
|
+float warpedNoise(vec2 p) {
|
|
|
+ vec2 q = vec2(
|
|
|
+ fbm(p + vec2(0.0, 0.0), 4),
|
|
|
+ fbm(p + vec2(5.2, 1.3), 4)
|
|
|
+ );
|
|
|
+ return fbm(p + 4.0 * q, 4);
|
|
|
+}
|
|
|
+
|
|
|
+// Double warp (Inigo Quilez technique)
|
|
|
+float doubleWarp(vec2 p) {
|
|
|
+ vec2 q = vec2(
|
|
|
+ fbm(p + vec2(0.0, 0.0), 4),
|
|
|
+ fbm(p + vec2(5.2, 1.3), 4)
|
|
|
+ );
|
|
|
+ vec2 r = vec2(
|
|
|
+ fbm(p + 4.0 * q + vec2(1.7, 9.2), 4),
|
|
|
+ fbm(p + 4.0 * q + vec2(8.3, 2.8), 4)
|
|
|
+ );
|
|
|
+ return fbm(p + 4.0 * r, 4);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Worley / Cellular Noise
|
|
|
+
|
|
|
+```glsl
|
|
|
+float worley(vec2 p) {
|
|
|
+ vec2 i = floor(p);
|
|
|
+ vec2 f = fract(p);
|
|
|
+ float minDist = 1.0;
|
|
|
+
|
|
|
+ for (int y = -1; y <= 1; y++) {
|
|
|
+ for (int x = -1; x <= 1; x++) {
|
|
|
+ vec2 neighbor = vec2(float(x), float(y));
|
|
|
+ vec2 point = hash2(i + neighbor);
|
|
|
+ vec2 diff = neighbor + point - f;
|
|
|
+ float dist = length(diff);
|
|
|
+ minDist = min(minDist, dist);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return minDist;
|
|
|
+}
|
|
|
+
|
|
|
+// F2 - F1 for cell edges
|
|
|
+float worleyEdge(vec2 p) {
|
|
|
+ vec2 i = floor(p);
|
|
|
+ vec2 f = fract(p);
|
|
|
+ float f1 = 1.0, f2 = 1.0;
|
|
|
+
|
|
|
+ for (int y = -1; y <= 1; y++) {
|
|
|
+ for (int x = -1; x <= 1; x++) {
|
|
|
+ vec2 neighbor = vec2(float(x), float(y));
|
|
|
+ vec2 point = hash2(i + neighbor);
|
|
|
+ float dist = length(neighbor + point - f);
|
|
|
+ if (dist < f1) { f2 = f1; f1 = dist; }
|
|
|
+ else if (dist < f2) { f2 = dist; }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return f2 - f1;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### 2D SDF Primitives
|
|
|
+
|
|
|
+```glsl
|
|
|
+float sdCircle(vec2 p, float r) {
|
|
|
+ return length(p) - r;
|
|
|
+}
|
|
|
+
|
|
|
+float sdBox(vec2 p, vec2 b) {
|
|
|
+ vec2 d = abs(p) - b;
|
|
|
+ return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
|
|
|
+}
|
|
|
+
|
|
|
+float sdSegment(vec2 p, vec2 a, vec2 b) {
|
|
|
+ vec2 pa = p - a, ba = b - a;
|
|
|
+ float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
|
|
|
+ return length(pa - ba * h);
|
|
|
+}
|
|
|
+
|
|
|
+float sdEquilateralTriangle(vec2 p, float r) {
|
|
|
+ const float k = sqrt(3.0);
|
|
|
+ p.x = abs(p.x) - r;
|
|
|
+ p.y = p.y + r / k;
|
|
|
+ if (p.x + k * p.y > 0.0) p = vec2(p.x - k*p.y, -k*p.x - p.y) / 2.0;
|
|
|
+ p.x -= clamp(p.x, -2.0*r, 0.0);
|
|
|
+ return -length(p) * sign(p.y);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### 3D SDF Primitives
|
|
|
+
|
|
|
+```glsl
|
|
|
+float sdSphere(vec3 p, float r) { return length(p) - r; }
|
|
|
+
|
|
|
+float sdBox(vec3 p, vec3 b) {
|
|
|
+ vec3 q = abs(p) - b;
|
|
|
+ return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0);
|
|
|
+}
|
|
|
+
|
|
|
+float sdTorus(vec3 p, vec2 t) {
|
|
|
+ vec2 q = vec2(length(p.xz) - t.x, p.y);
|
|
|
+ return length(q) - t.y;
|
|
|
+}
|
|
|
+
|
|
|
+float sdCapsule(vec3 p, vec3 a, vec3 b, float r) {
|
|
|
+ vec3 pa = p - a, ba = b - a;
|
|
|
+ float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
|
|
|
+ return length(pa - ba * h) - r;
|
|
|
+}
|
|
|
+
|
|
|
+float sdRoundBox(vec3 p, vec3 b, float r) {
|
|
|
+ vec3 q = abs(p) - b + r;
|
|
|
+ return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0) - r;
|
|
|
+}
|
|
|
+
|
|
|
+float sdOctahedron(vec3 p, float s) {
|
|
|
+ p = abs(p);
|
|
|
+ float m = p.x + p.y + p.z - s;
|
|
|
+ vec3 q;
|
|
|
+ if (3.0*p.x < m) q = p.xyz;
|
|
|
+ else if (3.0*p.y < m) q = p.yzx;
|
|
|
+ else if (3.0*p.z < m) q = p.zxy;
|
|
|
+ else return m * 0.57735027;
|
|
|
+ float k = clamp(0.5*(q.z - q.y + s), 0.0, s);
|
|
|
+ return length(vec3(q.x, q.y - s + k, q.z - k));
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### SDF Operations
|
|
|
+
|
|
|
+```glsl
|
|
|
+// Boolean
|
|
|
+float opUnion(float a, float b) { return min(a, b); }
|
|
|
+float opSubtract(float a, float b) { return max(-a, b); }
|
|
|
+float opIntersect(float a, float b) { return max(a, b); }
|
|
|
+
|
|
|
+// Smooth boolean
|
|
|
+float opSmoothUnion(float a, float b, float k) {
|
|
|
+ k *= 4.0;
|
|
|
+ float h = max(k - abs(a - b), 0.0);
|
|
|
+ return min(a, b) - h*h*0.25/k;
|
|
|
+}
|
|
|
+
|
|
|
+float opSmoothSubtract(float a, float b, float k) {
|
|
|
+ return -opSmoothUnion(a, -b, k);
|
|
|
+}
|
|
|
+
|
|
|
+// Transform
|
|
|
+float opRound(float d, float r) { return d - r; }
|
|
|
+float opOnion(float d, float t) { return abs(d) - t; }
|
|
|
+
|
|
|
+// Repetition
|
|
|
+vec3 opRepeat(vec3 p, vec3 s) { return p - s * round(p / s); }
|
|
|
+vec3 opRepeatLimited(vec3 p, float s, vec3 lim) {
|
|
|
+ return p - s * clamp(round(p / s), -lim, lim);
|
|
|
+}
|
|
|
+
|
|
|
+// Twist
|
|
|
+vec3 opTwist(vec3 p, float k) {
|
|
|
+ float c = cos(k * p.y);
|
|
|
+ float s = sin(k * p.y);
|
|
|
+ mat2 m = mat2(c, -s, s, c);
|
|
|
+ return vec3(m * p.xz, p.y);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Ray Marching Template
|
|
|
+
|
|
|
+```glsl
|
|
|
+#define MAX_STEPS 100
|
|
|
+#define MAX_DIST 100.0
|
|
|
+#define SURF_DIST 0.001
|
|
|
+
|
|
|
+float map(vec3 p) {
|
|
|
+ float sphere = sdSphere(p - vec3(0, 1, 0), 1.0);
|
|
|
+ float plane = p.y;
|
|
|
+ return opSmoothUnion(sphere, plane, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+float rayMarch(vec3 ro, vec3 rd) {
|
|
|
+ float d = 0.0;
|
|
|
+ for (int i = 0; i < MAX_STEPS; i++) {
|
|
|
+ vec3 p = ro + rd * d;
|
|
|
+ float ds = map(p);
|
|
|
+ d += ds;
|
|
|
+ if (d > MAX_DIST || ds < SURF_DIST) break;
|
|
|
+ }
|
|
|
+ return d;
|
|
|
+}
|
|
|
+
|
|
|
+vec3 getNormal(vec3 p) {
|
|
|
+ vec2 e = vec2(0.001, 0.0);
|
|
|
+ return normalize(vec3(
|
|
|
+ map(p + e.xyy) - map(p - e.xyy),
|
|
|
+ map(p + e.yxy) - map(p - e.yxy),
|
|
|
+ map(p + e.yyx) - map(p - e.yyx)
|
|
|
+ ));
|
|
|
+}
|
|
|
+
|
|
|
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
|
|
+ vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
|
|
|
+
|
|
|
+ // Camera
|
|
|
+ vec3 ro = vec3(0, 2, -5); // ray origin
|
|
|
+ vec3 rd = normalize(vec3(uv, 1.0)); // ray direction
|
|
|
+
|
|
|
+ float d = rayMarch(ro, rd);
|
|
|
+
|
|
|
+ vec3 col = vec3(0.0);
|
|
|
+ if (d < MAX_DIST) {
|
|
|
+ vec3 p = ro + rd * d;
|
|
|
+ vec3 n = getNormal(p);
|
|
|
+ vec3 lightDir = normalize(vec3(1, 2, -1));
|
|
|
+ float diff = max(dot(n, lightDir), 0.0);
|
|
|
+ col = vec3(1.0, 0.8, 0.6) * diff;
|
|
|
+ }
|
|
|
+
|
|
|
+ fragColor = vec4(col, 1.0);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Color Blending in Shaders
|
|
|
+
|
|
|
+```glsl
|
|
|
+// Palette function (Inigo Quilez)
|
|
|
+vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
|
|
|
+ return a + b * cos(6.28318 * (c * t + d));
|
|
|
+}
|
|
|
+
|
|
|
+// Common palettes:
|
|
|
+// Rainbow: palette(t, vec3(0.5), vec3(0.5), vec3(1.0), vec3(0.0, 0.33, 0.67))
|
|
|
+// Sunset: palette(t, vec3(0.5), vec3(0.5), vec3(1.0), vec3(0.0, 0.1, 0.2))
|
|
|
+// Ocean: palette(t, vec3(0.5), vec3(0.5), vec3(1.0, 1.0, 0.5), vec3(0.8, 0.9, 0.3))
|
|
|
+// Fire: palette(t, vec3(0.5,0.5,0.3), vec3(0.5,0.5,0.3), vec3(1.0), vec3(0.0,0.1,0.2))
|
|
|
+
|
|
|
+// OKLAB blending in GLSL (see color section below for conversion functions)
|
|
|
+vec3 blendOklab(vec3 rgb1, vec3 rgb2, float t) {
|
|
|
+ vec3 lab1 = linearSRGBToOklab(rgb1);
|
|
|
+ vec3 lab2 = linearSRGBToOklab(rgb2);
|
|
|
+ vec3 mixed = mix(lab1, lab2, t);
|
|
|
+ return oklabToLinearSRGB(mixed);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 5. Procedural Generation Algorithms
|
|
|
+
|
|
|
+### Perlin / Simplex Noise (JavaScript)
|
|
|
+
|
|
|
+```javascript
|
|
|
+// Use a library: npm install simplex-noise
|
|
|
+import { createNoise2D, createNoise3D, createNoise4D } from 'simplex-noise';
|
|
|
+
|
|
|
+const noise2D = createNoise2D(); // returns -1..1
|
|
|
+const noise3D = createNoise3D();
|
|
|
+const noise4D = createNoise4D();
|
|
|
+
|
|
|
+// With seeded random
|
|
|
+import { createNoise2D } from 'simplex-noise';
|
|
|
+import alea from 'alea';
|
|
|
+
|
|
|
+const prng = alea('my-seed');
|
|
|
+const noise2D = createNoise2D(prng);
|
|
|
+```
|
|
|
+
|
|
|
+### FBM (JavaScript)
|
|
|
+
|
|
|
+```javascript
|
|
|
+function fbm(x, y, octaves = 6, lacunarity = 2.0, gain = 0.5) {
|
|
|
+ let value = 0;
|
|
|
+ let amplitude = 1.0;
|
|
|
+ let frequency = 1.0;
|
|
|
+ let maxValue = 0;
|
|
|
+
|
|
|
+ for (let i = 0; i < octaves; i++) {
|
|
|
+ value += amplitude * noise2D(x * frequency, y * frequency);
|
|
|
+ maxValue += amplitude;
|
|
|
+ frequency *= lacunarity;
|
|
|
+ amplitude *= gain;
|
|
|
+ }
|
|
|
+
|
|
|
+ return value / maxValue; // normalize to -1..1
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Domain Warping (JavaScript)
|
|
|
+
|
|
|
+```javascript
|
|
|
+function domainWarp(x, y, scale = 0.005, warpStrength = 100) {
|
|
|
+ const qx = fbm(x * scale, y * scale, 4);
|
|
|
+ const qy = fbm(x * scale + 5.2, y * scale + 1.3, 4);
|
|
|
+
|
|
|
+ return fbm(
|
|
|
+ (x + warpStrength * qx) * scale,
|
|
|
+ (y + warpStrength * qy) * scale,
|
|
|
+ 4
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+// Double warp for more organic patterns
|
|
|
+function doubleWarp(x, y, scale = 0.005) {
|
|
|
+ const q = [
|
|
|
+ fbm(x * scale, y * scale, 4),
|
|
|
+ fbm(x * scale + 5.2, y * scale + 1.3, 4),
|
|
|
+ ];
|
|
|
+ const r = [
|
|
|
+ fbm((x + 100 * q[0]) * scale + 1.7, (y + 100 * q[1]) * scale + 9.2, 4),
|
|
|
+ fbm((x + 100 * q[0]) * scale + 8.3, (y + 100 * q[1]) * scale + 2.8, 4),
|
|
|
+ ];
|
|
|
+ return fbm(
|
|
|
+ (x + 100 * r[0]) * scale,
|
|
|
+ (y + 100 * r[1]) * scale,
|
|
|
+ 4
|
|
|
+ );
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Ridged Noise
|
|
|
+
|
|
|
+```javascript
|
|
|
+function ridgedNoise(x, y, octaves = 6) {
|
|
|
+ let value = 0;
|
|
|
+ let amplitude = 1.0;
|
|
|
+ let frequency = 1.0;
|
|
|
+ let weight = 1.0;
|
|
|
+
|
|
|
+ for (let i = 0; i < octaves; i++) {
|
|
|
+ let signal = noise2D(x * frequency, y * frequency);
|
|
|
+ signal = 1.0 - Math.abs(signal); // create ridges
|
|
|
+ signal *= signal; // sharpen
|
|
|
+ signal *= weight;
|
|
|
+ weight = Math.min(1.0, Math.max(0.0, signal * 2.0));
|
|
|
+
|
|
|
+ value += signal * amplitude;
|
|
|
+ frequency *= 2.0;
|
|
|
+ amplitude *= 0.5;
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Flow Fields
|
|
|
+
|
|
|
+```javascript
|
|
|
+class FlowField {
|
|
|
+ constructor(cols, rows, noiseScale = 0.1) {
|
|
|
+ this.cols = cols;
|
|
|
+ this.rows = rows;
|
|
|
+ this.field = new Float32Array(cols * rows);
|
|
|
+ this.noiseScale = noiseScale;
|
|
|
+ }
|
|
|
+
|
|
|
+ update(time = 0) {
|
|
|
+ for (let y = 0; y < this.rows; y++) {
|
|
|
+ for (let x = 0; x < this.cols; x++) {
|
|
|
+ const angle = noise2D(
|
|
|
+ x * this.noiseScale,
|
|
|
+ y * this.noiseScale + time * 0.2
|
|
|
+ ) * Math.PI * 2;
|
|
|
+ this.field[y * this.cols + x] = angle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ getAngle(x, y) {
|
|
|
+ const col = Math.floor(x) % this.cols;
|
|
|
+ const row = Math.floor(y) % this.rows;
|
|
|
+ return this.field[row * this.cols + col];
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class Particle {
|
|
|
+ constructor(x, y) {
|
|
|
+ this.x = x;
|
|
|
+ this.y = y;
|
|
|
+ this.prevX = x;
|
|
|
+ this.prevY = y;
|
|
|
+ this.speed = 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ follow(field) {
|
|
|
+ this.prevX = this.x;
|
|
|
+ this.prevY = this.y;
|
|
|
+ const angle = field.getAngle(this.x, this.y);
|
|
|
+ this.x += Math.cos(angle) * this.speed;
|
|
|
+ this.y += Math.sin(angle) * this.speed;
|
|
|
+ }
|
|
|
+
|
|
|
+ edges(w, h) {
|
|
|
+ if (this.x < 0 || this.x > w || this.y < 0 || this.y > h) {
|
|
|
+ this.x = Math.random() * w;
|
|
|
+ this.y = Math.random() * h;
|
|
|
+ this.prevX = this.x;
|
|
|
+ this.prevY = this.y;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// p5.js usage
|
|
|
+const field = new FlowField(80, 80, 0.05);
|
|
|
+const particles = Array.from({ length: 1000 },
|
|
|
+ () => new Particle(random(width), random(height))
|
|
|
+);
|
|
|
+
|
|
|
+function draw() {
|
|
|
+ field.update(frameCount * 0.01);
|
|
|
+ for (const p of particles) {
|
|
|
+ p.follow(field);
|
|
|
+ p.edges(width, height);
|
|
|
+ stroke(255, 20);
|
|
|
+ line(p.prevX, p.prevY, p.x, p.y);
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Poisson Disk Sampling
|
|
|
+
|
|
|
+```javascript
|
|
|
+function poissonDisk(width, height, minDist, maxAttempts = 30) {
|
|
|
+ const cellSize = minDist / Math.SQRT2;
|
|
|
+ const gridW = Math.ceil(width / cellSize);
|
|
|
+ const gridH = Math.ceil(height / cellSize);
|
|
|
+ const grid = new Array(gridW * gridH).fill(null);
|
|
|
+ const points = [];
|
|
|
+ const active = [];
|
|
|
+
|
|
|
+ function gridIndex(x, y) {
|
|
|
+ return Math.floor(x / cellSize) + Math.floor(y / cellSize) * gridW;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Seed point
|
|
|
+ const p0 = { x: width / 2, y: height / 2 };
|
|
|
+ points.push(p0);
|
|
|
+ active.push(p0);
|
|
|
+ grid[gridIndex(p0.x, p0.y)] = p0;
|
|
|
+
|
|
|
+ while (active.length > 0) {
|
|
|
+ const idx = Math.floor(Math.random() * active.length);
|
|
|
+ const point = active[idx];
|
|
|
+ let found = false;
|
|
|
+
|
|
|
+ for (let n = 0; n < maxAttempts; n++) {
|
|
|
+ const angle = Math.random() * Math.PI * 2;
|
|
|
+ const dist = minDist + Math.random() * minDist;
|
|
|
+ const candidate = {
|
|
|
+ x: point.x + Math.cos(angle) * dist,
|
|
|
+ y: point.y + Math.sin(angle) * dist,
|
|
|
+ };
|
|
|
+
|
|
|
+ if (candidate.x < 0 || candidate.x >= width ||
|
|
|
+ candidate.y < 0 || candidate.y >= height) continue;
|
|
|
+
|
|
|
+ const gi = gridIndex(candidate.x, candidate.y);
|
|
|
+ let ok = true;
|
|
|
+
|
|
|
+ // Check neighboring cells
|
|
|
+ const gx = Math.floor(candidate.x / cellSize);
|
|
|
+ const gy = Math.floor(candidate.y / cellSize);
|
|
|
+ for (let dy = -2; dy <= 2 && ok; dy++) {
|
|
|
+ for (let dx = -2; dx <= 2 && ok; dx++) {
|
|
|
+ const nx = gx + dx, ny = gy + dy;
|
|
|
+ if (nx < 0 || nx >= gridW || ny < 0 || ny >= gridH) continue;
|
|
|
+ const neighbor = grid[nx + ny * gridW];
|
|
|
+ if (neighbor) {
|
|
|
+ const d = Math.hypot(candidate.x - neighbor.x,
|
|
|
+ candidate.y - neighbor.y);
|
|
|
+ if (d < minDist) ok = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (ok) {
|
|
|
+ points.push(candidate);
|
|
|
+ active.push(candidate);
|
|
|
+ grid[gi] = candidate;
|
|
|
+ found = true;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!found) active.splice(idx, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ return points;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### L-Systems
|
|
|
+
|
|
|
+```javascript
|
|
|
+class LSystem {
|
|
|
+ constructor(axiom, rules, angle = 25) {
|
|
|
+ this.axiom = axiom;
|
|
|
+ this.rules = rules; // { 'F': 'FF+[+F-F-F]-[-F+F+F]' }
|
|
|
+ this.angle = angle * (Math.PI / 180);
|
|
|
+ this.sentence = axiom;
|
|
|
+ }
|
|
|
+
|
|
|
+ generate(iterations) {
|
|
|
+ this.sentence = this.axiom;
|
|
|
+ for (let i = 0; i < iterations; i++) {
|
|
|
+ let next = '';
|
|
|
+ for (const ch of this.sentence) {
|
|
|
+ next += this.rules[ch] || ch;
|
|
|
+ }
|
|
|
+ this.sentence = next;
|
|
|
+ }
|
|
|
+ return this.sentence;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Returns array of line segments [{x1,y1,x2,y2}]
|
|
|
+ interpret(startX, startY, stepLen) {
|
|
|
+ const lines = [];
|
|
|
+ const stack = [];
|
|
|
+ let x = startX, y = startY;
|
|
|
+ let angle = -Math.PI / 2; // start pointing up
|
|
|
+
|
|
|
+ for (const ch of this.sentence) {
|
|
|
+ switch (ch) {
|
|
|
+ case 'F': {
|
|
|
+ const nx = x + Math.cos(angle) * stepLen;
|
|
|
+ const ny = y + Math.sin(angle) * stepLen;
|
|
|
+ lines.push({ x1: x, y1: y, x2: nx, y2: ny });
|
|
|
+ x = nx; y = ny;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ case '+': angle += this.angle; break;
|
|
|
+ case '-': angle -= this.angle; break;
|
|
|
+ case '[': stack.push({ x, y, angle }); break;
|
|
|
+ case ']': {
|
|
|
+ const state = stack.pop();
|
|
|
+ x = state.x; y = state.y; angle = state.angle;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return lines;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// Classic trees
|
|
|
+const tree = new LSystem('F', { 'F': 'FF+[+F-F-F]-[-F+F+F]' }, 22.5);
|
|
|
+tree.generate(4);
|
|
|
+
|
|
|
+// Koch curve
|
|
|
+const koch = new LSystem('F', { 'F': 'F+F-F-F+F' }, 90);
|
|
|
+
|
|
|
+// Sierpinski triangle
|
|
|
+const sierpinski = new LSystem('F-G-G', {
|
|
|
+ 'F': 'F-G+F+G-F',
|
|
|
+ 'G': 'GG'
|
|
|
+}, 120);
|
|
|
+
|
|
|
+// Dragon curve
|
|
|
+const dragon = new LSystem('FX', {
|
|
|
+ 'X': 'X+YF+',
|
|
|
+ 'Y': '-FX-Y'
|
|
|
+}, 90);
|
|
|
+```
|
|
|
+
|
|
|
+### Cellular Automata (Game of Life)
|
|
|
+
|
|
|
+```javascript
|
|
|
+class CellularAutomata {
|
|
|
+ constructor(width, height) {
|
|
|
+ this.w = width;
|
|
|
+ this.h = height;
|
|
|
+ this.grid = new Uint8Array(width * height);
|
|
|
+ this.next = new Uint8Array(width * height);
|
|
|
+ }
|
|
|
+
|
|
|
+ randomize(density = 0.3) {
|
|
|
+ for (let i = 0; i < this.grid.length; i++) {
|
|
|
+ this.grid[i] = Math.random() < density ? 1 : 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ step() {
|
|
|
+ for (let y = 0; y < this.h; y++) {
|
|
|
+ for (let x = 0; x < this.w; x++) {
|
|
|
+ const neighbors = this.countNeighbors(x, y);
|
|
|
+ const idx = y * this.w + x;
|
|
|
+ const alive = this.grid[idx];
|
|
|
+
|
|
|
+ // Conway's Game of Life rules
|
|
|
+ if (alive && (neighbors < 2 || neighbors > 3)) {
|
|
|
+ this.next[idx] = 0;
|
|
|
+ } else if (!alive && neighbors === 3) {
|
|
|
+ this.next[idx] = 1;
|
|
|
+ } else {
|
|
|
+ this.next[idx] = this.grid[idx];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ [this.grid, this.next] = [this.next, this.grid];
|
|
|
+ }
|
|
|
+
|
|
|
+ countNeighbors(x, y) {
|
|
|
+ let count = 0;
|
|
|
+ for (let dy = -1; dy <= 1; dy++) {
|
|
|
+ for (let dx = -1; dx <= 1; dx++) {
|
|
|
+ if (dx === 0 && dy === 0) continue;
|
|
|
+ const nx = (x + dx + this.w) % this.w;
|
|
|
+ const ny = (y + dy + this.h) % this.h;
|
|
|
+ count += this.grid[ny * this.w + nx];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return count;
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Voronoi Diagram (Fortune's Algorithm Alternative -- Brute Force)
|
|
|
+
|
|
|
+```javascript
|
|
|
+// For production use: npm install d3-delaunay
|
|
|
+import { Delaunay } from 'd3-delaunay';
|
|
|
+
|
|
|
+// Generate Voronoi from random points
|
|
|
+const points = Array.from({ length: 50 }, () => [
|
|
|
+ Math.random() * width,
|
|
|
+ Math.random() * height,
|
|
|
+]);
|
|
|
+
|
|
|
+const delaunay = Delaunay.from(points);
|
|
|
+const voronoi = delaunay.voronoi([0, 0, width, height]);
|
|
|
+
|
|
|
+// Iterate cells
|
|
|
+for (let i = 0; i < points.length; i++) {
|
|
|
+ const cell = voronoi.cellPolygon(i);
|
|
|
+ if (!cell) continue;
|
|
|
+ // cell is array of [x,y] vertices (closed polygon)
|
|
|
+ // Draw with canvas, SVG, etc.
|
|
|
+}
|
|
|
+
|
|
|
+// Delaunay triangles
|
|
|
+for (let i = 0; i < delaunay.triangles.length; i += 3) {
|
|
|
+ const p0 = points[delaunay.triangles[i]];
|
|
|
+ const p1 = points[delaunay.triangles[i + 1]];
|
|
|
+ const p2 = points[delaunay.triangles[i + 2]];
|
|
|
+ // Draw triangle
|
|
|
+}
|
|
|
+
|
|
|
+// Lloyd relaxation (makes cells more even)
|
|
|
+function lloydRelax(points, bounds, iterations = 3) {
|
|
|
+ let pts = [...points];
|
|
|
+ for (let i = 0; i < iterations; i++) {
|
|
|
+ const d = Delaunay.from(pts);
|
|
|
+ const v = d.voronoi(bounds);
|
|
|
+ pts = pts.map((_, j) => {
|
|
|
+ const cell = v.cellPolygon(j);
|
|
|
+ if (!cell) return pts[j];
|
|
|
+ // Centroid of polygon
|
|
|
+ let cx = 0, cy = 0;
|
|
|
+ for (let k = 0; k < cell.length - 1; k++) {
|
|
|
+ cx += cell[k][0];
|
|
|
+ cy += cell[k][1];
|
|
|
+ }
|
|
|
+ return [cx / (cell.length - 1), cy / (cell.length - 1)];
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return pts;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Wave Function Collapse (Simple Tiled)
|
|
|
+
|
|
|
+```javascript
|
|
|
+class WFC {
|
|
|
+ constructor(tiles, adjacency, width, height) {
|
|
|
+ this.tiles = tiles; // array of tile IDs
|
|
|
+ this.adj = adjacency; // { tileId: { up: [...], down: [...], left: [...], right: [...] } }
|
|
|
+ this.w = width;
|
|
|
+ this.h = height;
|
|
|
+ // Each cell starts with all tiles possible
|
|
|
+ this.grid = Array.from({ length: width * height },
|
|
|
+ () => new Set(tiles)
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ entropy(idx) {
|
|
|
+ return this.grid[idx].size;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Find cell with lowest entropy > 1
|
|
|
+ findLowestEntropy() {
|
|
|
+ let minE = Infinity, minIdx = -1;
|
|
|
+ for (let i = 0; i < this.grid.length; i++) {
|
|
|
+ const e = this.grid[i].size;
|
|
|
+ if (e > 1 && e < minE) {
|
|
|
+ minE = e;
|
|
|
+ minIdx = i;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return minIdx;
|
|
|
+ }
|
|
|
+
|
|
|
+ collapse(idx) {
|
|
|
+ const options = [...this.grid[idx]];
|
|
|
+ const chosen = options[Math.floor(Math.random() * options.length)];
|
|
|
+ this.grid[idx] = new Set([chosen]);
|
|
|
+ return chosen;
|
|
|
+ }
|
|
|
+
|
|
|
+ propagate(idx) {
|
|
|
+ const stack = [idx];
|
|
|
+ while (stack.length > 0) {
|
|
|
+ const current = stack.pop();
|
|
|
+ const x = current % this.w;
|
|
|
+ const y = Math.floor(current / this.w);
|
|
|
+ const currentTiles = this.grid[current];
|
|
|
+
|
|
|
+ const neighbors = [
|
|
|
+ { dx: 0, dy: -1, dir: 'up', opp: 'down' },
|
|
|
+ { dx: 0, dy: 1, dir: 'down', opp: 'up' },
|
|
|
+ { dx: -1, dy: 0, dir: 'left', opp: 'right' },
|
|
|
+ { dx: 1, dy: 0, dir: 'right', opp: 'left' },
|
|
|
+ ];
|
|
|
+
|
|
|
+ for (const { dx, dy, dir } of neighbors) {
|
|
|
+ const nx = x + dx, ny = y + dy;
|
|
|
+ if (nx < 0 || nx >= this.w || ny < 0 || ny >= this.h) continue;
|
|
|
+ const ni = ny * this.w + nx;
|
|
|
+ const neighborPossible = this.grid[ni];
|
|
|
+ const prevSize = neighborPossible.size;
|
|
|
+
|
|
|
+ // Compute allowed tiles for neighbor
|
|
|
+ const allowed = new Set();
|
|
|
+ for (const t of currentTiles) {
|
|
|
+ for (const a of (this.adj[t]?.[dir] || [])) {
|
|
|
+ allowed.add(a);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Intersect
|
|
|
+ for (const t of neighborPossible) {
|
|
|
+ if (!allowed.has(t)) neighborPossible.delete(t);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (neighborPossible.size < prevSize) {
|
|
|
+ stack.push(ni);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ solve() {
|
|
|
+ while (true) {
|
|
|
+ const idx = this.findLowestEntropy();
|
|
|
+ if (idx === -1) break; // all collapsed
|
|
|
+ this.collapse(idx);
|
|
|
+ this.propagate(idx);
|
|
|
+ }
|
|
|
+ return this.grid.map(s => [...s][0]);
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Terrain with Noise Octaves
|
|
|
+
|
|
|
+```javascript
|
|
|
+function generateTerrain(width, height, options = {}) {
|
|
|
+ const {
|
|
|
+ octaves = 6,
|
|
|
+ lacunarity = 2.0,
|
|
|
+ gain = 0.5,
|
|
|
+ scale = 0.005,
|
|
|
+ exponent = 1.5, // redistribution power
|
|
|
+ seed = 'terrain',
|
|
|
+ } = options;
|
|
|
+
|
|
|
+ const prng = alea(seed);
|
|
|
+ const noise = createNoise2D(prng);
|
|
|
+ const data = new Float32Array(width * height);
|
|
|
+
|
|
|
+ for (let y = 0; y < height; y++) {
|
|
|
+ for (let x = 0; x < width; x++) {
|
|
|
+ const nx = x * scale - 0.5;
|
|
|
+ const ny = y * scale - 0.5;
|
|
|
+
|
|
|
+ let e = 0, amplitude = 1, frequency = 1, maxAmp = 0;
|
|
|
+ for (let i = 0; i < octaves; i++) {
|
|
|
+ e += amplitude * noise(nx * frequency, ny * frequency);
|
|
|
+ maxAmp += amplitude;
|
|
|
+ frequency *= lacunarity;
|
|
|
+ amplitude *= gain;
|
|
|
+ }
|
|
|
+ e = (e / maxAmp + 1) * 0.5; // normalize to 0..1
|
|
|
+ e = Math.pow(e, exponent); // redistribute
|
|
|
+
|
|
|
+ data[y * width + x] = e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+}
|
|
|
+
|
|
|
+// Biome from elevation + moisture
|
|
|
+function biome(e, m) {
|
|
|
+ if (e < 0.1) return 'DEEP_WATER';
|
|
|
+ if (e < 0.15) return 'WATER';
|
|
|
+ if (e < 0.18) return 'BEACH';
|
|
|
+ if (e > 0.8) {
|
|
|
+ if (m < 0.2) return 'SCORCHED';
|
|
|
+ if (m < 0.5) return 'BARE';
|
|
|
+ return 'SNOW';
|
|
|
+ }
|
|
|
+ if (e > 0.6) {
|
|
|
+ if (m < 0.33) return 'SHRUBLAND';
|
|
|
+ return 'FOREST';
|
|
|
+ }
|
|
|
+ if (m < 0.16) return 'DESERT';
|
|
|
+ if (m < 0.5) return 'GRASSLAND';
|
|
|
+ return 'RAINFOREST';
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Seamless Tiling (Cylindrical / Toroidal Noise)
|
|
|
+
|
|
|
+```javascript
|
|
|
+// Wrap noise seamlessly by mapping to higher dimensions
|
|
|
+function torusNoise(nx, ny, noise4D) {
|
|
|
+ const TAU = Math.PI * 2;
|
|
|
+ return noise4D(
|
|
|
+ Math.cos(TAU * nx) / TAU,
|
|
|
+ Math.sin(TAU * nx) / TAU,
|
|
|
+ Math.cos(TAU * ny) / TAU,
|
|
|
+ Math.sin(TAU * ny) / TAU
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+// Scale output by sqrt(2) to compensate for 4D range narrowing
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 6. Color Theory for Generative Art
|
|
|
+
|
|
|
+> For CSS color, accessibility, design tokens, and gamut details, see `color-ops`.
|
|
|
+
|
|
|
+### OKLAB / OKLCH Conversion (JavaScript)
|
|
|
+
|
|
|
+```javascript
|
|
|
+function linearSRGBToOklab(r, g, b) {
|
|
|
+ const l = 0.4122214708*r + 0.5363325363*g + 0.0514459929*b;
|
|
|
+ const m = 0.2119034982*r + 0.6806995451*g + 0.1073969566*b;
|
|
|
+ const s = 0.0883024619*r + 0.2817188376*g + 0.6299787005*b;
|
|
|
+ const l_ = Math.cbrt(l), m_ = Math.cbrt(m), s_ = Math.cbrt(s);
|
|
|
+ return {
|
|
|
+ L: 0.2104542553*l_ + 0.7936177850*m_ - 0.0040720468*s_,
|
|
|
+ a: 1.9779984951*l_ - 2.4285922050*m_ + 0.4505937099*s_,
|
|
|
+ b: 0.0259040371*l_ + 0.7827717662*m_ - 0.8086757660*s_,
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+function oklabToLinearSRGB(L, a, b) {
|
|
|
+ const l_ = L + 0.3963377774*a + 0.2158037573*b;
|
|
|
+ const m_ = L - 0.1055613458*a - 0.0638541728*b;
|
|
|
+ const s_ = L - 0.0894841775*a - 1.2914855480*b;
|
|
|
+ return {
|
|
|
+ r: +4.0767416621*l_**3 - 3.3077115913*m_**3 + 0.2309699292*s_**3,
|
|
|
+ g: -1.2684380046*l_**3 + 2.6097574011*m_**3 - 0.3413193965*s_**3,
|
|
|
+ b: -0.0041960863*l_**3 - 0.7034186147*m_**3 + 1.7076147010*s_**3,
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+function oklabToOklch({ L, a, b }) {
|
|
|
+ return { L, C: Math.hypot(a, b), h: Math.atan2(b, a) * 180 / Math.PI };
|
|
|
+}
|
|
|
+
|
|
|
+function oklchToOklab({ L, C, h }) {
|
|
|
+ const rad = h * Math.PI / 180;
|
|
|
+ return { L, a: C * Math.cos(rad), b: C * Math.sin(rad) };
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### OKLAB / OKLCH Conversion (GLSL)
|
|
|
+
|
|
|
+```glsl
|
|
|
+vec3 linearSRGBToOklab(vec3 c) {
|
|
|
+ vec3 lms = vec3(
|
|
|
+ dot(c, vec3(0.4122214708, 0.5363325363, 0.0514459929)),
|
|
|
+ dot(c, vec3(0.2119034982, 0.6806995451, 0.1073969566)),
|
|
|
+ dot(c, vec3(0.0883024619, 0.2817188376, 0.6299787005))
|
|
|
+ );
|
|
|
+ lms = sign(lms) * pow(abs(lms), vec3(1.0/3.0));
|
|
|
+ return vec3(
|
|
|
+ dot(lms, vec3(0.2104542553, 0.7936177850, -0.0040720468)),
|
|
|
+ dot(lms, vec3(1.9779984951, -2.4285922050, 0.4505937099)),
|
|
|
+ dot(lms, vec3(0.0259040371, 0.7827717662, -0.8086757660))
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+vec3 oklabToLinearSRGB(vec3 lab) {
|
|
|
+ vec3 lms = vec3(
|
|
|
+ lab.x + 0.3963377774*lab.y + 0.2158037573*lab.z,
|
|
|
+ lab.x - 0.1055613458*lab.y - 0.0638541728*lab.z,
|
|
|
+ lab.x - 0.0894841775*lab.y - 1.2914855480*lab.z
|
|
|
+ );
|
|
|
+ return vec3(
|
|
|
+ dot(lms*lms*lms, vec3(4.0767416621, -3.3077115913, 0.2309699292)),
|
|
|
+ dot(lms*lms*lms, vec3(-1.2684380046, 2.6097574011, -0.3413193965)),
|
|
|
+ dot(lms*lms*lms, vec3(-0.0041960863, -0.7034186147, 1.7076147010))
|
|
|
+ );
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Palette Generation Algorithms
|
|
|
+
|
|
|
+```javascript
|
|
|
+// Cosine palette (port of Inigo Quilez technique)
|
|
|
+function cosinePalette(t, a, b, c, d) {
|
|
|
+ return [
|
|
|
+ a[0] + b[0] * Math.cos(Math.PI * 2 * (c[0] * t + d[0])),
|
|
|
+ a[1] + b[1] * Math.cos(Math.PI * 2 * (c[1] * t + d[1])),
|
|
|
+ a[2] + b[2] * Math.cos(Math.PI * 2 * (c[2] * t + d[2])),
|
|
|
+ ];
|
|
|
+}
|
|
|
+
|
|
|
+// Presets (a, b, c, d)
|
|
|
+const PALETTES = {
|
|
|
+ rainbow: [[0.5,0.5,0.5], [0.5,0.5,0.5], [1,1,1], [0, 0.33, 0.67]],
|
|
|
+ sunset: [[0.5,0.5,0.5], [0.5,0.5,0.5], [1,1,1], [0, 0.1, 0.2]],
|
|
|
+ ocean: [[0.5,0.5,0.5], [0.5,0.5,0.5], [1,1,0.5], [0.8, 0.9, 0.3]],
|
|
|
+ fire: [[0.5,0.5,0.3], [0.5,0.5,0.3], [1,1,1], [0, 0.1, 0.2]],
|
|
|
+ electric: [[0.5,0.5,0.5], [0.5,0.5,0.5], [2,1,0], [0.5, 0.2, 0.25]],
|
|
|
+ forest: [[0.5,0.5,0.5], [0.5,0.5,0.5], [1,0.7,0.4], [0, 0.15, 0.2]],
|
|
|
+};
|
|
|
+
|
|
|
+// Usage: get color at position t (0..1) along palette
|
|
|
+const [r, g, b] = cosinePalette(0.5, ...PALETTES.sunset);
|
|
|
+```
|
|
|
+
|
|
|
+### OKLCH Palette Generation
|
|
|
+
|
|
|
+```javascript
|
|
|
+// Perceptually uniform palette with fixed lightness
|
|
|
+function oklchPalette(count, L = 0.7, C = 0.15, hueOffset = 0) {
|
|
|
+ return Array.from({ length: count }, (_, i) => {
|
|
|
+ const h = (hueOffset + (i / count) * 360) % 360;
|
|
|
+ return { L, C, h };
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// Analogous palette (clustered hues)
|
|
|
+function analogousPalette(baseHue, count = 5, spread = 30, L = 0.7, C = 0.15) {
|
|
|
+ return Array.from({ length: count }, (_, i) => {
|
|
|
+ const t = i / (count - 1) - 0.5; // -0.5 to 0.5
|
|
|
+ return { L, C, h: (baseHue + t * spread + 360) % 360 };
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// Warm/cool palette
|
|
|
+function warmCoolPalette(count = 6) {
|
|
|
+ return Array.from({ length: count }, (_, i) => {
|
|
|
+ const t = i / (count - 1);
|
|
|
+ return {
|
|
|
+ L: 0.5 + t * 0.3,
|
|
|
+ C: 0.12 + Math.sin(t * Math.PI) * 0.06,
|
|
|
+ h: 20 + t * 220, // warm orange -> cool blue
|
|
|
+ };
|
|
|
+ });
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Gradient Interpolation in Perceptual Space
|
|
|
+
|
|
|
+```javascript
|
|
|
+// Interpolate in OKLAB (no hue discontinuity issues)
|
|
|
+function lerpOklab(lab1, lab2, t) {
|
|
|
+ return {
|
|
|
+ L: lab1.L + (lab2.L - lab1.L) * t,
|
|
|
+ a: lab1.a + (lab2.a - lab1.a) * t,
|
|
|
+ b: lab1.b + (lab2.b - lab1.b) * t,
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+// Interpolate in OKLCH with shortest hue path
|
|
|
+function lerpOklch(lch1, lch2, t) {
|
|
|
+ let dh = lch2.h - lch1.h;
|
|
|
+ if (dh > 180) dh -= 360;
|
|
|
+ if (dh < -180) dh += 360;
|
|
|
+
|
|
|
+ return {
|
|
|
+ L: lch1.L + (lch2.L - lch1.L) * t,
|
|
|
+ C: lch1.C + (lch2.C - lch1.C) * t,
|
|
|
+ h: (lch1.h + dh * t + 360) % 360,
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+// Multi-stop gradient
|
|
|
+function multiStopGradient(stops, t) {
|
|
|
+ // stops: [{pos: 0, color: {L,C,h}}, {pos: 0.5, ...}, {pos: 1, ...}]
|
|
|
+ if (t <= stops[0].pos) return stops[0].color;
|
|
|
+ if (t >= stops[stops.length - 1].pos) return stops[stops.length - 1].color;
|
|
|
+
|
|
|
+ for (let i = 0; i < stops.length - 1; i++) {
|
|
|
+ if (t >= stops[i].pos && t <= stops[i + 1].pos) {
|
|
|
+ const localT = (t - stops[i].pos) / (stops[i + 1].pos - stops[i].pos);
|
|
|
+ return lerpOklch(stops[i].color, stops[i + 1].color, localT);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Color Cycling
|
|
|
+
|
|
|
+```javascript
|
|
|
+// Smooth cycling through a palette
|
|
|
+function cyclePalette(palette, t, speed = 1.0) {
|
|
|
+ const idx = (t * speed) % palette.length;
|
|
|
+ const i = Math.floor(idx);
|
|
|
+ const frac = idx - i;
|
|
|
+ const c1 = palette[i % palette.length];
|
|
|
+ const c2 = palette[(i + 1) % palette.length];
|
|
|
+ return lerpOklch(c1, c2, frac);
|
|
|
+}
|
|
|
+
|
|
|
+// Phase-shifted cycling (each element gets different phase)
|
|
|
+function phasedColor(palette, t, elementIndex, phaseSpread = 0.1) {
|
|
|
+ return cyclePalette(palette, t + elementIndex * phaseSpread);
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### Harmony Rules in OKLCH
|
|
|
+
|
|
|
+```javascript
|
|
|
+function colorHarmonies(baseHue, L = 0.65, C = 0.15) {
|
|
|
+ const h = baseHue;
|
|
|
+ return {
|
|
|
+ complementary: [{ L, C, h }, { L, C, h: (h + 180) % 360 }],
|
|
|
+ analogous: [{ L, C, h: (h - 30 + 360) % 360 }, { L, C, h }, { L, C, h: (h + 30) % 360 }],
|
|
|
+ triadic: [{ L, C, h }, { L, C, h: (h + 120) % 360 }, { L, C, h: (h + 240) % 360 }],
|
|
|
+ splitComplementary: [{ L, C, h }, { L, C, h: (h + 150) % 360 }, { L, C, h: (h + 210) % 360 }],
|
|
|
+ tetradic: [{ L, C, h }, { L, C, h: (h + 90) % 360 }, { L, C, h: (h + 180) % 360 }, { L, C, h: (h + 270) % 360 }],
|
|
|
+ };
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## Quick Reference: Noise Algorithm Comparison
|
|
|
+
|
|
|
+| Algorithm | Dimension | Character | Cost | Use Case |
|
|
|
+|-----------|-----------|-----------|------|----------|
|
|
|
+| Value noise | Any | Blocky, grid artifacts | Cheap | Quick prototypes |
|
|
|
+| Perlin (gradient) | Any | Smooth, directional | Medium | Classic terrain, clouds |
|
|
|
+| Simplex | Any | Smooth, isotropic | Medium | Default choice, fewer artifacts than Perlin |
|
|
|
+| Worley (cellular) | Any | Cell-like, organic | Expensive | Stone, water, cells |
|
|
|
+| FBM | Any | Fractal detail | N * base | Terrain, clouds, organic shapes |
|
|
|
+| Ridged FBM | Any | Sharp mountain ridges | N * base | Mountains, lightning |
|
|
|
+| Domain warping | 2D+ | Swirling, marble-like | 3-9x base | Marble, smoke, alien landscapes |
|
|
|
+
|
|
|
+## Quick Reference: Libraries
|
|
|
+
|
|
|
+| Task | Library | Install |
|
|
|
+|------|---------|---------|
|
|
|
+| Noise | `simplex-noise` | `npm install simplex-noise` |
|
|
|
+| Seeded random | `alea` | `npm install alea` |
|
|
|
+| Voronoi/Delaunay | `d3-delaunay` | `npm install d3-delaunay` |
|
|
|
+| 3D engine | `three` | `npm install three` |
|
|
|
+| 2D canvas | `p5` | `npm install p5` |
|
|
|
+| Canvas export | `canvas-sketch` | `npm install canvas-sketch` |
|
|
|
+| Video export | `ccapture.js` | `npm install ccapture.js` |
|
|
|
+| SVG optimize | `svgo` | `npm install -g svgo` |
|
|
|
+| Color | `culori` | `npm install culori` |
|
|
|
+| Shader library | LYGIA | `#include` from lygia.xyz |
|
|
|
+
|
|
|
+## See Also
|
|
|
+
|
|
|
+- `color-ops` - CSS color, accessibility, design tokens, palette scripts
|
|
|
+- `javascript-ops` - JS async patterns, modules, ES2024+ features
|
|
|
+- [Book of Shaders](https://thebookofshaders.com/) - GLSL fundamentals
|
|
|
+- [Shadertoy](https://www.shadertoy.com/) - Live shader playground
|
|
|
+- [Inigo Quilez articles](https://iquilezles.org/articles/) - SDF, noise, ray marching
|
|
|
+- [LYGIA](https://lygia.xyz/) - Cross-platform shader library
|
|
|
+- [Red Blob Games](https://www.redblobgames.com/) - Procedural generation algorithms
|
0xDarkMatter