Advanced Line-Based Visual Systems: Perceptual Mechanisms, Mathematical Frameworks, and Rendering Techniques

Full report

On this page

The deployment of pure line-based geometry in high-end interactive graphics represents a highly specialized discipline that bridges computational mathematics, neurobiology, and aesthetic design. By systematically stripping away photorealistic textures, complex lighting models, and standard physical shading, line-based rendering isolates the foundational mechanisms of human visual perception. When meticulously structured and mathematically manipulated, simple geometric primitives—such as concentric circles, radial lines, continuous contours, and parallel grids—possess the capacity to generate overwhelming impressions of depth, continuous motion, physical vibration, and volumetric spatial folding without relying on literal 3D assets. This research report exhaustively investigates the perceptual triggers, mathematical structures, animation strategies, and graphics pipeline techniques required to render flawless, artifact-free line systems for interactive visual computing. Heavy inspiration is drawn from Optical Art (Op Art) pioneers such as Bridget Riley and Victor Vasarely, whose analog experiments in the mid-twentieth century laid the cognitive groundwork for modern procedural shader programming.

Perceptual Mechanisms of Apparent Motion and Figure-Ground Instability

The human visual system is a highly complex, constructive biological network that evolved to process the chaotic, fractal nature of natural scenes. Artificial, computationally generated line systems deliberately subvert these neural pathways. By bombarding the visual cortex with unnatural spatial frequencies and edge data, these systems force the brain to construct motion and depth as a byproduct of sensory overload.

Spatial Frequency, Contrast Sensitivity, and the 1/f Spectrum

In natural environments, visual scenes typically present a spatial frequency amplitude spectrum that is inversely proportional to the frequency, mathematically denoted as [Figure omitted from source export]1. When amplitude is plotted against spatial frequency on logarithmic coordinates, the spectrum approximates a slope of \-11. The human visual cortex has evolved to process this specific distribution with maximum metabolic efficiency, utilizing sparse neural encoding1.

When presented with high-contrast, strictly periodic line arrangements—such as pure square-wave or sine-wave gratings—this natural statistical distribution is abruptly violated. The human visual system exhibits maximum sensitivity to spatial frequencies hovering near 3 cycles per degree (cpd) of the visual angle1. High-contrast striped configurations at or near this threshold trigger an excessive, non-sparse neural response in the primary visual cortex (V1)1. The resulting hyper-metabolic demand manifests as "pattern glare," a physiological phenomenon that causes the viewer to perceive anomalous colors, shimmering edges, and severe figure-ground instability1. The perceptual vibrations often experienced when viewing Op Art pieces, such as Bridget Riley's seminal work Fall, are direct consequences of this cortical hyperexcitability4. When the retinal image departs drastically from the [Figure omitted from source export] distribution, orientation-sensitive simple cells in V1 become flooded, leading to the hallucination of motion where the physical geometry remains static1.

The Role of Microsaccades and Retinal Shifting

Even when a viewer attempts to fixate perfectly on a static image, the human eye performs involuntary, rapid, microscopic movements known as microsaccades8. In heavily patterned, high-contrast images, the visual system struggles to maintain a fixed perceptual anchor due to the repetitive nature of the geometry9.

The Enigma illusion, an iconic kinetic Op Art piece created by Isia Leviant, provides the definitive neurobiological case study for microsaccade-driven apparent motion8. The image consists of concentric, uniform rings superimposed over tightly packed radial lines, commonly referred to as MacKay rays. Viewers typically perceive continuous, trickling, rotational motion streaming within the rings8. High-precision eye-tracking studies have conclusively demonstrated that the onset, cessation, and speed of this illusory motion directly correlate with the occurrence of microsaccades8. The miniature shifts of the retinal image over the high-frequency line intersections are processed by the medial superior temporal (MSTd) area of the brain—a region responsible for computing real, complex optic flow such as physical expansion, contraction, and rotation12. The MSTd neurons integrate these shifting intersections as physical movement, though neurological imaging shows they require an additional 15 milliseconds of processing time to interpret the illusion compared to recognizing genuine physical motion12.

Peripheral Vision, Motion Capture, and Vector Illusions

Illusory movement is often amplified in the peripheral visual field, where spatial resolution decreases, rod cells dominate, and motion detection mechanisms become hyper-sensitive. When certain static, luminance-polarized patterns are shifted across the peripheral visual field—either via physical head movement or virtual camera translation—they elicit a strong sense of relative motion perpendicular to the true motion vector12. This phenomenon relies heavily on spatiotemporally tuned, orientation-sensitive units within the V1 cortical area12.

