Computational Neurographica: Architecting Dynamic, Interactive Biomorphic Art in JavaScript

Full report

On this page

The convergence of generative digital art, algorithmic geometry, and clinical psychology presents a profound opportunity for computational exploration. Neurographic art, a therapeutic framework developed by Russian psychologist and architect Pavel Piskarev in 2014, relies on specific, structured drawing algorithms designed to externalize subconscious processes, alleviate psychological friction, and foster the development of new neural pathways1. Translating this inherently static, manual practice into a dynamic, interactive digital medium utilizing JavaScript requires the rigorous synthesis of multiple complex computational paradigms.

Architecting a living, interactive Neurographic system demands real-time kinematic line generation, continuous spatial intersection detection, dynamic topological rounding (filleting), and planar graph face extraction. Furthermore, this system must operate smoothly at high framerates within a browser environment, necessitating a deep understanding of HTML5 Canvas, WebGL, Signed Distance Fields (SDFs), and vector-based rendering engines. This comprehensive report provides an exhaustive analysis of the mathematical, geometric, programmatic, and psychological methodologies required to render and animate interactive Neurographic art.

The Psychological and Neuroanatomical Foundations of Neurographica

Before engineering a digital counterpart, it is essential to deeply deconstruct the analog algorithm of Neurographica and understand its clinical rationale. The theoretical foundation of this practice is built upon neuropsychology, analytical psychology, Gestalt principles, Psychosynthesis, and social psychology1. Piskarev’s algorithm dictates a precise sequence of creative actions designed to bypass the conscious, judging mind, thereby allowing the practitioner to project internal emotional states onto a visual plane without the constraints of traditional artistic perfectionism3.

The Expressive Therapies Continuum and Dementia

Art therapy employs nonverbal creative mediums to facilitate the communication of internal conflicts with the external environment. The Expressive Therapies Continuum (ETC) serves as a structured, evidence-based assessment framework that identifies the cognitive and emotional processes engaged during creative activities with specific artistic media4. The hierarchical structure of the ETC allows practitioners to analyze how individuals process information and link artistic expression directly to localized areas of brain function5.

In clinical applications, particularly concerning neurodegenerative conditions such as Alzheimer's disease, Lewy body dementia, Frontotemporal dementia (FTD), and Posterior Cortical Atrophy, art therapy has demonstrated the ability to stimulate multiple neural pathways associated with memory, perception, motor coordination, and symbolic processing4. Objective and nonobjective drawing tasks—such as creating abstract geometric figures or meandering lines—evoke distinct neuronal networks, activating the frontal, temporal, occipital, and parietal lobes6.

For example, Alzheimer's disease is characterized by neurofibrillary tangles and amyloid plaques that profoundly affect the fusiform gyrus within the temporal lobe and its interconnections to the frontoparietal association cortex, resulting in cognitive decline, visuospatial disorientation, and difficulties in facial recognition6. By engaging the kinesthetic and sensory levels of the ETC through structured, tactile drawing tasks, patients can tap into alternative motor pathways and cerebellar "memory genes" to maintain cognitive engagement and potentially slow the rate of clinical decline4. Cognitive drawing interventions, such as genograms, lifelines, or Neurographica, serve as nonpharmacological avenues to address these deficits, helping individuals process unresolved emotions without the need for complex verbalization4.

The Analog Neurographic Algorithm

The manual creation of Neurographic art follows a strict, step-by-step algorithm containing eight specific stages designed to guide the mind through psychological change2. While various algorithms exist within the discipline—such as the "NeuroTree" or the "T.R.U.E." algorithm (Theme, Resources, Unlock, Equalize)—the foundational mechanical process remains consistent2.

1. Generation of Neurographic Lines: Practitioners initiate the process by drawing continuous lines across a canvas. A true "neuro-line" is defined by its biomorphic, non-repeating nature. It must be explicitly non-linear, consciously changing direction unpredictably to mirror organic structures such as vines, biological neural networks, or dry, cracked earth1. The line should resist mental autopilot, flowing to the edges of the page to ensure no unresolved hanging ends7.

