Computational Neurography: Algorithmic Synthesis of Neurographic Art in JavaScript

Full report

On this page

Neurographic art—originally formalised as "Neurographica" by Russian psychologist and architect Pavel Piskarev in 2014—is a graphic framework at the intersection of expressive art therapy, cognitive transformation, and structured visual rules1. The aesthetic is defined by continuous, non-repeating organic curves known as "Piskarev lines," the systemic softening or "rounding" of sharp intersection corners, the structural incorporation of geometric archetypes, and the visual integration of enclosed regions through color stream archiving1.

When translating this dynamic, gesture-driven art form into digital generative systems using JavaScript—whether targeted at the HTML5 2D Canvas API, SVG vector graphics, or WebGL contexts—computer graphics engineers must resolve complex topological, geometric, and computational challenges8. Digitizing neurography requires converting intuitive human gestures into mathematically continuous splines, detecting segment-segment intersections across dynamic paths, computing local vector fillets at nexus points, and traversing planar graph topologies to identify and render enclosed visual regions6.

Conceptual Foundations and Visual Language of Neurographica

The manual practice of Neurographica is governed by a strict eight-step algorithm designed to mirror neural networks and transform subconscious psychological states into graphical forms1. In traditional media, an artist uses markers of varying thicknesses to establish emotional intent, populate the page with spontaneous line work, round every intersecting angle, integrate fundamental geometric shapes, and unify the composition using background color streams and overarching field lines1.

In a computational engine, reproducing these visual characteristics requires abstracting psychological principles into rigorous mathematical operations1. A digital neurography renderer cannot treat drawn paths as isolated raster strokes; instead, it must model the canvas as an interconnected geometric network where lines, shapes, and filleted corners form a unified planar graph9.

 

Mathematical Formulation of the Neurographic Line

A core requirement of computational neurography is the procedural generation of authentic Piskarev lines6. Standard periodic functions, such as sine or cosine waves, exhibit predictable symmetry that violates the core principle of non-repetition2. Conversely, pure random walks generate jagged, Brownian paths that lack the smooth continuity characteristic of biological neural structures4.

To achieve continuous organic flow ([Figure omitted from source export] or [Figure omitted from source export] continuity) with controlled directional unpredictability, a computational neurography engine typically employs vector fields driven by Fractional Brownian Motion (fBm) over coherent spatial noise8.

Noise Field Trajectory Integration

Let the position of a path walker at step [Figure omitted from source export] be defined by the planar position vector [Figure omitted from source export]. The local directional angle [Figure omitted from source export] at any canvas coordinate is derived by accumulating multiple octaves of 2D coherent noise:

[Figure omitted from source export]

In this formulation, [Figure omitted from source export] represents a coherent 2D noise function returning values in the range [Figure omitted from source export], [Figure omitted from source export] denotes the total number of noise octaves, [Figure omitted from source export] is the persistence factor governing amplitude decay across octaves ([Figure omitted from source export]), and [Figure omitted from source export] controls the base spatial frequency of the directional field.

To prevent the generated trajectory from forming closed loops or becoming trapped in local noise vortices, the local noise direction [Figure omitted from source export] is combined with a persistent global directional vector [Figure omitted from source export]:

[Figure omitted from source export]

[Figure omitted from source export]

The scalar weight [Figure omitted from source export] balances steady directional progression across the canvas against localized organic deviation, while [Figure omitted from source export] dictates the spatial resolution of the discrete path evaluation.

Parametric Spline Interpolation

Once a discrete sequence of path points [Figure omitted from source export] is generated, directly rendering linear segments between them creates visible sharp joints. The discrete point set is converted into a continuous smooth path using cubic Catmull-Rom splines or converted into cubic Bézier curves8. For any four consecutive points [Figure omitted from source export], the control points [Figure omitted from source export] and [Figure omitted from source export] for the cubic Bézier segment spanning [Figure omitted from source export] to [Figure omitted from source export] are calculated as:

[Figure omitted from source export]

[Figure omitted from source export]

Here, [Figure omitted from source export] represents the curve tension factor ([Figure omitted from source export] yields standard Catmull-Rom behavior). Transforming discrete walker steps into explicit parametric cubic splines allows the engine to compute exact tangents, normals, and analytical intersections required for downstream filleting operations8.

Computational Intersections and Filleting Algorithms

The hallmark of neurographic visual art is corner rounding—the deliberate transformation of sharp intersection angles into smooth, organic fillets1. In manual drawing, artists fill the acute corners formed at line crossings with dark ink to visually dissolve structural tension2. In JavaScript, this effect can be achieved through exact geometric vector filleting or raster-based image-space approximations6.

