Examples

Examples of Charming, from generative art and simulations to visualizations, shaders and ASCII art. Each runs live on its page, above its source code. For bigger projects, see the gallery.

Generative

Generative art on Canvas: curves, noise and trails.

DoneBatonsBell CurveSine WaveNormal Distribution CirclesSnake WaveFlow NoiseRandom GrowthBeesandbombsClover RainbowMaurer RoseRainbow DragonWaltz of CirclesBroken Heart

Visualization

Charts and mathematical figures.

Regular NumbersCardioidMathematical Rose PatternsBar ChartFourier Series

Simulation

Vectors, forces and autonomous agents, after The Nature of Code.

MoverBouncing BallCar WanderingCar ArrivingDraggable SpringAttractorsDancing BallsFollow MeCluster RepellerOscillatesCars FlowingClustersMany-Body ForceLiquidFlockingParticles

Recursion

Fractals and trees, after The Nature of Code.

Koch CurveStochastic TreeCantor SetRecursive CirclesRecursive TreeL-systemSierpiński TriangleMandelbrot SetMultibrot Set Table

SVG & DOM

Data-driven SVG with the cm.svg template literal.

艹木林森 (Wood)Maze Pattern火炎焱燚 (Fire)Light Up Jiggly TextsCharming LogoJiggly Recursive CirclesChuanghuaStar Wobbling

WebGL & Shaders

Batch rendering and shader art with the WebGL renderer.

Shader ArtMultibrot Set TransitionZoomable Mandelbrot SetSilexars

Terminal

ASCII art with the terminal renderer.

White NoiseClover 🌟Character MatrixTerminal Bar ChartASCII Fire

With Other Libraries

Charming draws while another library computes: physics, shape morphing, sketchy rendering and sound.

Falling Polygons, Matter.jsFalling Grid, toxiclibs.jsJiggly Shapes, flubberSketchy Shapes, Rough.jsFFT, Tone.jsTrigger Sounds, Tone.jsWaveform, Tone.js