2. Conjoining (Rounding Intersections): As lines traverse the space, they inevitably intersect, creating sharp angles (nexus points). In Neurographic theory, these sharp corners represent internal conflicts, obstacles, mental rigidity, or emotional tension1. The practitioner must manually round out every intersection, smoothing the sharp angles into soft, organic curves. This process visually resolves conflict, mirrors internal conflict resolution, and symbolizes the ongoing process of the brain creating new positive associations and neural pathways1.

3. Integration of Archetypal Shapes: The inclusion of basic geometric forms allows the practitioner to model their inner world and manifest specific cognitive shifts. Each shape carries a specific symbolic weight2:

• Circles: Represent harmony, unity, wholeness, and connection, bringing softness and flow to the composition.
• Squares: Stand for structure, stability, rules, time, and grounded boundaries.
• Triangles: Symbolize action, direction, and dynamic, activating energy, utilized for making decisions or breaking through psychological blocks.

4. Coloring and Figure-Ground Segregation: Once the network of lines and rounded intersections is fully established, the resulting enclosed regions are filled with color. The application of color groups disparate sections, highlighting emergent patterns, establishing visual flow, and facilitating the expression of inner feelings3.

To digitize this methodology into a dynamic, moving interactive artwork, developers must transition from a discrete, static drawing paradigm to a continuous, real-time computational simulation. The system must autonomously generate organic lines, continuously detect where moving trajectories intersect, dynamically render smooth fillets at every nexus point, and accurately color the enclosed regions as they shift in topological space, all while maintaining responsiveness to user input.

Kinematic Line Generation: Simulating Biomorphic Growth

The initial technical hurdle in engineering a computational Neurographica system is the algorithmic generation of the neuro-line itself. Standard linear interpolation or basic trigonometric functions (such as sine waves) are fundamentally insufficient, as they exhibit predictable periodicity, directly violating the psychological rule that neuro-lines must be irregular and non-repeating to stimulate neuroplasticity7.

Stochastic Noise and p5.js Implementation

To introduce controlled unpredictability, Perlin noise or Simplex noise algorithms are utilized. Within the p5.js library, the noise() function provides smooth, continuous stochastic values. Unlike the standard random() function, which yields disjointed, chaotic outputs, Perlin noise generates harmonically related values that perfectly simulate the organic wandering of a drawn line10.

By seeding the noise function utilizing noiseSeed(), a generative system can guarantee strict reproducibility, ensuring that a specific mathematical state (the seed) always yields the exact same visual output10. To animate the line, a temporal variable (such as frameCount or millis()) is passed as an additional dimension to the noise function, causing the line coordinates to smoothly and organically undulate over time10.

The Differential Growth Algorithm

While stochastic noise can dictate the meandering path of a single line segment, it does not inherently model the complex space-filling, buckling behaviors characteristic of organic growth. To truly capture the aesthetic and structural complexity of Neurographica—which closely mirrors biological morphogenesis—the Differential Growth algorithm must be implemented12.

Differential growth operates on a system of connected nodes (vertices) that form a continuous polyline (edges)12. In each frame of the JavaScript simulation, a series of distinct vector forces are calculated and applied to every node in the system12:

 

As new nodes are continuously introduced into the system via adaptive subdivision, the line must buckle, fold, and meander upon itself to accommodate the increased volume within the confined space of the canvas. This cascading asymmetry produces undulating paths that perfectly replicate the appearance of neurons, intestines, or coral12. In a JavaScript implementation, optimizing the calculation of these forces is paramount. A naive approach requires [Figure omitted from source export] distance checks between all nodes to calculate repulsion, which will rapidly decimate framerates as the point count grows.

Spatial Partitioning for Real-Time Intersection and Proximity Detection

In a dynamic Neurographic artwork, thousands of nodes and line segments are constantly moving. To efficiently apply differential growth forces and to detect the line intersections that require psychological "conjoining," the system must rapidly identify neighboring nodes and intersecting paths. Evaluating every segment against every other segment is computationally prohibitive at 60 frames per second.

Broad-Phase Collision Optimization

To optimize proximity queries, the 2D canvas space must be logically partitioned. Two primary spatial data structures are utilized in JavaScript implementations to achieve broad-phase collision detection: Quadtrees and Spatial Hash Grids16.

 

