List of MicroSims for The Art of Processing

Interactive Micro Simulations to help students learn the art of processing fundamentals.

• 3D Scene Editor

  

  Interactive p5.js MicroSim for 3d scene editor.

• Additive Color Mixer

  

  Explore RGB additive color mixing with overlapping spotlights, channel sliders, and Venn intersection analysis.

• Algorithm Visualizer

  

  Interactive p5.js MicroSim demonstrating control flow, loops, and conditional branching.

• Arc and Angle Explorer

  

  Visualize p5.js arc drawing modes (OPEN, CHORD, PIE) with interactive start and stop angles in degrees and radians.

• Array Methods Visualizer

  

  Interactively step through functional array methods including map(), filter(), reduce(), and find() with visual memory transformations.

• Async Data Fetcher

  

  Visualize JavaScript asynchronous fetch(), Promise lifecycle states (Pending, Fulfilled, Rejected), and network packet transit.

• Audio Visualizer Lab

  

  Interactive p5.js MicroSim for audio visualizer lab.

• Beat Detector System

  

  Simulate real-time audio FFT beat detection with dynamic thresholding, energy accumulation, and visual beat triggers.

• Bézier Control Point Sandbox

  

  Interactive cubic Bézier curve with 4 draggable anchor and control points, tangent guide lines, and p5.js bezier() code generator.

• Canvas Inspector

  

  Interactive p5.js MicroSim for canvas inspector.

• Color Mixer

  

  Interactive p5.js MicroSim for color mixer.

• Coordinate System Explorer

  

  Compare computer graphics canvas coordinates (origin at top-left, Y downwards) with traditional Cartesian coordinates.

• CORS Blockage Visualization

  

  Demonstrate Cross-Origin Resource Sharing (CORS) security mechanisms, origin headers, and preflight OPTIONS checks.

• Data Flow Debugger

  

  Interactive p5.js MicroSim for data flow debugger.

• Dev Environment Simulator

  

  Interactive p5.js MicroSim for dev environment simulator.

• Device Orientation Maze

  

  Simulate smartphone tilt sensors (Alpha, Beta, Gamma rotation angles) to navigate a rolling ball through a physical maze.

• DOM Layout Explorer

  

  Interactive CSS Flexbox and Grid layout visualizer exploring justify-content, align-items, flex-direction, and responsive flow.

• Exploring Shaders

  

  Interactive GLSL pixel fragment shader laboratory simulating wave ripples, color gradients, and time-based uniform variables.

• Flow Field Visualizer

  

  Generate 2D Perlin noise vector flow fields with interactive particle tracers, noise scale adjustments, and trajectory trails.

• Harmonic Oscillator

  

  Interactive p5.js MicroSim for harmonic oscillator.

• History of Processing and p5.js

  

  Interactive vis-timeline MicroSim for history of processing and p5.js.

• Interactive 3D Coordinate System

  

  Explore 3D WebGL Cartesian coordinates with interactive X, Y, and Z axis visualizers and coordinate readout.

• Interactive Filter Studio

  

  Explore image processing 3x3 convolution kernels: Gaussian Blur, Sharpen, Ridge Edge Detection, and Emboss filters.

• Interactive Filter Sweep on Noise

  

  Interactive audio filter frequency sweeper: Low-Pass, High-Pass, and Band-Pass frequency response on noise signals.

• Interactive Flocking Fireworks

  

  Combine Reynolds Boids flocking rules (Separation, Alignment, Cohesion) with interactive click-triggered firework particle bursts.

• Interactive Image Gallery Filter

  

  Filter, search, and sort a responsive grid of generative artwork cards by category tags and color palettes.

• Interactive Map Panning and Zooming

  

  Explore matrix transformations for 2D viewport navigation: drag to pan and slider to zoom with coordinate transformation.

• Interactive Sandbox

  

  Interactive p5.js MicroSim for interactive sandbox.

• Interactive Wave Maker Laboratory

  

  Explore wave superposition and harmonic interference by synthesizing two traveling sine waves with adjustable amplitude, frequency, and phase.

• Kinetic Text to Points

  

  Interactive generative typography converting letter glyph points into spring-physics particles that scatter on hover and reform.

• Kinetic Typography Engine

  

  Interactive p5.js MicroSim for kinetic typography engine.

• Learning Graph Viewer

  

  View the learning graph and be able to search and filter by classification

• Microphone Frequency Visualization with FFT

  

  A MicroSim that shows the frequency spectrum of sound coming in from a microphone using the p5.js fft library.

• Mouse Speed Tracker

  

  Calculate real-time cursor velocity, acceleration, and motion vector angle using mouseX, pmouseX, and Pythagorean distance.

• Multi-Touch Canvas

  

  Simulate multi-touch mobile gestures: multi-finger drawing, pinch-to-zoom distance tracking, and touch ID identification.

• Nested Grid Explorer

  

  Step through 2D nested for loops visually to understand row (i) and column (j) iteration order and cell coordinate calculation.

• Orbital Mechanics Simulator

  

  Simulate gravitational orbital mechanics with central mass attraction, velocity vectors, elliptical orbits, and escape velocity.