Furthermore, phenomena like the Pursuit-Pursuing illusion and the Sunburst illusion rely on the interaction between smooth-pursuit eye movements and underlying radial line patterns13. When the eye tracks a moving target across a dense radial grid of sectors, a dazzling impression of bursting light or rotational flow spontaneously generates in the background13. This is related to the principle of "motion capture," wherein the brain attempts to resolve ambiguity. If superimposed dots are added to a static grid of concentric oblique lines, moving the head creates an illusory rotation of the circles; the visual system subsequently "captures" the static dots, forcing them to appear to rotate in unison with the background, despite lacking any physical motion vectors of their own12.

Depth-from-Contour Cues and Figure-Ground Instability

Lines are the primary mechanism by which the visual cortex detects edges and boundaries. By manipulating the density and curvature of continuous lines, graphic systems can exploit depth-from-contour cues. When parallel lines bend synchronously, the brain interprets the deviation not as a distortion on a 2D plane, but as a projection of a 3D volumetric fold. This forces figure-ground instability. Because the lines lack occlusion, lighting, or shading cues, the brain continuously flips its interpretation of the geometry, oscillating between perceiving convex extrusions and concave intrusions.

Mathematical Formalization of Moiré and Line Interference

Moiré patterns are large-scale wave interference phenomena that arise when two partially opaque, periodic structures are superimposed16. In graphic systems, overlapping line arrays generate mathematically predictable interference fringes. The mathematical modeling of these fringes relies heavily on indicial equations, which map the intersections of the two parent grids into a new, lower-frequency geometric structure17.

Indicial Equations and Linear Superposition

Let the first periodic line figure be described by an indexed family of curves [Figure omitted from source export], where [Figure omitted from source export] is an integer index representing specific, uniformly spaced lines in the figure17. Let the second superimposed figure be [Figure omitted from source export], indexed by [Figure omitted from source export]17. The resulting moiré interference pattern is a newly emergent family of curves whose index [Figure omitted from source export] satisfies a simple linear combination, most commonly [Figure omitted from source export]18.

When two sets of parallel lines with differing spacings ([Figure omitted from source export] and [Figure omitted from source export]) and a relative rotational slope ([Figure omitted from source export]) are superimposed, a magnified interference grid is formed. Assuming a horizontal grating with spacing [Figure omitted from source export] is intersected by a grating with spacing [Figure omitted from source export] tilted at a slope [Figure omitted from source export], the algebraic equations for the individual lines are [Figure omitted from source export] and [Figure omitted from source export]18. Substituting these indices into the primary indicial equation [Figure omitted from source export] yields the equation for the resulting moiré lines:

[Figure omitted from source export]18.

This dictates that the spacing of the emergent moiré fringes is directly proportional to the term [Figure omitted from source export]. As the physical line spacings [Figure omitted from source export] and [Figure omitted from source export] approach equality (meaning the grids are nearly identical), the denominator approaches zero. Consequently, the moiré fringe spacing approaches infinity, creating massive, highly sensitive bands of light and dark that shift dramatically in response to microscopic translations of either layer16. This mathematical sensitivity is the core driver of optical speedup, where the apparent motion of the interference pattern moves significantly faster than the physical movement of the underlying layers.

Circular, Radial, and Curvilinear Superposition

Overlaying non-linear structures generates complex algebraic curves that form the basis for many mesmerizing visual effects:

• Concentric Circles: Superimposing a set of concentric circles defined by [Figure omitted from source export] with a horizontally shifted set [Figure omitted from source export] results in moiré fringes that form perfect hyperbolas if the grid spacing [Figure omitted from source export]. If the spacings differ ([Figure omitted from source export]), the interference fringes morph into complex Cartesian ovals18.
• Concurrent Lines (Radial Rays): Superimposing two sets of radial lines originating from different center points that are horizontally shifted by distance [Figure omitted from source export] creates a moiré pattern described geometrically by parabolas18.
• Circles and Parallel Lines: Overlaying concentric circles with parallel straight horizontal lines generates interference fringes shaped like parabolas, the focus and directrix of which depend entirely on the relative line spacing versus the circle density18.

Taxonomy of Line-Based Mesmerizing Techniques

Implementing line-based aesthetics requires a systematic approach to geometric rendering. The following taxonomy categorizes the primary techniques used in high-end graphics to induce perceptual instability, spatial depth, and hypnotic motion.