For a continuously moving Neurographic artwork, a Spatial Hash Grid is generally preferred. Because the repulsive forces in the differential growth algorithm naturally push lines away from each other, node density remains relatively uniform across the active area. Furthermore, modern explorations into highly parallelized computing utilizing WebGL and WebGPU suggest that spatial hashing algorithms can be elegantly ported to GPU Compute Shaders, allowing for massive parallelization of intersection detection that bypasses the CPU entirely16.

Narrow-Phase Calculation of Path Intersections

Once the broad-phase spatial hash grid identifies line segments occupying the same local spatial cell, narrow-phase mathematical routines must confirm the exact sub-pixel coordinate of the intersection. For advanced vector-based libraries such as Paper.js, built-in methods like path.getIntersections(otherPath) abstract the underlying polynomial root-finding algorithms away from the developer23.

Behind the scenes, intersecting two parametric curves (such as cubic Bézier curves) involves isolating the roots of complex polynomials. Because a quadratic curve requires at least three points (an order [Figure omitted from source export]), and cubic curves require four points, finding the intersection of parametric curves [Figure omitted from source export] and [Figure omitted from source export] necessitates solving a system of equations for the parameters [Figure omitted from source export] and [Figure omitted from source export] where both the [Figure omitted from source export] and [Figure omitted from source export] coordinates match exactly26. Paper.js handles this efficiently via an optimized curve subdivision algorithm (often employing fat line clipping or Bezier clipping techniques), returning an array of CurveLocation objects that pinpoint the exact coordinate, tangent, and normal vectors at the nexus point23.

The Mathematics of Conjoining: Algorithmic Corner Rounding

The absolute psychological core of the Neurographica method is the manual, intentional rounding of all sharp intersections1. In a digital environment where lines are actively undulating, crossing, and breaking apart, this geometric fillet must be calculated and rendered continuously without human intervention. There are three primary technical paradigms for achieving this in a JavaScript environment: Vector Filleting, Raster/Filter Compositing, and Shader-Based Distance Fields.

Paradigm 1: Vector Filleting (Paper.js and Splines)

In a pure vector rendering environment (utilizing SVG or the HTML5 Canvas via Paper.js), intersections must be rounded using precise geometric calculations. When two line segments cross, they form an "X" shape containing four sharp internal angles.

To algorithmically round these corners, the system must execute the following sequence:

1. Identify the exact intersection point using narrow-phase algorithms.

2. Traverse outward along the four intersecting segments by a specified radius distance [Figure omitted from source export].

3. Split the existing paths and insert new vertices at these boundaries25.

4. Remove the sharp intersection vertex and inject a smooth curve bridging the newly created vertices28.

JavaScript libraries like Paper.js offer incredibly robust path manipulation tools to achieve this. The community-developed paperjs-round-corners plugin provides specific methods such as simple-cubic, cubic, and arc to automate this geometric process30. The arc method mathematically calculates offset paths parallel to the intersecting lines (inward and outward), finds the intersection point between these offset paths to locate the true center of the arc, and constructs a geometric curve that is perfectly tangent to both original line segments30. The cubic method achieves a similar smooth result by calculating tangent lines at the division points and utilizing their intersection to position the control points of a cubic Bézier curve30.

Alternatively, developers can utilize quadratic Bézier curves directly via the native HTML5 Canvas 2D API (ctx.quadraticCurveTo(cp1x, cp1y, x, y)). A custom utility function can calculate the angle between two intersecting vectors using the dot product of their normalized vectors, determine the required distance to the control points via trigonometric tangents, and inject the quadratic curve directly into the canvas rendering context29.

Another elegant approach to vector smoothing is the application of Chaikin's corner-cutting algorithm. Chaikin's algorithm smooths an angular polyline by iteratively replacing every original vertex with two new points, located exactly 1/4 and 3/4 of the way along the adjacent connected edges33.

While mathematically precise and infinitely scalable in resolution, explicit vector filleting becomes computationally heavy when hundreds of lines are continuously intersecting and moving. The topology of every path must be destructively modified, split, and rebuilt during every single frame of the animation, which can quickly overwhelm the CPU.

Paradigm 2: Raster/Filter Compositing (The "Gooey" Canvas Effect)

A highly performant alternative that effectively mimics the organic, fluid nature of Neurographica relies on raster-based image processing. By leveraging the HTML5 Canvas 2D API's native filter property and manipulating the globalCompositeOperation attribute, developers can achieve automatic, dynamic intersection rounding without any complex geometric calculations.

