GENERATIVE SKETCHES · PROCESSING & P5.JS

A sketchbook of generative type and drawing experiments.

Accidental 7 is an archive of small interactive sketches — click- and drag-driven compositions that scatter, spin, and spring letterforms across the canvas. Most started as Processing sketches and were later ported to p5.js; several can export their composition as a real, editable SVG file.

Built with Processing · p5.js · Hype Interaction click, drag, type Export 7 sketches save to SVG

Sketches — every experiment, one page each

15 SKETCHES
  1. 01

    Mandala Asset Studio — mandala-studio

    Bring your own motifs — upload SVGs into the library, prune the ones you don't want, and the grid rebuilds from whatever's left.

    SVGUploadGenerativeSVG export
    View sketch →
  2. 02

    Mandala Asset Picker — mandala-select

    The same grid generator, with a library panel for choosing which motifs feed it — pick one and it tiles the whole field alone.

    SVGGenerativeSVG export
    View sketch →
  3. 03

    Mandala Grid Stack — mandala

    A static composition built entirely from recolored SVG assets — rendered as real inline SVG, not a canvas.

    SVGGenerativeStatic
    View sketch →
  4. 04

    Typewriter Trail — build B — ex19

    The same typewriter-trail sketch as Sketch 05, built from an identical source file.

    P5.JSDragDuplicate
    View sketch →
  5. 05

    Typewriter Trail — ex18

    Click and drag to walk a phrase letter by letter along the mouse path, growing with drag distance.

    P5.JSDragSVG export
    View sketch →
  6. 06

    Four-Word Composer — ex17

    Type up to four words, tune rotation and scale with sliders, then click to place them on the canvas.

    P5.JSTypeSlidersSVG export
    View sketch →
  7. 07

    Freeze & Export — ex16svg

    Letterforms drift to a new random position every frame until a click freezes the composition — then it exports as a real SVG file.

    P5.JSClickSVG export
    View sketch →
  8. 08

    Multi-Font Cursor Trail — ex16sv1

    Continuously spawns a large, multi-font burst at the cursor for as long as the mouse is held.

    P5.JSDragFullscreen
    View sketch →
  9. 09

    Spring-to-Target — ex16d

    Click spawns a shape or letter that springs from the click point out to a random destination.

    P5.JSClickTween
    View sketch →
  10. 10

    Click Burst — with sound — ex16c audio

    The same click burst as Sketch 11, plus a kick-drum hit on every click.

    P5.JSClickAudio
    View sketch →
  11. 11

    Click Burst — ex16c

    Click-triggered bursts of shapes and letters at the cursor.

    P5.JSClick
    View sketch →
  12. 12

    Spinning Word Fragment — ex16b

    Click anywhere to spawn a spinning fragment of a word at the cursor.

    P5.JSClick
    View sketch →
  13. 13

    Mouse-Anchored Burst — ex16

    A fullscreen burst of shapes and letters anchored to the cursor, redrawn every frame while the mouse is held.

    P5.JSDragFullscreen
    View sketch →
  14. 14

    Rotating Rect Field — ex15

    An auto-generated field of rotating rounded rectangles and letterforms, drawn once and left still.

    P5.JSGenerativeStatic
    View sketch →
  15. 15

    Two-Word Type Field — ex14

    Two typed words plus a shape and image-asset library — pick or upload art, then stamp it across the canvas.

    P5.JSTypeAssetsSVG export
    View sketch →