Orthogonal and Grid-Based Systems

This category relies on variations of the standard Cartesian plane, manipulating straight lines and strict angles to create rigid, structured illusions. Striped surfaces and checker-like structures fall into this domain. While fundamentally simple, tightly packed orthogonal grids create intense figure-ground instability. Warped grids, popularized by Victor Vasarely's Vega series, take a standard 2D Cartesian grid and apply localized convex or concave spherical projection mathematical warps19. By exponentially expanding the distance between lines at the center of the warp and compressing them at the edges, a powerful illusion of a 3D hemisphere bursting through the 2D plane is achieved, heavily relying on magnification and minification20. Crosshatched fields utilize perpendicular layering, where varying the density of the crosshatch mathematically simulates shadows and volumetric ambient occlusion without requiring a 3D lighting engine.

Radial and Angular Systems

These systems reject the Cartesian grid in favor of polar coordinates, generating visuals that pull the viewer's eye toward specific vanishing points. Concentric lines and nested polygons (such as tightly packed octagons or hexagons) create tunneling effects that trigger looming responses in the brain. MacKay Ray arrays consist of dense fields of perfectly straight, radial lines converging on a single central point13. Used as a static background, these rays capture the motion of any object superimposed over them, forcing the brain to perceive the static background lines as rotating or vibrating due to the extreme spatial frequency clustering near the origin10.

Organic, Curvilinear, and Continuous Systems

This category abandons strict geometry for mathematical fluidity, simulating natural phenomena. Sinusoidal line displacement, often referred to as Riley waves, subjects parallel vertical lines to varying amplitude and frequency sine-wave displacements across the horizontal axis. As seen in Bridget Riley's Fall, tightly packed sine waves of shifting phases create sudden visual compressions and expansions4. This generates a severe depth-from-contour cue, making the flat plane look like cascading, folded fabric. Contour fields and continuous distance fields utilize 2D or 3D procedural noise functions (such as Simplex or Perlin noise) to generate a fluid, non-intersecting topographic map21. The lines represent fixed intervals of the underlying noise threshold, creating an organic, breathing aesthetic mimicking geographic elevation maps. Curved line bundles utilize bezier curves or splines grouped in tight proximity, generating a sense of fluid dynamics, vector flow, or magnetic flux.

Interference and Superposition Systems

Moiré systems and interference fringes rely entirely on the superposition of two or more of the aforementioned systems. Scan-line structures overlaid on slightly rotated copies of themselves create dynamic, sweeping bands of light and dark16. Layered line fields with slightly different transforms produce a beat frequency that creates a macro-level pattern16. These systems are highly effective for interactive sites, as mapping the mouse position to a subtle parallax shift of one layer creates violent, highly responsive topological shifts in the moiré pattern.

Animation Strategies for Flicker-Free Continuous Motion

Traditional raster animation relies on altering luminance or position in discrete frames. In dense line systems, modifying luminance directly or jumping line positions results in high-frequency temporal aliasing, commonly perceived as strobe or edge-crawl. This destroys the optical illusion and causes severe visual fatigue. To maintain elegance, animation must rely on fluid geometric transformations rather than discrete frame-by-frame translation.

Continuous phase shifts offer the most reliable method for animating wave structures. Instead of moving a line field along the physical X or Y axis—which can cause raster snapping and subpixel shimmering—animation is achieved by continuously modulating the phase parameter of a trigonometric function. For a procedural line generated by the function [Figure omitted from source export], advancing the time variable [Figure omitted from source export] creates the illusion of infinite wave propagation without the geometric coordinates physically translating in world space.

Line-wave propagation provides a method for simulating flow without altering position. This is achieved by smoothly modulating the thickness of static lines using a moving spatial wave. A wide line tapering gradually into a thin line creates a localized directional vector in the brain. Passing a low-frequency sine wave over the lineWidth uniform in a fragment shader makes the entire line field appear to breathe or flow linearly, completely circumventing edge-crawl because the center coordinates of the lines never move.

Rotational shear is highly effective for animating concentric circular arrays. By rotating nested concentric lines at speeds inversely proportional to their radius, the inner rings rotate significantly faster than the outer rings, simulating fluid vortex dynamics or celestial mechanics. Because the motion is continuous and follows the exact tangent of the curve, antialiasing algorithms resolve the edges smoothly without perpendicular raster clashes. Similarly, radial expansion is achieved by modulating the modulo distance of a polar coordinate field over time, causing circles to infinitely radiate outward from a central point.