This rendering technique proceeds as follows:

1. Draw the Kinematic Lines: Render the dynamic, intersecting neuro-lines on an off-screen HTML canvas element using a thick, solid lineWidth35.

2. Apply a Gaussian Blur: Apply a CSS-style blur filter directly to the context (ctx.filter \= "blur(10px)"). This operation diffuses the hard edges of the rendered lines into soft gradients36. Critically, where multiple lines intersect and overlap, their blurred alpha channels sum mathematically, creating an area of significantly higher opacity at the nexus point.

3. Thresholding via Contrast: Immediately apply a high contrast filter (ctx.filter \= "blur(10px) contrast(500%)")37. The contrast filter acts as an aggressive alpha threshold. It forces all semi-transparent pixels resulting from the blur either to full 100% opacity or full 0% transparency.

The mathematical result of blurring and thresholding intersecting lines is the generation of a perfect, organic curve at all inner corners—a flawless digital manifestation of the Neurographic conjoining process. Because the operation is applied globally at the pixel level during the rasterization phase, the system does not need to compute where intersections occur; the rendering pipeline naturally rounds them as an optical illusion.

Furthermore, the globalCompositeOperation attribute (utilizing specific operators such as destination-out, source-atop, or xor based on the Porter-Duff compositing model) can be used to dynamically mask out interiors, subtract shapes, or manage complex overlapping layers38.

However, while visually stunning and easier to program, developers must be acutely aware of severe performance bottlenecks. Applying dynamic CSS and Canvas filters can cause significant framerate stuttering and performance drops. This is particularly prevalent on specific hardware architectures, such as Apple M1 devices utilizing the Metal WebGL backend in Chromium-based browsers, where applying backdrop-filter or heavy canvas filters forces the browser to expensively recalculate the blur matrix for every pixel on every frame, dropping the framerate significantly41.

Paradigm 3: Shader-Based Conjoining via Signed Distance Fields (SDFs)

For a truly robust, highly performant, and mathematically elegant solution that avoids the CPU bottlenecks of vector manipulation and the rasterization bugs of canvas filters, the Neurographic artwork can be rendered directly on the GPU using WebGL and GLSL (OpenGL Shading Language)44. In this advanced paradigm, lines are not treated as explicit geometry or rasterized strokes, but as continuous Signed Distance Fields (SDFs).

An SDF is a mathematical function that returns the shortest geometric distance from any arbitrary point in space to the surface of a defined shape. The sign of the returned value indicates whether the point is inside (negative) or outside (positive) the boundary45. By evaluating this function for every pixel concurrently (via 2D screen-space evaluation or 3D raymarching), complex shapes can be rendered with infinite precision and anti-aliasing45.

In GLSL, a dynamic neuro-line segment can be mathematically represented by the SDF of a capsule (a line segment possessing thickness and rounded caps). When two lines intersect, a naive union would simply use the standard min(a, b) function to combine their distance fields, which unfortunately results in a sharp, hard angular intersection48.

To achieve the vital Neurographic rounding effect computationally, developers utilize the Smooth Minimum (smin) function, an algorithmic technique heavily popularized by computer graphics researcher Iñigo Quílez49. The polynomial variant of smin gracefully and seamlessly blends the distance fields of intersecting shapes:

[Figure omitted from source export]

[Figure omitted from source export]

In this formulation, [Figure omitted from source export] and [Figure omitted from source export] represent the signed distances to the respective line segments, and the parameter [Figure omitted from source export] controls the smoothing radius or blending band size49. As the evaluation point approaches the intersection of the two lines, the [Figure omitted from source export] parameter becomes a non-zero positive value, which is then subtracted from the standard minimum distance. This mathematical operation seamlessly pulls the boundary outward at the inner corners, creating a perfectly smooth fillet that curves the intersection48. The polynomial variant is highly favored due to its extreme execution speed on the GPU, despite suffering from minor second-order derivative discontinuities49.

Implementing this pipeline in a library like p5.js involves initializing the canvas with createCanvas(width, height, WEBGL) and utilizing the createShader() function to load custom vertex and fragment shaders written in GLSL52. The array of moving line coordinates, calculated by the CPU's differential growth algorithm, is passed directly to the GPU memory via the setUniform() method52. The fragment shader then iterates through all provided line segments, evaluating their distance fields and combining them using the smin function54.