Exact Geometric Vector Filleting

Exact vector filleting modifies the geometric paths prior to rasterization, maintaining sharp precision regardless of rendering scale or export resolution6.

Intersection point identification begins by evaluating candidate line segment pairs [Figure omitted from source export] and [Figure omitted from source export]8. Solving the parametric linear system [Figure omitted from source export] yields the scalar parameters [Figure omitted from source export] and [Figure omitted from source export]:

[Figure omitted from source export]

[Figure omitted from source export]

Where [Figure omitted from source export] denotes the 2D vector cross-product determinant ([Figure omitted from source export])8. An intersection vertex [Figure omitted from source export] exists if [Figure omitted from source export] and [Figure omitted from source export]8.

When two unit vectors [Figure omitted from source export] and [Figure omitted from source export] diverge from an intersection node [Figure omitted from source export] at an acute interior angle [Figure omitted from source export], a rounding arc of target radius [Figure omitted from source export] must replace the sharp corner6. The distance [Figure omitted from source export] from the node [Figure omitted from source export] to the tangent anchor points [Figure omitted from source export] and [Figure omitted from source export] along each vector is derived as:

[Figure omitted from source export]

The corresponding tangent points are located at [Figure omitted from source export] and [Figure omitted from source export]. The arc center [Figure omitted from source export] is displaced from [Figure omitted from source export] along the normalized bisector vector [Figure omitted from source export]:

[Figure omitted from source export]

In the 2D rendering pipeline, a filled path shape is constructed by starting at node [Figure omitted from source export], drawing a straight line to [Figure omitted from source export], sweeping a circular arc centered at [Figure omitted from source export] with radius [Figure omitted from source export] to [Figure omitted from source export], and closing back to [Figure omitted from source export]2. Repeating this construction across all acute quadrants at every intersection point accurately replicates the conjoining step of traditional Neurographica1.

Raster Image-Space Approximations via Alpha Thresholding

For complex scenes containing thousands of dynamic intersections, calculating polynomial vector fillets in real time can incur substantial performance overhead8. An alternative image-space technique leverages SVG or Canvas filter pipelines combining Gaussian blurring with alpha-channel contrast thresholding (frequently termed metaball or gooey filtering)16.

In this process, all lines and shapes are rendered to an offscreen buffer using heavy stroke weights and rounded join properties20. A Gaussian blur filter (feGaussianBlur in SVG or standard canvas blur) with standard deviation [Figure omitted from source export] is applied, spreading the semi-transparent alpha channel outward from acute corner intersections16. Next, an alpha contrast matrix (feColorMatrix) clamps the soft blurred gradient back into a crisp, hard-edged boundary16:

[Figure omitted from source export]

By setting [Figure omitted from source export] and [Figure omitted from source export], any semi-transparent pixel near an intersection whose alpha value exceeds the threshold [Figure omitted from source export] is forced to full opacity ([Figure omitted from source export]), while lower alpha values drop to transparency ([Figure omitted from source export])16. This operation merges nearby line intersections into smooth, organic joins without requiring explicit geometric root-finding16.

Planar Graph Topology and Region Extraction

To implement the color archiving step of Neurographica—where distinct enclosed regions created by crossing paths are filled with harmonious color palettes—the rendering engine must extract closed face polygons from the line network1.

Graph Construction and Euler's Topological Guarantee

The set of intersecting splines is decomposed into an embedded planar graph [Figure omitted from source export]9. Every line intersection point, shape crossing, and canvas boundary anchor forms a vertex [Figure omitted from source export]9. Curve segments connecting adjacent vertices form undirected edges [Figure omitted from source export]9.

According to Euler's formula for planar graphs, the total count of vertices ([Figure omitted from source export]), edges ([Figure omitted from source export]), and bounded faces ([Figure omitted from source export]) for a planar embedding with [Figure omitted from source export] connected components satisfies9:

[Figure omitted from source export]

Planar Face Traversal Algorithm

To identify all enclosed face polygons for procedural color assignment, the engine executes a Planar Face Discovery algorithm utilizing half-edge data structures and counter-clockwise angular sorting9.

First, each undirected edge [Figure omitted from source export] is replaced by two directed half-edges, [Figure omitted from source export] and [Figure omitted from source export]13. For every vertex [Figure omitted from source export], all outgoing half-edges leaving [Figure omitted from source export] are evaluated for their polar angle [Figure omitted from source export] and sorted in ascending angular order around [Figure omitted from source export]9.

Next, the algorithm iterates through all unvisited directed half-edges to discover face boundaries9:

1. Begin a new face cycle path starting at half-edge [Figure omitted from source export] and mark [Figure omitted from source export] as visited9.