Depth-based line fading and perspective compression are critical for systems moving through Z-space. As lines recede into the distance in a 3D projection, their spatial frequency exponentially approaches infinity, eventually exceeding the display's resolution and causing brutal moiré noise. Applying a depth-fade—attenuating the line's alpha transparency to zero based on the camera distance—masks this Nyquist limit violation. This simulates atmospheric scattering while protecting the visual cortex from high-frequency temporal flashing.

Curvature transitions involve morphing between geometric states by interpolating the mathematical parameters of the field rather than the vertex positions. For example, morphing a grid from a rigid linear state to a spherical warp is achieved by slowly increasing the magnitude and radius of the distortion vector in the shader, yielding a perfectly fluid topological transformation.

Advanced Antialiasing and High-DPI Rendering Implementation

Rendering densely packed lines on standard raster displays is fraught with aliasing artifacts. Jagged edges (stair-stepping) and temporal aliasing (shimmering) instantly ruin the perceptual elegance of line systems. Standard Multisample Anti-Aliasing (MSAA) operates at the rasterization stage along the edges of polygon geometry. For complex procedural line systems generated entirely within a fragment shader (where the geometry is often just a single screen-spanning quad), MSAA is completely useless. Supersampling (SSAA)—rendering the entire frame at a higher resolution and downscaling—is effective but carries an often prohibitive computational cost for real-time web deployment23.

Analytical Line Distance Fields and Derivative Smoothing

The most robust and performant solution for procedural line graphics involves Signed Distance Fields (SDFs) and analytical antialiasing, a technique heavily championed in graphics programming by researchers like Inigo Quilez24. In this paradigm, a shader calculates the mathematical distance [Figure omitted from source export] from the current pixel fragment to the theoretical center of the line25.

Because mathematically pure SDF gradients have a length of 1.0, the transition between the line and the background can be perfectly smoothed at the pixel level26. However, scaling the coordinate system or applying perspective transforms breaks the 1:1 mapping between the mathematical distance and the physical screen pixels26. To solve this, the GLSL derivative function fwidth(d) is utilized26. The fwidth function calculates the rate of change of a variable using fragment-based numerical derivatives, defined mathematically as the L1-norm: [Figure omitted from source export]26. This provides an accurate, real-time estimate of how fast the distance field is changing across one physical screen pixel, regardless of perspective, screen resolution, or camera zoom26.

Implementation requires utilizing the GLSL smoothstep function26. While inferior implementations use arbitrary constants for blurring, the mathematically perfect antialiased edge is achieved via derivative-based edge smoothing:

 

 

 

OpenGL Shading Language

float w \= fwidth(d); float alpha \= smoothstep(radius \+ w, radius \- w, d);

This algorithm guarantees that the line edge is blended exactly over the width of a single pixel, yielding buttery-smooth contours26. The human eye perceives the non-linear falloff of the Hermite interpolation utilized in the smoothstep function as significantly sharper and smoother than standard linear interpolation26.

Controlled Frequency Modulation and Clamping

When line density becomes too extreme—such as the vanishing point of MacKay rays or a severely scaled moiré pattern—the spacing between lines drops below a single pixel. Even with fwidth, this results in chaotic sub-pixel flickering21. The solution is frequency clamping21. The shader continuously measures the spatial frequency of the pattern using derivatives. When the frequency exceeds the Nyquist limit of the display, the shader halts the analytical line rendering and interpolates the fragment color directly to the mathematical average of the line and background colors (e.g., resulting in a smooth 50% gray)21. This analytically integrates the signal, replacing noisy aliasing with a smooth, gradient fade21.

Mobile and Desktop Rendering Considerations

Deploying line systems across varying hardware ecosystems requires addressing the physical realities of display technology. While modern desktop monitors generally utilize standard RGB liquid crystal arrays, mobile displays frequently leverage OLED technology with complex subpixel layouts.

PenTile Subpixel Arrays and OLED Artifacts

High-DPI mobile displays, particularly OLEDs, present a severe challenge for line-based rendering. Unlike traditional LCDs that utilize an identical RGB stripe for every pixel, many mobile OLEDs utilize PenTile subpixel arrangements, such as RGBG (Red-Green-Blue-Green) or Diamond Pixel matrices33.