The resulting output is a fluid, interactive artwork where lines can dance, meander, and cross, with every single nexus point autonomously and instantly softening in real-time. This executes the core psychological and visual principle of Neurographica at an unwavering 60 frames per second, leveraging the massive parallel processing power of the GPU.

Topological Face Extraction and Dynamic Color Integration

The final fundamental stage of the Neurographic algorithm is the application of color to the enclosed regions created by the conjoined line network. In therapeutic practice, the addition of color serves to integrate fragmented areas, highlight emergent psychological patterns, and establish overarching visual harmony1. In a digital canvas where the boundaries of these regions are continuously shifting due to kinematics, determining what mathematically constitutes an "enclosed region" is a highly complex problem in computational geometry.

The Psychology and Neuroscience of Color Application

The choice of color in a Neurographic application is not merely aesthetic; it has measurable neurobiological impacts. Quantified electroencephalography (EEG) studies measuring brainwave activity reveal that specific colors trigger distinct neurophysiological responses56.

 

By understanding these neuropsychological responses, a computational Neurographica application can programmatically assign color palettes based on the desired therapeutic outcome—utilizing cool greens and yellows to induce a meditative state, or vibrant reds to stimulate focus and breakthrough energy.

Planar Straight Line Graphs (PSLG) and Face Extraction

To correctly apply these colors to the spaces between the lines, the network of intersecting neuro-lines must be mathematically treated as a Planar Straight Line Graph (PSLG)57. The system must algorithmically extract the bounded polygonal faces from this graph.

The computational approach to rigorous face extraction involves several sequential steps57:

1. Node Insertion and Subdivision: All intersections must be accurately calculated, and new nodes must be inserted at these precise coordinates, fracturing the continuous lines into discrete, non-intersecting straight edges57.

2. Adjacency Mapping: For every vertex in the graph, the algorithm compiles an adjacency list of connected edges. Crucially, these edges must be sorted sequentially by their outgoing radial angle in a counter-clockwise direction58.

3. Cycle Traversal (The Rightmost Turn Rule): The algorithm initiates a continuous walk along the edges of the graph. Upon arriving at any vertex, it consistently selects the "rightmost" (the most clockwise) outgoing edge. By maintaining this strict rotational turning rule, the traversal is mathematically guaranteed to follow the inner perimeter of a face until it returns to the starting node, thereby successfully extracting a closed geometric cycle57.

4. Winding Order and Area Calculation: The extracted boundary cycles are then analyzed using the shoelace theorem to compute their signed area. Positive calculated areas signify bounded interior faces (which can be safely filled with color), while a negative area calculation identifies the infinite exterior boundary of the graph, which must be ignored57.

Once the interior faces are successfully extracted, the HTML5 Canvas API can iterate through the vertices of each polygon, utilizing the standard beginPath(), lineTo(), and fill() sequence to dynamically render colors into the shifting cellular structures59.

Alternative Tessellation: Voronoi and Delaunay Diagrams

If strict algorithmic adherence to the exact line boundaries proves too computationally restrictive for real-time mobile environments, an alternative rendering paradigm utilizes spatial tessellation. By extracting a subset of the moving nodes from the neuro-lines, the system can rapidly compute a Delaunay Triangulation or its mathematical dual, the Voronoi Diagram60.

Libraries such as d3-delaunay (frequently utilized alongside p5.js) can efficiently partition the canvas into a series of Voronoi cells62. A Voronoi diagram partitions a 2D plane into regions based on the distance to a specific set of points, ensuring that every location within a given polygon is strictly closer to its generating node than to any other node in the system61. By dynamically coloring these Voronoi cells based on the underlying neuro-line positions, the artwork mimics a vibrant stained-glass or cellular coloring effect, continuously morphing and shifting in beautiful harmony as the structural neuro-lines undergo differential growth34.

Designing Interaction: The Meditative Digital Interface