2. Arrive at node [Figure omitted from source export] via incoming half-edge [Figure omitted from source export].

3. Locate [Figure omitted from source export] within the angularly sorted outgoing edge array at node [Figure omitted from source export]9.

4. Select the immediately preceding half-edge in counter-clockwise order, [Figure omitted from source export], as the next link in the face traversal9.

5. Append vertex [Figure omitted from source export] to the current polygon path, set the active half-edge to [Figure omitted from source export], mark it as visited, and repeat until the traversal closes back at starting vertex [Figure omitted from source export]9.

Once all half-edges are processed, the traversal yields [Figure omitted from source export] closed polygon cycles9. Exactly one cycle corresponds to the unbounded outer perimeter surrounding the canvas9. The outer face is identified by computing the signed area [Figure omitted from source export] of each discovered polygon using the Shoelace formula9:

[Figure omitted from source export]

Polygons returning a negative signed area (or positive area, depending on screen-space coordinate orientation) represent interior bounded regions and are added to the rendering queue for procedural color filling9. The outer bounding cycle is discarded9.

Modular JavaScript Implementation Architecture

The following modern JavaScript code demonstrates an end-to-end framework for computational neurography. It includes vector structures, parametric line-line intersection solvers, tangent fillet geometry calculators, and canvas rendering logic8.

 

 

 

JavaScript

/\\  \ Vector2D: Fundamental 2D Linear Algebra Utility  \/ class Vector2D {   constructor(x, y) {     this.x \= x;     this.y \= y;   }

  add(v) { return new Vector2D(this.x \+ v.x, this.y \+ v.y); }   sub(v) { return new Vector2D(this.x \- v.x, this.y \- v.y); }   mult(n) { return new Vector2D(this.x \ n, this.y \ n); }   div(n) { return new Vector2D(this.x / n, this.y / n); }   mag() { return Math.sqrt(this.x \ this.x \+ this.y \ this.y); }   heading() { return Math.atan2(this.y, this.x); }   normalize() { const m \= this.mag(); return m \=== 0 ? new Vector2D(0, 0) : this.div(m); }   dot(v) { return this.x \ v.x \+ this.y \ v.y; } }

/\\  \ Computes the intersection point of two linear segments (p0-\>p1 and p2-\>p3)  \/ function findSegmentIntersection(p0, p1, p2, p3) {   const A1 \= p1.y \- p0.y, B1 \= p0.x \- p1.x, C1 \= A1 \ p0.x \+ B1 \ p0.y;   const A2 \= p3.y \- p2.y, B2 \= p2.x \- p3.x, C2 \= A2 \ p2.x \+ B2 \ p2.y;   const det \= A1 \ B2 \- A2 \ B1;

  if (Math.abs(det) \< 1e-9) return null; // Parallel or collinear lines

  const x \= (B2 \ C1 \- B1 \ C2) / det;   const y \= (A1 \ C2 \- A2 \ C1) / det;

  const rx0 \= (x \- p0.x) / (p1.x \- p0.x || 1e-9);   const ry0 \= (y \- p0.y) / (p1.y \- p0.y || 1e-9);   const rx1 \= (x \- p2.x) / (p3.x \- p2.x || 1e-9);   const ry1 \= (y \- p2.y) / (p3.y \- p2.y || 1e-9);

  if (((rx0 \>= 0 && rx0 \<= 1) || (ry0 \>= 0 && ry0 \<= 1)) &&       ((rx1 \>= 0 && rx1 \<= 1) || (ry1 \>= 0 && ry1 \<= 1))) {     return new Vector2D(x, y);   }   return null; }

/\\  \ Calculates vector fillet geometry (tangents, center, arc angles) for acute corners  \/ function computeFilletGeometry(node, dirA, dirB, radius) {   const vA \= dirA.normalize();   const vB \= dirB.normalize();      const cosTheta \= Math.min(Math.max(vA.dot(vB), \-1.0), 1.0);   const theta \= Math.acos(cosTheta);      // Ignore near-parallel or degenerate angles   if (theta \< 0.15 || theta \> Math.PI \- 0.15) return null;

  const halfTheta \= theta / 2;   const tangentDist \= radius / Math.tan(halfTheta);

  const tangentA \= node.add(vA.mult(tangentDist));   const tangentB \= node.add(vB.mult(tangentDist));

  const bisector \= vA.add(vB).normalize();   const centerDist \= radius / Math.sin(halfTheta);   const center \= node.add(bisector.mult(centerDist));

  const startAngle \= tangentA.sub(center).heading();   const endAngle \= tangentB.sub(center).heading();

  return { node, tangentA, tangentB, center, radius, startAngle, endAngle }; }