In a PenTile display, there are half as many red and blue subpixels as green ones. Pixels are forced to share red and blue subpixels with their immediate neighbors to maximize packing density and prolong panel lifespan, as blue OLED materials degrade faster34. While operating systems use specialized subpixel rendering to smooth typography for these specific matrices, WebGL and OpenGL fragment shaders generally operate entirely oblivious to the hardware's subpixel layout33.

When a standard shader outputs a mathematically perfect 1-pixel wide white line diagonally across an RGBG OLED screen, the line must activate red, green, and blue subpixels to achieve white. Because the subpixels are physically staggered and shared, the line will exhibit aggressive color fringing (chromatic aberration) and physical serration36. Straight lines can appear to have tiny "horns," and closely packed parallel lines will dissolve into a noisy, colored checkerboard pattern36. Worse, when this 1-pixel line moves slowly across the screen, the subpixels pop on and off asynchronously, creating a boiling, shimmering effect known as "pixel crawl"33.

Common Artifacts and Fixes

The following table categorizes the most frequent rendering artifacts encountered in line systems and provides explicit implementation fixes.

Safe Contrast Management and Visual Stress

Creating mesmerizing visual systems requires navigating a narrow, precarious corridor between intense perceptual engagement and physiological harm. Improper contrast and frequency management can trigger visual stress, migraines, and, in severe cases, photosensitive epileptic seizures1.

Pattern Glare and Cortical Overload

As established by researchers such as Arnold Wilkins, striped configurations featuring equal width and spacing (a 50% duty cycle) at approximately 3 cycles per degree are visually toxic to a subset of the population1. To create a premium, comfortable interactive experience, strict 50% duty cycles should be actively avoided. Varying the width of the lines via sine waves, procedural noise, or variable spacing forces the spatial frequency to distribute across a much broader spectrum, diluting the localized cortical hyper-response2.

Furthermore, reducing absolute luminance contrast significantly limits the hemodyamic response in the visual cortex1. Rather than rendering pure black lines on a pure white background, utilizing dark gray lines on a deep blue or slate background preserves the geometric clarity while vastly reducing the harsh retinal burn and subsequent pattern glare1. Visual intensity should be increased through the complexity of the geometry and the elegance of the motion, rather than through high-frequency luminance flashing.

Accessibility Standards

The Web Content Accessibility Guidelines (WCAG) 2.1 strictly prohibit elements that flash more than three times within any one-second period (the Three Flashes threshold) to protect users against photosensitive epilepsy41. High-speed alternating line phases, even if intended as continuous motion, can inadvertently act as flashes if the lines are thick enough to dominate the visual field.

Similarly, the ITU-R BT.1702 standards warn against specific spatial patterns that drift or alternate rapidly, equating high-contrast alternating spatial frequencies to full-screen luminance flashes40. Smooth, continuous, and unidirectional flow is generally safe; oscillating back-and-forth phase shifts at frequencies between 3 Hz and 30 Hz are highly dangerous and must be strictly avoided40.

Severity Matrix for Visual Stress

To guide the design of line-based interactive graphics, the following severity matrix categorizes patterns and animations by their potential to induce visual stress, aiding in safe development.

Fifteen Original Line-Scene Concepts for Premium Interactive Sites

To deploy these theoretical frameworks in premium, high-end interactive web or spatial computing environments, the following fifteen original concepts have been formulated. These concepts rely exclusively on math-driven lines, utilizing fwidth antialiasing, continuous transformation, and controlled spatial frequencies to generate hypnotic visuals without relying on external textures.

Concept 1: The Breathing Topographic Map

This system utilizes a continuous distance field driven by 3D Simplex noise. The [Figure omitted from source export] and [Figure omitted from source export] coordinates of the screen sample the noise, while the [Figure omitted from source export]\-axis of the noise dictates the geographical elevation. The fragment shader draws smooth mathematical contour lines at fixed elevation intervals using a modulo operator. As the user moves the cursor, the [Figure omitted from source export]\-slice of the noise is advanced smoothly, causing the entire topographic map to seamlessly breathe, shifting its valleys and peaks organically without any rigid linear translation across the screen.

Concept 2: Parabolic Moiré Pendulum

Two sets of perfectly straight, parallel lines are rendered on separate conceptual layers using analytical SDFs. The top layer swings along a slow, mathematically perfect pendular arc driven by a low-frequency sine wave. Because of the slight angular deviations during the swing, the indicial intersection of the two grids creates massive, sweeping parabolic bands of light and dark that wash across the screen. This optical speedup generates a volumetric illusion from purely 2D intersecting planes.

Concept 3: Vasarely's Lungs (Spherical Warp)

