SCRIPTS 3
superflowyouniverse.primaryprolaw.com/DualSpiralAnimationAccelerator01.html
Overview of the “Dual Spiral Field Engine”
This HTML file contains a self-contained, interactive HTML5 Canvas application that renders a real-time, mathematical animation of dual rotating particle spirals. It includes user interface controls for dynamic parameter tuning, custom animation scaling, and high-resolution PNG exporting.
Technical Breakdown
1. Structure & Layout
- HTML5 Markup: Minimal semantic structure centering a 600×600 canvas alongside a responsive flexbox control panel.
- Styling (<style>): Designed with a sleek, dark mode aesthetic (background: black; color: white;), using clean input fields and button controls optimized for desktop viewports.
2. State Management & Configuration (settings object)
The engine relies on a centralized state object to control the behavior of the particle field:
- count: Total number of particles mapped onto the spirals (Default: 600).
- speed: Multiplier governing the angular velocity increment per frame (Default: 1).
- accel: Exponential acceleration factor influencing particle distribution rates along the spiral arms (Default: 2).
- radius: Maximum outer boundary radius of the spiral field in pixels (Default: 260).
- angle: Ongoing rotational offset updated continuously in the animation loop.
- scale: Multiplier used when exporting snapshots to high-resolution PNGs.
3. Core Math & Rendering Engine (draw and rebuild)
Particle Distribution: The rebuild() function initializes an array of particles where each particle receives a normalized index and a fixed base angle:
\text{baseAngle} = \frac{i}{\text{count}} \times 2\pi
Dual Spiral Field: The rendering loop iterates twice (spiral = 0 and 1), creating a dual-hemisphere effect:
- Spiral 0 (White): Standard rotational orientation.
- Spiral 1 (Cyan #00ffff): Inverted rotational orientation (angle *= -1).
Position Calculation: Particle coordinates are computed using polar-to-cartesian conversion factoring in exponential acceleration (accelFactor):
x = c_x + \cos(\text{angle}) \times \text{radius}
y = c_y + \sin(\text{angle}) \times \text{radius}
Interactivity & Features
- Live UI Binding: Input sliders and number fields are synchronized in real-time via the bind() helper function, instantly triggering particle grid rebuilds or modifications.
- Playback Controls: Toggle button for pausing/resuming the requestAnimationFrame loop, plus a reset utility to zero out rotation angles.
- High-Resolution Export: The “Save PNG” utility dynamically creates an off-screen canvas scaled to the user’s preferred resolution multiplier, ensuring crisp vector-like image captures.
- Keyboard Shortcuts: Listens for the R key event to toggle hidden field properties.
====================================================================
DUAL SPIRAL FIELD ENGINE: INCREMENTAL & DOUBLING ANALYSIS
- UI BINDING & CONFIGURATION FOR ACCELERATION
The doubling and incremental scaling behavior is governed by the
‘accel’ property in the central configuration state object:
const settings = {
count: 600,
speed: 1,
accel: 2, // Default base factor (enables 2x doubling range)
radius: 260,
angle: 0,
scale: 2,
reverse: false
};
This parameter is connected to both a range slider and a number input
in the HTML control panel, constrained between 1 and 3 with 0.1 steps:
Acceleration
Any modification to these inputs instantly triggers the bind() helper,
updating settings.accel and forcing a particle array refresh (rebuild()):
function bind(id, key) {
const r = document.getElementById(id);
const n = document.getElementById(id + “Num”);
const update = v => {
settings[key] = +v;
r.value = v;
n.value = v;
rebuild();
};
r.oninput = e => update(e.target.value);
n.oninput = e => update(e.target.value);
}
- THE CORE MATHEMATICAL MECHANISM (EXPONENTIAL DOUBLING)
Inside the rendering function (draw), the incremental and doubling
phenomenon is computed per particle using an exponential function:
const accelFactor = Math.pow(settings.accel, p.i / settings.count);
Breakdown of the formula:
- Index Ratio (
p.i / settings.count): Normalizes each particle’s
position from 0 (the inner core) to 1 (the outer perimeter).
- Base Exponent (
Math.pow(settings.accel, ...)): When accel is set
to its default value of 2, it creates a precise doubling effect:
- At particle
i = 0 (origin): $2^0 = 1$
- At particle midpoint (
i = count / 2): $2^{0.5} \approx 1.414$
- At particle
i = count (outer edge): $2^1 = 2$
This non-linear progression ensures that particles further out along
the arm experience an exponentially magnified rate of change.
- INTEGRATION INTO KINEMATICS & SPATIAL MAPPING
The resulting accelFactor is dynamically applied to shape both the
rotational velocity offset and the spatial coordinate placement:
let angle = p.baseAngle + settings.angle * accelFactor;
const radius = (p.i / settings.count) * settings.radius;
const x = cx + Math.cos(angle) * radius;
const y = cy + Math.sin(angle) * radius;
- Incremental Angular Shift: Because
accelFactor scales up with
index p.i, outer particles rotate faster and warp further ahead
than inner particles during animation frames, creating a twisting,
dynamic shearing motion along the dual spiral arms.
Superflowyouniverse.primaryprolaw.com/DualSpiralHierarchyAnimationAccelerator01.html
Dual Spiral Field Engine v2 Analysis
This updated version (v2) builds significantly on the original particle simulation engine, introducing broader operational ranges and a powerful new mathematical modifier called Hierarchy.
Key Enhancements & New Controls
- Hierarchy Control: Adds a new interactive slider and number input (ranging from 0.1 to 5) that reshapes how acceleration distributes across the particle array.
- Expanded Limits: Maximum particle count is increased to 3,000, speed caps at 20, and the acceleration multiplier extends up to 10 for intense field warps.
- Refined Scaling: Export scaling now supports up to 6x resolution for ultra-high-definition image generation.
The Core Mathematical Update
The defining upgrade in v2 is found inside the particle loop, where a nested power function (a power of a power) replaces the simple exponential curve:
- Normalized Index (t): Represents the relative position of each particle from the center (0) to the outer edge (1), calculated as p.i / settings.count.
- Hierarchical Acceleration Formula: accelFactor = Math.pow(settings.accel, Math.pow(t, settings.hierarchy))
How Hierarchy Transforms the Visuals
- Hierarchy = 1: Behaves like the original engine, providing a standard, smooth exponential progression along the spiral arms.
- Hierarchy < 1: Lifts the curve upward, concentrating high-speed acceleration toward the core and mid-radius for a tighter, denser center twist.
- Hierarchy > 1: Compresses the curve, leaving the inner core stable while triggering sharp, explosive rotational distortions exclusively at the outer perimeter.
Rendering & Output Pipeline
The engine maintains its efficient dual-hemisphere rendering routine—generating a white standard spiral alongside an inverted cyan (#00ffff) reverse spiral. By translating polar coordinates into Cartesian space using the dynamic accelFactor, it achieves a fluid, organic field simulation that can be saved instantly at high resolution.
superflowyouniverse.primaryprolaw.com/DualSpiralHieraerchyAccelerationAnimationStereo01.html
superflowyouniverse.primaryprolaw.com/Spiral Cycle Lab (Dual Spiral Engine Core)
Particles
Speed
Offset
Hierarchy Power
Chain Accel
Golden Ratio
Radius
Cycle Lock (360 = full spiral cycle)
Multiplier
Frame Fade
Mode
Rotate
Static
Pause
Reset
superflowyouniverse.primaryprolaw.com/SpiralGenerator01.html
Download
superflowyouniverse.primaryprolaw.com/SpiralSoundGenerator01.html
Spiral Harmonic Sound Engine: Technical Analysis
This HTML file integrates the dual/single particle spiral field mechanics from previous versions with a Web Audio API sound synthesis engine. It translates spatial particle positions, angular bin densities, and shell alignments into real-time algorithmic audio generation.
Key Architectural Components
- Web Audio Pipeline (initAudio, playSound, envelopeGain): Dynamically creates and destroys oscillator and gain nodes on the fly. It utilizes linear and exponential envelope shaping to prevent audio clipping or clicking artifacts.
- Angular Bins & Spatial Density Mapping: The canvas is split into 48 angular sectors (bins). As particles rotate, they map into these bins to track local spatial density.
- Multi-Condition Sound Triggers:
- Collision Event (Density Shock): Fires when particles bunch up past a threshold (collision distance) within a given bin, producing rich waveform types (sine, triangle, sawtooth, square) modulated by musical harmonic ratios.
- Near Radius Resonance: Triggers when particles cross specific shell radiuses (near), creating soft sine-wave tonal sweeps.
- Transitional Rhythm: Generates emergent beats when bin population changes exceed historical frame counts (lastBins).
Core Audio-Visual Integration
// Spatial mapping to frequency and bins
const normR = radius / 260;
const bin = Math.floor(((angle % (Math.PI * 2)) / (Math.PI * 2)) * bins);
// Density threshold check triggering sound events
if (binsNow[bin] > dist) {
const freq = 110 + normR * 880; // Bass to high treble range
trigger(freq, 1.0, waveType(bin), harmonicSet(bin));
}
- Harmonic Ratios (harmonicSet): Uses mathematical/musical intervals ([1, 1.25, 1.5, 2, 2.5, 3]) derived from geometry to ensure chords stay harmonically consonant.
- Waveform Cycling (waveType): Dynamically shifts synthesizer oscillator types across sine, triangle, sawtooth, and square based on bin indices.
Interactive Controls
- Simulation Parameters: Sliders for particle count, speed, acceleration, and visual layout.
- Audio-Spatial Tuning:
- Collision Distance: Adjusts sensitivity for density shock triggers.
- Near Radius: Controls the shell distance threshold for resonant harmonic hums.
- Pulse & Duration: Controls envelope length and release timings of synthesized notes.
- Audio Toggle: Activates and resumes the browser’s AudioContext to unlock sound rendering.
superflowyouniverse.primaryprolaw.com/SpiralSoundGenerator02.html
superflowyouniverse.primaryprolaw.com/FractalSoundBrush01.html