/\\  \ Renders a calculated vector fillet arc to an HTML5 Canvas 2D context  \/ function drawFillet(ctx, fillet, fillColor \= "\#0d0d0d") {   if (\!fillet) return;

  ctx.beginPath();   ctx.moveTo(fillet.node.x, fillet.node.y);   ctx.lineTo(fillet.tangentA.x, fillet.tangentA.y);   ctx.arc(     fillet.center.x, fillet.center.y,     fillet.radius,     fillet.startAngle, fillet.endAngle,     false   );   ctx.lineTo(fillet.node.x, fillet.node.y);   ctx.closePath();   ctx.fillStyle \= fillColor;   ctx.fill(); }

Comparative Technical Analysis and Implementation Strategies

Selecting an architectural pipeline for digital neurography depends on performance requirements, output media (web graphics vs. physical pen plotters), and real-time interaction constraints9.

 

Synthesis and Engineering Outlook

Synthesizing Neurographic art in JavaScript requires reconciling expressive visual practices with formal computational geometry1. By formalizing Piskarev lines as multi-octave noise fields, corner rounding as tangent vector fillets, and regional coloring as planar graph face traversals, developers can construct digital systems that retain the aesthetic integrity of the manual art form1.

To maintain optimal performance in complex web-based generative applications, future implementations should incorporate spatial partitioning data structures—such as R-trees or Quadtrees—to reduce segment intersection tests from [Figure omitted from source export] to [Figure omitted from source export]8. Furthermore, migrating image-space filter pipelines to custom WebGL fragment shaders enables real-time high-resolution rendering of dynamic neurographic compositions11. These hybrid architectures support scalable visual art generation, real-time creative coding tools, and interactive digital therapy applications5.

Works cited

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

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

3. An Introduction to Neurographic Art \- Art by Ro, https://artbyro.com/an-introduction-to-neurographic-art/

4. Neurographic Art \- Mindful Counseling Center LLC, https://mindful-counseling-center.com/neurographic-art/

5. NeuroGraphica® Myths vs. Reality: What You Should Know About, https://www.neurographicart.life/blog/neurographica-vs-art-therapy

6. Neurographic Art \- Basics \- Alison Hazel Art, https://www.alisonhazelart.com/neurographic-art-basics/

7. Introduction to Neurographica Method | PDF | Psychological Concepts, https://www.scribd.com/document/898550093/NeurographicaGuide-byAntjeHoward2025

8. How to calculate intersection point of a line on a circle using p5.js, https://stackoverflow.com/questions/57891494/how-to-calculate-intersection-point-of-a-line-on-a-circle-using-p5-js

9. Finding faces of a planar graph, https://cp-algorithms.com/geometry/planar.html

10. A First Look At Generative Art With p5.js \- Dennis O'Keeffe, https://www.dennisokeeffe.com/blog/2021-02-12-a-first-look-at-generative-art-with-p5js

11. Neurographic Art Explorations: From Drawing to Digitising \- Skillshare, https://www.skillshare.com/en/classes/neurographic-art-explorations-from-drawing-to-digitising/1276036100

12. Planar Graph Face Discovery \- GitHub, https://github.com/ammanvedi/planar-face-discovery

13. JavaScript graph library, for embedding and drawing planar graphs, https://forums.raspberrypi.com/viewtopic.php?t=333342

14. Seven Steps of a Neurographica Algorithm (DOWNLOAD a PDF doc), https://neurographic.art/2024/08/28/seven-steps-of-a-neurographica-algorithm-download-a-pdf-doc/

15. Calculate circle-line intersection with JavaScript and p5.js, https://cscheng.info/2016/06/09/calculate-circle-line-intersection-with-javascript-and-p5js.html

16. SVG Gooey Blob Effect with feGaussianBlur and feColorMatrix, https://animationpatterns.art/animations/gooey-blob-construction/

17. The Gooey Effect | CSS-Tricks, https://css-tricks.com/gooey-effect/

18. Line Intersection \- p5.js Web Editor, https://editor.p5js.org/rjgilmour/sketches/765l0Z2EZ

19. Fable 5.1 · 100 HTML Files \- GitHub Pages, https://miaai-lab.github.io/Fable-5.1-100-HTML-Files/

20. CSSボタンデザイン WEB制作・ブログで使える \- Pa-Tu, https://pa-tu.work/category/6

21. Reporting all faces in a planar graph \- MathOverflow, https://mathoverflow.net/questions/23811/reporting-all-faces-in-a-planar-graph

22. The New and Revised 8 Steps of the Algorithm \- Neurographica, https://www.youtube.com/watch?v=oDkNsewwWE4