A dense, uniform Cartesian grid of subtle gray lines on a dark background acts as the canvas. Two invisible spheres orbit the center of the screen based on Lissajous curves. As they pass over the grid, a localized spatial warp pushes the grid outward (concave distortion), expanding the lines spherically. The overlapping, rotating spheres create a rhythmic, breathing expansion and contraction of the geometric space, mirroring the biological expansion of lungs and inducing profound depth-from-contour cues.

Concept 4: OLED-Optimized Contour Ocean

Designed specifically to prevent PenTile subpixel crawl on mobile devices, this scene uses a field of smooth, horizontal bezier curves. The line width is strictly clamped to a minimum of 2.0 pixels in screen space, and the color is a soft, monochromatic cyan. A scrolling 2D noise field vertically displaces the coordinates of the curves, creating gentle, overlapping ocean swells. The low contrast and clamped line width guarantee a physically flawless render on high-DPI OLED screens without chromatic fringing.

Concept 5: The MacKay Sunburst Reactor

A direct tribute to the neurological Sunburst illusion. A dense array of 40 ultra-thin radial lines extends from the center of the screen to the edges. A slightly luminous, soft-edged ring slowly orbits the center point. As the user tracks the ring with their eyes, their smooth pursuit eye movements across the radial background trigger the biological Sunburst illusion, creating perceived, dazzling explosions of light at the center point that do not actually exist in the pixel data.

Concept 6: Phase-Shifted Interference Fringes

A screen filled with 500 perfectly vertical lines. Rather than physically moving the lines (which causes aliasing), their alpha transparency is driven by a high-frequency sine wave: [Figure omitted from source export]. By offsetting the phase of this wave slightly for each successive vertical line, diagonal waves of opacity travel continuously downward. This creates a hypnotic, cascading waterfall effect that is entirely immune to temporal edge-crawl.

Concept 7: Riley's Cascade (Rotational Shear)

Heavily inspired by Bridget Riley's Fall. Dense vertical lines are mapped to a mathematical displacement function that applies a localized rotational shear based on the mouse cursor's position. The lines twist and compress around the cursor like a fluid vortex. The sudden compression zones generate immediate figure-ground instability, while derivative-based frequency clamping protects the center of the vortex from temporal aliasing and visual noise.

Concept 8: Depth-Faded Vector Flow Field

A true 3D field of short, disconnected line segments aligned to an underlying flow field generated by curl noise. The lines rotate smoothly in 3D space to follow the invisible magnetic forces. To prevent extreme moiré noise in the background, a logarithmic depth-fade smoothly transitions the lines to the background color based on their distance from the camera, simulating atmospheric depth and maintaining a sparse, elegant visual spectrum.

Concept 9: Smooth-Width Magnetic Flux

A series of 50 concentric circles where the stroke width is strictly non-uniform. The width of each circle is modulated by the dot product of the circle's normal vector and a slowly rotating global directional vector. This creates the powerful illusion of a light source or magnetic flux illuminating one side of the rings. The flux shifts smoothly in a circular motion, rendering 3D volumetric lighting using only 2D line width modulation.

Concept 10: Hexagonal Moiré Resonator

Two arrays of tightly nested hexagons are drawn using SDFs. The background array is completely static. The foreground array undergoes a microscopic, continuous scale oscillation, scaling from 1.0 to 1.05 and back. Because the lines of the nested hexagons are nearly parallel, the tiny 5% scaling discrepancy forces a massive, low-frequency Moiré beat pattern to pulse violently outward from the center, delivering high visual impact with practically zero computational overhead.

Concept 11: Iso-Contour Audio Visualizer

Designed for real-time WebGL audio applications. A central point emits concentric, perfectly circular rings using a fractional distance field. As the rings expand outward, real-time audio frequency data displaces their radius locally. The fwidth derivative automatically adjusts the analytical anti-aliasing to account for the sudden, jagged spikes in the audio waveform, ensuring the audio-reactive deformations remain perfectly smooth and free of raster artifacts.

Concept 12: The Peripheral Illusion Grid

A grid of squares, where each square is composed of high-contrast micro-stripes tilted at 45 degrees. The entire grid slowly scales outward from the center, simulating a looming motion. When viewed directly, it appears as a simple expanding grid. However, due to the orientation-sensitive neurons in the viewer's peripheral vision, the edges of the screen will appear to physically rotate around the center, replicating the Pinna-Brelstaff effect in an interactive, digital format.

Concept 13: Concentric Pulse Emitter