Neurographic art is fundamentally an intentional, mindful psychological practice explicitly designed to alleviate stress, process trauma, and establish a state of mindful presence3. A purely autonomous, zero-interaction digital simulation removes the human element, reducing a therapeutic tool to a mere screensaver. Therefore, interactivity must be carefully programmed to map the user's input directly to the simulation's underlying mathematical parameters.

Using JavaScript event listeners, the position of the cursor (mouseX and mouseY variables in p5.js) can act as a dynamic, active force within the differential growth or SDF environment66.

• Interactive Attraction and Repulsion Mapping: The user's cursor can be programmed to emit a localized, intense repulsive force vector. This allows the user to literally "push" the neuro-lines around the canvas, simulating the psychological process of navigating through obstacles, breaking rigid thought patterns, and clearing mental space66.
• Intentional Conjoining Mechanics: Alternatively, to preserve the therapeutic nature of the practice, the system could pause the automatic smin or vector filleting algorithms. The user would then be required to manually click, tap, or drag over sharp intersections to activate the rounding logic at that specific local coordinate. This reintroduces the meditative, focused attention and deliberate pacing required by Piskarev’s original methodology, seamlessly merging digital computational power with human psychological intention.

Conclusion

The digitization of Neurographic art transcends the boundaries of simple drawing applications, entering the sophisticated realm of complex, interactive generative physics systems. By meticulously deconstructing Pavel Piskarev’s psychological algorithm into distinct, executable computational tasks, a fluid, living artwork can be realized entirely within a JavaScript browser environment.

The generation of the biomorphic neuro-line is elegantly handled by seeded stochastic Perlin noise and the physics-based Differential Growth algorithm, simulating organic, space-filling biological exploration. To manage the massive spatial calculations of moving intersections, spatial hashing provides the critical broad-phase optimization required to maintain real-time framerates. The absolute psychological core of the method—conjoining and rounding sharp corners—can be achieved geometrically through vector spline manipulation, composited via raster blur and contrast thresholding, or most robustly and performantly, computed natively on the GPU using Signed Distance Fields and smooth minimum (smin) polynomials.

Finally, treating the entire canvas as a Planar Straight Line Graph or a Voronoi tessellation enables rapid topological face extraction, allowing vibrant, psychologically targeted colors to breathe life into the shifting cellular structures. Through the application of these advanced computational graphics techniques, the therapeutic, stress-reducing properties of manual Neurographica are not compromised. Rather, they are elevated and transformed into a dynamic, interactive digital meditation, showcasing the profound and largely untapped synergy between clinical human psychology, neuroanatomy, and advanced creative coding.

Works cited

1. Introducing Neurographic Art \- Play Art With Kim, https://playartwithkim.com/neurographic-art/

2. Neurographica Algorithm: Draw Neurographic Art for Balance, https://expansionink.com/neurographica-algorithm/

3. What is Neurographic Art? \- Gel Press, https://gelpress.com/blogs/art-and-inspiration/what-is-neurographic-art

4. Neuroanatomical Basis of Art Therapy and Dementia: A Correlative, https://www.scirp.net/journal/paperinformation?paperid=144935

5. Neuroanatomical Basis of Art Therapy and Dementia \- SciRP.org, https://www.scirp.org/pdf/wjns\_1390836.pdf

6. (PDF) Neuroanatomical Basis of Art Therapy and Dementia, https://www.researchgate.net/publication/394771902\_Neuroanatomical\_Basis\_of\_Art\_Therapy\_and\_Dementia\_A\_Correlative\_Review\_and\_Implications

7. Neuroscience Behind the Lines: How Does Neurographica Work, https://expansionink.com/neuroscience-behind-neurographica/

8. NEUROGRAPHIC ART 101: BENEFITS, TECHNIQUES & A SIMPLE, https://toratherapeutics.com/wp-content/uploads/2024/02/neurographic-art-101-plus-examples-handout.pdf

9. Origin and power of neurographic art: a fusion of science and self, https://www.vanvaf.com/post/origin-and-power-of-neurographic-art-a-fusion-of-science-and-self-discovery

10. noiseSeed \- p5.js, https://p5js.org/reference/p5/noiseSeed/

11. algorithmic-art: Generate seed-reproducible p5 ... \- Agent Skills Library, https://skills.rest/skill/algorithmic-art-beirux

12. GitHub \- jasonwebb/2d-differential-growth-experiments: Visual, https://github.com/jasonwebb/2d-differential-growth-experiments