• Particle Physics Engine

  

  Interactive p5.js MicroSim for particle physics engine.

• Pedagogical Pattern Matcher

  

  Interactive p5.js MicroSim for pedagogical pattern matcher.

• Perlin Noise Terrain Generation

  

  Generate continuous organic heightmap terrain grids in 3D WebGL perspective using multi-octave 2D Perlin noise.

• Pivot Point Selection

  

  Explore matrix transformation order (translate then rotate vs rotate then translate) and custom rotation pivot points.

• Pixel Processing Pipeline

  

  Interactive p5.js MicroSim for pixel processing pipeline.

• Polar Radar Sweeper

  

  Interactive radar sweep converting polar coordinates (radius r, angle θ) to Cartesian coordinates (x = rcos θ, y = rsin θ).

• Random Walk Simulation

  

  Compare Brownian uniform random walks, Gaussian distribution walks, and Lévy Flight jumps with live spatial distribution trails.

• Real-Time ASCIIfy Camera

  

  Convert video frames or synthetic generative graphics into real-time typography ASCII character density matrix art.

• Real-Time ASCIIfy Camera

  

  Convert video frames or synthetic generative graphics into real-time typography ASCII character density matrix art.

• Render Cycle and Frame Rate Monitor

  

  Measure real-time frame rates (FPS), frame render time in milliseconds, and the p5.js draw() loop execution lifecycle.

• Responsive Dashboard Builder

  

  Explore responsive UI layout patterns, breakpoint media queries, and adaptive multi-column dashboard card grids.

• Robot Arm Kinematics

  

  Interactive p5.js MicroSim for robot arm kinematics.

• Scope Misconception Visualizer

  

  Explore variable shadowing, temporal dead zones, and var vs let/const lexical block scoping pitfalls.

• Scope Visualizer

  

  Interactive magnifying glass revealing variable accessibility across global, function, and local block scopes.

• Shape Builder

  

  Interactive p5.js MicroSim for shape builder.

• Shape Explorer Turntable

  

  Orbit around 3D WebGL primitive geometries on a rotating turntable: Box, Sphere, Cylinder, Cone, Torus, and Plane.

• Shopping Cart Acceleration

  

  Apply interactive force vectors to a shopping cart to visualize Newton's Second Law F = m*a, acceleration, and friction.

• Spectrum Analyzer

  

  Audio Fast Fourier Transform (FFT) spectrum visualizer displaying 5 frequency bands: Bass, LowMid, Mid, HighMid, and Treble.

• Stage Lighting Setup

  

  3D WebGL stage lighting simulator: adjust Ambient, Directional, and Point light intensities on metallic, normal, and specular materials.

• Stochastic L-System Tree

  

  Generate recursive branching botanical trees with stochastic random angles, depth recursion, and wind oscillation.

• Synthesizer Board

  

  Interactive p5.js MicroSim for synthesizer board.

• Terrain Generator

  

  Interactive p5.js MicroSim for terrain generator.

• Text Formatting Basics

  

  Interactive typography styling: explore textSize, textLeading line spacing, textAlign horizontal/vertical anchors, and text bounds.

• The Callback Kitchen

  

  Interactive kitchen simulation explaining asynchronous callback functions, event listeners, and non-blocking execution.

• The Color Compass

  

  Navigate HSB (Hue, Saturation, Brightness) color space with an interactive circular chromatic wheel and harmony markers.

• The Generative Art Mixing Desk

  

  Mixing console controlling generative visual parameters: symmetry, density, noise turbulence, color palette, and line weight.

• The Great Easing Race

  

  Race 4 easing functions side-by-side: Linear, EaseInQuad, EaseOutBounce, and EaseInOutCubic across synchronized tracks.

• The Interactive Array Train

  

  Visualize array mutator operations (push, pop, shift, unshift, splice) as train cars on a railway track with index indicators.

• The Logic Gate Switchboard

  

  Wire up boolean logic gate switches (AND, OR, NOT, XOR, NAND) to route signals to a neon indicator sign.

• The Magnifying Glass Array Translator

  

  Translate 2D pixel coordinates (x, y) into 1D flat memory indices index = 4(ywidth + x) for pixels[] manipulation.

• The Object Factory

  

  OOP Class instantiation simulator: spawn autonomous object instances with custom properties, methods, and constructor parameters.

• The Solar System Hierarchy

  

  Explore hierarchical matrix transformations with nested push(), translate(), rotate(), and pop() stacks (Sun -> Earth -> Moon).

• UI Component Playground

  

  Interactive p5.js MicroSim for ui component playground.

• Vector Dot Product Visualizer

  

  Rotate vector A relative to vector B to compute the dot product A · B = |A||B|cos(θ) with scalar projection and geometric angle readouts.

• Water Hose Particle Emitter

  

  Draggable continuous water nozzle particle emitter simulating lifespan, gravity, and elastic barrier collisions.

• Waveform Visualizer & Hearer

  

  Oscilloscope visualizing the 4 fundamental audio synthesizer waveforms: Sine, Square, Triangle, and Sawtooth with frequency controls.