A purely mathematical shader drawing 100 concentric circles using a modulo operator on the distance field: [Figure omitted from source export]. By continuously animating time [Figure omitted from source export], the circles radiate outward infinitely. To avoid infinite frequency aliasing at the exact origin where the circles are "born," a smoothstep mask based on the absolute distance from the center fades the rings in gently, allowing them to emerge from the void seamlessly.

Concept 14: Asymmetric Ray-Marching Geodesic

This concept utilizes 3D ray-marching to render a complex geometric shape (e.g., a torus knot), but utilizes a highly specialized lighting model. Instead of standard diffuse shading, the fragment shader applies a step function to the lighting intensity relative to the Y-axis, rendering the 3D object entirely out of horizontal scan-lines. As the 3D knot rotates, the 2D scan-lines compress and expand procedurally, generating an optical illusion of a wireframe model without passing any actual vertex line data to the GPU.

Concept 15: Chromatic Offset Contour Map

Taking the standard noise-driven iso-contour map, the shader renders the exact same continuous distance contours three times, separated strictly into the red, green, and blue color channels. The spatial phase of the noise function is offset minutely for each color channel. Where the elevation of the noise is steep, the lines compress and the RGB channels diverge, creating procedural, shimmering chromatic aberration in the high-tension areas of the graphic, while remaining pure white in the flat, low-tension zones.

Conclusion

The deployment of pure line-based graphics elevates computational design into the realm of applied neuroscience. By rigorously managing spatial frequencies and exploiting the geometric principles of Moiré interference, developers can bypass standard visual processing and directly stimulate the viewer's motion-sensitive and orientation-sensitive neural pathways. The success of these systems, however, hinges entirely on flawless technical execution. By implementing analytical signed distance fields, leveraging fwidth for perfect screen-space anti-aliasing, and proactively mitigating subpixel artifacts on high-DPI OLED displays, the resultant graphics transcend traditional screen boundaries. When executed with acute awareness of visual stress guidelines and contrast management, these mathematical line arrays offer a profound, hypnotic aesthetic that commands absolute attention while maintaining physiological safety for the end user.

Works cited

1. Pattern glare: the effects of contrast and color \- PMC, https://pmc.ncbi.nlm.nih.gov/articles/PMC4621622/

2. A physiological basis for visual discomfort: Application in lighting, https://visualstress.info/2016-229.pdf

3. Susceptibility to pattern glare following stroke \- PMC, https://pmc.ncbi.nlm.nih.gov/articles/PMC3432783/

4. Illusory Immersion \- Bringing to Life the Op-Art Works of Bridget Riley, https://adrianb.io/2016/11/28/riley.html

5. (PDF) Motion illusions caused by paintings of Op Art distort the, https://www.researchgate.net/publication/279682689\_Motion\_illusions\_caused\_by\_paintings\_of\_Op\_Art\_distort\_the\_perception\_of\_time

6. Programming Visual Illusions for Everyone 978-3-319-64066-2, https://dokumen.pub/programming-visual-illusions-for-everyone-978-3-319-64066-2-3319640666-978-3-319-64065-5.html

7. Visual Illusions Based on Processes : New Classification System, https://www.researchgate.net/publication/292344499\_Visual\_Illusions\_Based\_on\_Processes\_New\_Classification\_System\_Needed

8. Microsaccades drive illusory motion in the Enigma illusion \- PNAS, https://www.pnas.org/doi/10.1073/pnas.0709389105

9. The Neuroscience of Op Art | Artsy, https://www.artsy.net/article/the-art-genome-project-the-neuroscience-of-op-art

10. Motion illusions as a psychophysical tool to investigate the visual, https://www.researchgate.net/publication/286128549\_Motion\_illusions\_as\_a\_psychophysical\_tool\_to\_investigate\_the\_visual\_system

11. Looking at Op Art: Gaze stability and motion illusions \- PMC, https://pmc.ncbi.nlm.nih.gov/articles/PMC3485832/

12. A new visual illusion of relative motion \- ResearchGate, https://www.researchgate.net/publication/12441245\_A\_new\_visual\_illusion\_of\_relative\_motion

13. (PDF) The Sunburst illusion \- ResearchGate, https://www.researchgate.net/publication/361374118\_The\_Sunburst\_illusion

14. The Sunburst illusion | Journal of Illusion, https://journalofillusion.net/index.php/joi/article/view/8208/14682