13. Exploring 2D differential growth with JavaScript | by Jason Webb, https://medium.com/@jason.webb/exploring-2d-differential-growth-with-javascript-1843fd51b0ce

14. Differential growth | Cycling '74 Documentation, https://docs.cycling74.com/learn/articles/geom-differential.growth

15. Differential growth playground, https://jasonwebb.github.io/2d-differential-growth-experiments/experiments/playground/

16. GPU-accelerated spatial hashing for collision broadphase \#1402, https://github.com/melonjs/melonJS/issues/1402

17. Cellular Automata — CMC Open University \- GitHub Pages, https://dl1683.github.io/cmc-open-university/topic.html?topic=cellular-automata

18. Quadtrees for 2D Games with Moving Elements \- Medium, https://medium.com/@bpmw/quadtrees-for-2d-games-with-moving-elements-63360b08329f

19. QuadTree or Spatial Hashing in ECS ? : r/gamedev \- Reddit, https://www.reddit.com/r/gamedev/comments/1jopdn4/quadtree\_or\_spatial\_hashing\_in\_ecs/

20. Why has my quadtree made no improvement to performance?, https://stackoverflow.com/questions/67351311/why-has-my-quadtree-made-no-improvement-to-performance

21. System Design: Geohashing and Quadtrees \- DEV Community, https://dev.to/karanpratapsingh/system-design-geohashing-and-quadtrees-1fe7

22. DOTS Quadtree \- Unity Discussions, https://discussions.unity.com/t/dots-quadtree/760991

23. PathItem \- Paper.js, https://paperjs.org/reference/pathitem/

24. Paper.js — Path, https://paperjs.org/reference/path/

25. Paper.js intersection pulling node position out of path object, https://stackoverflow.com/questions/74253910/paper-js-intersection-pulling-node-position-out-of-path-object

26. Numerical surface reconstruction with Non-Uniform Rational B-Splines, https://tore.tuhh.de/bitstreams/6e44c62f-c4a5-4db2-84e1-b0109d610a97/download

27. Bézier Curves: A Comprehensive Primer \- Scribd, https://www.scribd.com/document/853169396/A-Primer-on-Bezier-Curves

28. how to draw smooth curve through N points using javascript HTML5, https://stackoverflow.com/questions/7054272/how-to-draw-smooth-curve-through-n-points-using-javascript-html5-canvas

29. paper.js \- achieving smoother edges with closed paths, https://stackoverflow.com/questions/25936566/paper-js-achieving-smoother-edges-with-closed-paths

30. paperjs-round-corners \- Paper.js API Reference \- Typogram, https://paperjs.typogram.co/3rd-party-plugins/paperjs-round-corners

31. ShapePath \- PixiJS API Documentation, https://pixijs.download/v8.1.0/docs/scene.ShapePath.html

32. Drawing shapes with canvas \- Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Canvas\_API/Tutorial/Drawing\_shapes

33. Chaikin's corner cutting algorithm — smooth\_chaikin • smoothr, https://strimas.com/smoothr/reference/smooth\_chaikin.html

34. \[p5.js\] WIP. Gravity, repulsion, Delaunay triangulation, Voronoi, https://www.reddit.com/r/generative/comments/nj18m2/p5js\_wip\_gravity\_repulsion\_delaunay\_triangulation/

35. CanvasContext | Taro 文档, https://docs.taro.zone/en/docs/apis/canvas/CanvasContext

36. CanvasRenderingContext2D: filter property \- Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

37. New HTML Canvas Stuff: Filters \- BIT-101 \[2017-2023\], https://www.bit-101.com/2017/2021/07/new-html-canvas-stuff-filters/

38. Demystifying Compositing & Blending \- Niklas Gadermann, https://nik.digital/posts/compositing-blending

39. Chapter 2: Intro to CanvasRenderingContext2D, https://handmadeweb.games/guides/handmade-web-games/intro-to-canvasrenderingcontext2d

40. Compositing and Blending Level 1 \- W3C, https://www.w3.org/TR/compositing-1/

41. Css filter: blur causes significant stuttering and performance drop on, https://community.brave.app/t/css-filter-blur-causes-significant-stuttering-and-performance-drop-on-websites/419803

