Skip to content

Gallery

Every picture is made by running the example beside it. Click a picture to see how it works and to read the whole code. Each example is a complete sketch: copy it into a file and run it.

Short on time? See the showcase: a dozen of the best pictures on one page.

Basics

Your first sketch Your first sketch

setup() once, draw() every frame setup() once, draw() every frame

A script: draw once, no draw() needed A script: draw once, no draw() needed

Shapes

The basic shapes The basic shapes

More shapes More shapes

Placing shapes by their centre or corners Placing shapes by their centre or corners

Rounded corners Rounded corners

Colour

Four ways to say a colour Four ways to say a colour

Hue-based colour: hsb, hsl and colour objects Hue-based colour: hsb, hsl and colour objects

Gradients Gradients

Colour mode Colour mode

Blending, opacity and shadows

Blend modes, opacity and shadows Blend modes, opacity and shadows

Off-screen graphics: a trail Off-screen graphics: a trail

Scratch card: erasing Scratch card: erasing

Layers: a sky that stays and a trail that builds up Layers: a sky that stays and a trail that builds up

Fill, stroke and lines

Fill and stroke Fill and stroke

Line ends, corners and dashes Line ends, corners and dashes

Pixel art with no_smooth Pixel art with no_smooth

Curves

Curves Curves

Text

Text Text

Aligning text Aligning text

Text in boxes and columns Text in boxes and columns

Fonts and styles Fonts and styles

Letters as shapes Letters as shapes

Spacing and ligatures Spacing and ligatures

Mixed styles in one text Mixed styles in one text

Variable font axes Variable font axes

Words made of dots Words made of dots

Letters from other fonts Letters from other fonts

Animation and time

Bounce Bounce

Time-based motion Time-based motion

A clock A clock

Pause, step and quit Pause, step and quit

Record an animation as a GIF Record an animation as a GIF

Motion

Movers with vectors Movers with vectors

Transforms

Rotating squares Rotating squares

saved_state and angles saved_state and angles

Shear and matrices Shear and matrices

Paths and clipping

A star from vertices A star from vertices

Reusable paths and clipping Reusable paths and clipping

Clipping on and off Clipping on and off

Shapes with holes Shapes with holes

Combining shapes Combining shapes

Outlines, tests and moving paths Outlines, tests and moving paths

Randomness and noise

Confetti Confetti

Bell-curve randomness and random choices Bell-curve randomness and random choices

Noise: smooth randomness Noise: smooth randomness

Useful maths

Mapping and blending numbers Mapping and blending numbers

Interaction

Follow the mouse Follow the mouse

A paint program A paint program

Move with the keyboard Move with the keyboard

The window: cursor, size and full screen The window: cursor, size and full screen

Sliders, a checkbox and a button Sliders, a checkbox and a button

Saving your work

Saving your work Saving your work

A picture with a transparent background A picture with a transparent background

Saving an animation as frames Saving an animation as frames

A poster file A poster file

Documents and pages

A booklet with three pages A booklet with three pages

A flip book saved as a GIF A flip book saved as a GIF

Pictures and images

Loading and drawing an image Loading and drawing an image

Tinting a picture and drawing part of it Tinting a picture and drawing part of it

Reading and writing single pixels Reading and writing single pixels

Changing pictures: copy, resize, mask and filters Changing pictures: copy, resize, mask and filters

Loading an SVG drawing Loading an SVG drawing

Sound

Sound: play a tune and watch it Sound: play a tune and watch it

Making sound: write a tune, then watch it play Making sound: write a tune, then watch it play

Making sound: a sargam phrase over a drone Making sound: a sargam phrase over a drone

Sound: a tuner that listens Sound: a tuner that listens

Music

Music: tap along to the beat Music: tap along to the beat

Music: see a chord Music: see a chord

Music: sing with the drone Music: sing with the drone

Music: hear a raga Music: hear a raga

Music: a tala goes round Music: a tala goes round

Music: see your voice Music: see your voice

Music: a song's fingerprint Music: a song's fingerprint

Music: draw a wave and hear it Music: draw a wave and hear it

Music: compose and save Music: compose and save

Music: ear training Music: ear training

Music: a piano roll of a tune you wrote Music: a piano roll of a tune you wrote

Projects

Event poster series Event poster series

Rangoli and mandala generator Rangoli and mandala generator

Raga explorer Raga explorer

Voice-controlled game Voice-controlled game

Typographic portrait Typographic portrait

Kinetic type Kinetic type

Scratch-card reveal game Scratch-card reveal game

Flow-field print Flow-field print

Studios

Placement: one mark in nine places (studio 1) Placement: one mark in nine places (studio 1)

Proximity: 36 dots, four groupings (studio 2) Proximity: 36 dots, four groupings (studio 2)

Rhythm: five ways to repeat one beat (studio 3) Rhythm: five ways to repeat one beat (studio 3)

Boolean shapes: two shapes, four new ones (studio 4) Boolean shapes: two shapes, four new ones (studio 4)

Text as geometry: one word, three ways (studio 5) Text as geometry: one word, three ways (studio 5)

A poster series: four events, one design (studio 6) A poster series: four events, one design (studio 6)