15. Illusory object motion in the centre of a radial pattern \- PMC \- NIH, https://pmc.ncbi.nlm.nih.gov/articles/PMC3485812/

16. Moiré pattern \- Wikipedia, https://en.wikipedia.org/wiki/Moir%C3%A9\_pattern

17. Theoretical Interpretation of Moiré Patterns \- Optica Publishing Group, https://opg.optica.org/abstract.cfm?uri=josa-54-2-169

18. Indicial equation \- Moiré Mathematics \- SQRT.CH, https://www.sqrt.ch/Buch/moirecalculations.pdf

19. Victor Vasarely | Viva (1974, Screenprint) \- Composition Gallery, https://www.composition.gallery/art/victor-vasarely-viva-1/

20. 5.1: Op Art (1960s – 1970s) \- Humanities LibreTexts, https://human.libretexts.org/Courses/Taft\_College/Understanding\_Color\_Theory\_in\_Artistic\_Contexts/05%3A\_Seeing\_is\_Believing\_\_Optical\_Effects/5.01%3A\_Op\_Art\_(1960s\_\_1970s)

21. tsg \- marble techguide \- tinySceneGraph, http://www.tinysg.de/techGuides/tg1\_proceduralMarble.html

22. Programming: Moiré Patterns \- NRICH, https://nrich.maths.org/articles/programming-moire-patterns

23. Shading language — Godot Engine (4.3) documentation in English, https://docs.godotengine.org/en/4.3/tutorials/shaders/shader\_reference/shading\_language.html

24. Text rendering and effects using GPU-computed distances, https://blog.pkh.me/p/47-text-rendering-and-effects-using-gpu-computed-distances.html

25. GitHub \- electricsquare/raymarching-workshop: An Introduction to, https://github.com/electricsquare/raymarching-workshop

26. Perfecting anti-aliasing on signed distance functions \- ubitux/blog, https://blog.pkh.me/p/44-perfecting-anti-aliasing-on-signed-distance-functions.html

27. AAA \- Analytical Anti-Aliasing \- FrostKiwi's Secrets, https://blog.frost.kiwi/analytical-anti-aliasing/

28. Noise is Beautiful \- computer-graphics.se, https://computer-graphics.se/TNM084/Files/Noise%20if%20beautiful%20Part%201%2020241103.pdf

29. The OpenGL Shading Language, https://www.ece.lsu.edu/gp/refs/GLSLangSpec.1.50.09.pdf

30. The Best Darn Grid Shader (Yet) \- Ben Golus \- Medium, https://bgolus.medium.com/the-best-darn-grid-shader-yet-727f9278b9d8

31. Interactive intro to shaders \- Hacker News, https://news.ycombinator.com/item?id=38032288

32. GLSL Textura Procedural Waldemar Celes \- PUC-Rio, https://web.tecgraf.puc-rio.br/\~celes/inf2610\_old/Home\_files/textura\_procedural.pdf

33. Subpixel rendering \- Wikipedia, https://en.wikipedia.org/wiki/Subpixel\_rendering

34. OLED Pixel Arrangements: Understanding Display Technology, https://www.interelectronix.com/what-are-different-oled-pixel-arrangements-and-why-are-there-so-many.html

35. Pentile OLEDs: introduction and market status, https://www.oled-info.com/pentile?\_wrapper\_format=html\&page=4

36. PenTile OLED Screens \- ignore the code, https://ignorethecode.net/blog/2011/05/09/pentile\_oled\_screens/

37. Yeah, the \> mobile devices don't use subpixel rendering due to, https://news.ycombinator.com/item?id=29329531

38. How Does Subpixel Layout Affect Text Clarity at Different Resolutions?, https://us.ktcplay.com/blogs/technology-hub/subpixel-layout-text-clarity

39. Pattern glare: the effects of contrast and color \- ResearchGate, https://www.researchgate.net/publication/284068058\_Pattern\_glare\_the\_effects\_of\_contrast\_and\_color

40. CONTENTS \- Recommendation ITU-R BT.1702-3 (11/2023) \- ITU, https://www.itu.int/dms\_pubrec/itu-r/rec/bt/R-REC-BT.1702-3-202311-I\!\!TOC-HTM-E.htm

41. Testing Methods: Three Flashes or Below Threshold \- Dennis Deacon, https://www.dennisdeacon.com/accessibility/testing-methods-three-flashes-or-below-threshold/

42. International Guidelines for Photosensitive Epilepsy: Gap Analysis, https://pmc.ncbi.nlm.nih.gov/articles/PMC11872230/