42. Performance issue with backdrop filter and WebGL canvas, https://issues.chromium.org/issues/414525204

43. How's the performance with css blur (filter and backdrop ... \- Reddit, https://www.reddit.com/r/Frontend/comments/186u5wy/hows\_the\_performance\_with\_css\_blur\_filter\_and/

44. WebGL Shader Techniques for Dynamic Image Transitions \- Codrops, https://tympanus.net/codrops/2025/01/22/webgl-shader-techniques-for-dynamic-image-transitions/

45. How to Create Stunning SDF and GLSL Art on the Web \- Medium, https://medium.com/@banyapon/how-to-create-stunning-sdf-and-glsl-art-on-the-web-adb0f4f9ed7e

46. 2D SDF \- Basic Shapes and Visualization \- Material Function Library, https://briz.artstation.com/blog/mnRN/2d-sdf-basic-shapes-and-visualization-material-function-library-ue5

47. Fast WebGL 3D Visuals for the Web | TC Labs \- TCdev.studio, https://tcdev.studio/labs/raymarched-sdfs

48. The Library — everything I wish someone had told me about shaders., https://shaddy.net/library

49. glslify/glsl-smooth-min: Smooth minimum functions for GLSL \- GitHub, https://github.com/glslify/glsl-smooth-min

50. Ray Marching \- The Graphics Codex, https://graphicscodex.com/app/app.html?page=\_rn\_rayMrch

51. Common Uniforms for GLSL Shaders (Time, Mouse, Resolution), https://shadergif.com/docs/common-uniforms/

52. Introduction to GLSL \- p5.js, https://p5js.org/tutorials/intro-to-glsl/

53. Creative Coding 1, MART 120 | createCanvas() \- GitHub Pages, https://montana-media-arts.github.io/creative-coding-1/modules/week-3/createCanvas/

54. Ray Marching with Three.js Guide | PDF | Shader \- Scribd, https://www.scribd.com/document/882338593/Ray-Marching-in-Three-js

55. uhh very cool game for cdww \- Documentation | p5js.ai — AI creative, https://p5js.ai/sketchdocs/s/uhh-very-cool-game-for-cdww

56. What's in a Color? A neuropsycholinguistic study on the effect of, https://www.researchgate.net/publication/360477766\_What's\_in\_a\_Color\_A\_neuropsycholinguistic\_study\_on\_the\_effect\_of\_colors\_on\_EEG\_brainwaves\_immediate\_emotional\_responses\_and\_English\_language\_vocabulary\_retention\_among\_Iranian\_young\_adults

57. Extracting Faces from Graphs, https://prideout.net/blog/pen-tool/

58. Is there an algorithm to determine the faces of a planar graph?, https://stackoverflow.com/questions/50996929/is-there-an-algorithm-to-determine-the-faces-of-a-planar-graph

59. Canvas Drawing \- Client API \- Documentation \- Lark Developer, https://open.larksuite.com/document/uYjL24iN/uMTNy4yM1IjLzUjM

60. Voronoi Diagram / Delaunay Triangulation, https://www.cs.cornell.edu/info/people/chew/Delaunay05.html

61. Day 22 \- Delaunay/Voronoi | Tyler Wolf \- Observable Notebooks, https://observablehq.com/@thetylerwolf/day-22-delaunay-voronoi

62. CC 181: Voronoi Area Mapped to Color \- p5.js Web Editor, https://editor.p5js.org/codingtrain/sketches/opmU\_UQqg

63. Coding Challenge 181: Weighted Voronoi Stippling \- YouTube, https://www.youtube.com/watch?v=Bxdt6T\_1qgc

64. On the cover: Voronoi diagrams and generative art \- Chalkdust, https://chalkdustmagazine.com/regulars/on-the-cover/on-the-cover-voronoi-diagrams-and-generative-art/

65. Delaunay dreams: t-shirt inspired p5.js adventure \- Bulkan Evcimen, https://bulkan-evcimen.com/delaunay-dreams/

66. interactive particles \- p5.js Web Editor, https://editor.p5js.org/ConnectedCat/sketches/3L8Gn3Y7f

67. CC 56: Attraction and Repulsion \- p5.js Web Editor, https://editor.p5js.org/codingtrain/sketches/6WL2O4vq0