| Combination Type | Image Processing Analogy | SDF Operation | Meaning / Result |
|---|---|---|---|
| Union (set union) | OR — max (the brighter value wins) | min(d1, d2) |
Inside if a point belongs to either shape; shapes add together. |
| Intersection (set intersection) | AND — min (the darker value wins) | max(d1, d2) |
Only the overlap remains; inside only if in both shapes. |
| Difference (A − B) | A AND (NOT B) | max(d1, -d2) |
Carves shape B out of shape A. |
| Smooth Union / Intersection | Blur-like soft blending of boundaries | Blending function (e.g., opSmoothU(d1, d2, k)) |
Boundaries are smoothly merged instead of hard CSG seams. |
| Metaballs / Field Summation | Additive blending (sum fields/intensities) | f(d1) + f(d2) (field sum → iso-surface) |
Shapes melt into each other where fields overlap. |
Generative Art Libraries and Resources 1. Metaball Libraries and Samples metaballs-js (npm) : A lightweight WebGL-based metaball rendering library. You can freely specify the number of balls, colors, and speed. Paper.js Metaball Demo : The official Paper.js example showing a “viscous” effect via contour calculations on the canvas. Varun.ca Metaballs : An HTML5 canvas/JavaScript demo of metaballs with the algorithm’s formulas explained. Three.js Metaball Slime : A 3D metaball example using Marching Cubes and the Rapier physics engine. Codrops “Drawing 2D Metaballs with WebGL2” : A tutorial for drawing 2D metaballs by hand in WebGL2. 2. Symmetry (Rorschach) Generative Art Symmetry Drawer by aferriss : An editor built on p5.js for drawing with left-right symmetry—perfect for experimenting with ideas. “ : A simple sample that generates patterns by pairing square cells symmetrically. Medium: From Syntax to Symmetry (p5.js) : ...
Comments
Post a Comment