Design for Performance & Interaction Demos

by @mattdesl

Some examples with specific functionalities around P5.js, Tone.js, Websockets, and more.

For more examples see Mark Webster's Designing Programs and Computational Manual, which the style and layout of these demos is based on.

An ever-growing circle.

Using sin() for a simple loop.

Using a 'playhead' for a seamless loop with a fixed duration.

rotation from center

How to draw a shape with a rotation.

rotate multiple

How to draw multiple shapes with a rotation from center.

Click to swap colors.

Click to add particles to an array.

Using data structures to hold a list of varying shapes.

Click to add particles. A demo showing data structures and motion.

Using trigonometry to draw N points around a circle.

An animated battery meter.

Drawing paths with vertex() and curveVertex().

Creepy tendrils with particle trails..

remix your own