Creative Coding and Data Visualization with p5.js


Software Freedom Day (SFD) is an annual worldwide celebration of Free Software. SFD is a public education effort with the aim of increasing awareness of Free Software and its virtues, and encouraging its use.

In Puducherry, we celebrated this year's SFD on 1st October. My team put up a stall on Data Visualization and Creative Coding. Scroll down to take a look at my sketches.

Musical Circles

When I searched for ideas, I found "sound balls" somewhere. I rewrote it in p5, structured it a bit and named it "Musical Circles". I had a lot of fun playing with this. I hope you do too. The logic is simple. Circular objects are created on mouse release. Each circle has an oscillator attached with it, whose frequency depends on mouseX and amplitude depends on mouseY.

Node Garden

A bunch of nodes move around randomly in space. Each node attracts the nodes closer to it. The force of attraction is represented by a thin line. Due to resource constraints on smaller devices, i've reduced the canvas size to 70%.

Node Network

This is a p5 rewrite of a processing sketch created by Jason Labbe. The nodes in proximity to each other are connected by drawing a shape through their vertices. (70% screen size)

Light Brush

This one is a last minute addition to list of sketches. It's a rewrite of André Casey's Wandering Particles. It makes use of HTML5's global composite operation to alter color composition.

Delaunay Brush

This sketch is based on Jason Labbe's Frozen Brush. As you drag the mouse around, particles are created and scattered along the mouse direction. These particles are inter-connected by Delaunay Triangulation. I've added a slider to adjust the hue value.

Magical Circles

8 concentric interconnected circles that choose to rotate clockwise or anti-clockwise randomly.

PI is beautiful - Grid

The series of sketches that follow are based on the visual representations of PI shown in this video by Numberphile. I watched this video a few months ago and promised myself that i'd try it out soon. This sketch shows a grid representation of the first 1000 digits in PI. Each value (0-9) is assigned a color. The neighbours with equal values are connected together.

PI is beautiful - Spiral

Spiral Representation of PI. The number of points in each circle changes based on the radius of the circle, which increases linearly.

PI is beautiful - Web

Web like representation of PI. Each arc on the outer circle represents a value (0-9). For each set of (i, i+1)th digits of PI, a line is drawn from value(i)th arc to value(i+1)th arc. This is done for 10000 digits of PI.

PI is beautiful - Colored Web

Same concept as last sketch, but here, I've assigned a color to each value(0-9).

Petit Seminaire Higher Secondary School, Puducherry, Oct 1, 2017