creative coding

Interactive Creative Coding gallery

Teaching the essentials of digital storytelling, data visualisation, and infographics through Creative Coding workshops using p5.js a JavaScript library covering generative, audio, image with interactivity for creative, educational and business environments

I tell my story at conferences, events (and soon to be) meetups focused on digital storytelling using the essentials of data visualisation.

For me, the potential of data as an effective tool for constructing and conveying complex information through visual narrative, is without bounds, whether in, entertainment or educational spaces – data collections can become compelling, engaging, visual outcomes.

For interactivity view sketches in a desktop browser, beginners samples sketches below:

save canvas as .txt

Environmental portrait, uses shapes quads and arcs to construct an environmental portrait to tell a visual story about the subject.

mapping points around text, press canvass to interact with points in the sketch
audiovisual of water sound using amplitude analytics to draw on a background gif

musical notes
interactive random musical notes, with backgroung image

Curious Sound, uses amplitude to draw the arms – click sketch to play

Morphing bubbles., generative art using hex colours some simple maths and interactivity move your mouse over the sketch from left to right

text analysis
Artist statement., an interactive text analysis of natural language to generates the parts of speech results for any body of text, in this case, an artist statement. To carry out text analysis – move the mouse across the canvas from left to right.

Interactive canvas with mouse pressed painting and gif as background.

Times table cardioid (heart) visualisation, a shape that occurs frequently in mathematics, using points lines and sketch transparency to plot a generative illustration of a 2 x table. This mathematical operation is called the times table modulo 200

Save canvas as square .png

Generative web

Ping Pong – Game over man!!

Rotating hexagon shapes uses HSB colour and simple maths

Gentle curves using sine to create a tracking motion around the shape that is being drawn

Press canvass then Key
“o” for draw Only setup
“t” for trails
“c” for change
“p” for poly
“e” for number setup
“8” for additional sides

Circular shock wave

Biometric data of the heartrate over the course of the Day, using photography and code

Data tree, using cloud storage, photography, and code

Live local weather data API, illustrated local wind direction, photography, custom design

360 degrees video, wrapped around a sphere using WebGL a JavaScript API for rendering interactive 2D and 3D graphics, directional light and tint

Individual image, wrapped around a cube using WebGL a JavaScript API for rendering interactive 2D and 3D graphics, directional light and tint

Creative Computation » Embedding a Processing Sketch