Sketches in code

This is a collection of p5.js sketches made by Andy Lapham at Winchester School of Art, University of Southampton.
Click the image for a video of the sketch in action. Click the code button to download the sketch file. More info and contact details at the bottom of this page.
Each sketch is graded in terms of complexity, using colour-coded buttons. Green is the simplest, through blue and red to black, the most complex.
Curved
screenshot
p5  Uses the same code as the <Laserexample. only initial variable values have been altered.Takes a text string rendered in an opentype font (.otf) and uses two extra Javascript libraries (opentype.js and g.js) to open up access to the points on the path of the parsed text. The original Euclid-Light.otf type is distorted in relation to the x,y coordinates of the path points. Uses the path getting alorithm from the Generative Design book by Benedikt Groß, Hartmut Bohnacker et al. Also uses p5.dom.js. May19.
code
Laser
screenshot
p5  Takes a text string rendered in an opentype font (.otf) and uses two extra Javascript libraries (opentype.js and g.js) to open up access to the points on the path of the parsed text. The path points are mapped to the screen and manipulated. Uses the path getting alorithm from the Generative Design book by Benedikt Groß, Hartmut Bohnacker et al. Also uses p5.dom.js. This has almost identical code as Curved only initial variable values have been altered. May19.
code
Wired
screenshot
p5  Takes a text string rendered in an opentype font (.otf) and uses two extra Javascript libraries (opentype.js and g.js) to open up access to the points on the path of the parsed text. Points on ther path are distorted over time. Based on a sketch and the essential path and points algorithm in Generative Design: Visualize, program and create with JavaScript in p5.js by Benedikt Groß, Hartmut Bohnacker et al. Also uses p5.dom.js. Parameters such as number of points on path, type size and degree of randomness may be altered to interesting effect. May19.
code
Del Monte
screenshot
p5 Browser-based controls as design elements. Adapted from a sketch in Generative Design: Visualize, program and create with JavaScript in p5.js by Benedikt Groß, Hartmut Bohnacker et al, which in turn is based on a sketch by Dan Shiffman. Uses p5.dom.js Apr19.
code
Post It
screenshot
p5 Adapted from a sketch in Generative Design: Visualize, Program and Create with JavaScript in p5.js by Benedikt Groß, Hartmut Bohnacker et al. Square tiles remain fixed but corners are randomly stretched by mouse position - vertically by mouseY position, horizontally by mouseX position. Apr19.
code
Yes Revisited
screenshot
p5 Typography in motion. Based on an idea by Tim Rodenbröker. Rewritten using Object Oriented principles and tile objects - considerably more complex but also more extensible. Motion based on a sine wave being passed through the tiles. Mar19.
code
Sliced Stress
screenshot
p5 Typography in motion. Uses Object Oriented principles, cutting up the text into vertical slice objects and moving them vertically when moused over. Slices act like springs and recover to their starting position using an approximation of simple harmonic motion. Mar19.
code
NY Deli
screenshot
p5 Sliced image and spring-like motion. Similar to Sliced Stress but with more comments in the code. Uses Object Oriented principles, cutting up the text into vertical slice objects which react to mouse over events. Mar19.
code
Grid Shift
screenshot
p5 Adapted from a sketch in Generative Design: Visualize, Program and Create with JavaScript in p5.js by Benedikt Groß, Hartmut Bohnacker et al. Square size and random movement determined by mouse position. Apr19.
code
Circle Walker
screenshot
p5 Classic random walker, with transparency plus edge detection with wraparound. Part of the Coding Emotions workshop that informed a submission to 2019 Transmediale Festival, Berlin. Dec18.
code
Levy Steps
screenshot
p5 Rosettes of random size and colours, in random positions. Utilizes Levy Flight for occasional big random steps to explore new ground. With edge detection and wraparound. Also includes code generated text. Needs p5.dom.js. Part of the Coding Emotions workshop that informed a submission to 2019 Transmediale Festival, Berlin. Dec18.
code
Red Rosettes
screenshot
p5 Line drawn and then rotated 360 degrees, before repeating in another random location. Basic stuff including edge detection and wraparound. Part of the Coding Emotions workshop that informed a submission to 2019 Transmediale Festival, Berlin. Dec18.
code
Moiré
screenshot
p5 Similar to Red Rosettes but this time with alternate white and grey lines and the same edge wraparound. Makes lovely moiré patterns. Simple coding and useful as a starter for further experimentation. Part of the Coding Emotions workshop that informed a submission to 2019 Transmediale Festival, Berlin. Dec18.
code
Spiro
screenshot
p5 Reminds me of a spirograph image. The same radial rosettes but with a sliding start point for each line. Also good for moiré patterns. Part of the Coding Emotions workshop that informed a submission to 2019 Transmediale Festival, Berlin. Dec18.
code
On Target
screenshot
p5 Single white blob object demonstrating target seeking, based on Craig Reynolds' classic steering formula (steering = desired-velocity). Based on the example in Dan Shiffman's Processing book, The Nature of Code and adapted here for p5.js. Uses vectors and an Euler integration physics engine. Prototype experiment towards a fully functional flocking simulation. Nov16.
code
Things
screenshot
p5 Particle system that uses an OO approach to birth Thing objects with individual behaviours and properties. Each Thing has random size and colour and a velocity inversly proportional to size. Also uses vectors and Newtonian equations for position and velocity. Experiment with the variable values at the top of the code to change size and number of Things. Early prototype for Pond Life and autonomous agents experiments. Dec18.
code
OO Walker
screenshot
p5 Basic random walker created with OO principles. Early prototype for Pond Life and autonomous agents experiments. Nov18.
code
Levy Walker
screenshot
p5 Development from the basic random walker created with OO principles. Includes Levy Flight - random big steps - and also feature a live chart mapping up movements against down movements as a visual test for bias. Early prototype for Pond Life and autonomous objects experiments. Nov18.
code
Spotty
screenshot
p5 A good one to start with. Very simple and basic. An endless supply of coloured spots appear in random locations of the canvas - they're semi-transparent so anything already there can still be seen. Rouge blue spots appear approximately 1% of the time. Part of the Coding Emotions workshop that informed a submission to 2019 Transmediale Festival, Berlin. Dec18.
code
Constructor
screenshot
p5 First look at the constructor function. A simple random walker made of randomly coloured blobs snakes around the screen. A new blob is birthed each frame. Once the tail of blobs is a specified length, blobs start to drop off the end. Change the value of variables, for blob size, step size and tail length at the top of the code. Nov16.
code
Flocking
screenshot
p5 Example of a flocking algorithm based on Craig Reynolds' three rules - separation (avoid), alignment (copy), cohesion (centre). Uses OO principles in creating autonomous agents (boids, to use Reynolds' term, aka Things in my code). Vector maths and an Euler integration physics engine. This example formed the basis of an WSA iLab workshop, mainly attended by students from BA Games Design and Art. Nov16.
code
Vehicle
screenshot
p5 Vehicle with a single simple sensor that can be thought of as liking the light and hating the dark. It therefore speeds up on dark areas of the floor it moves on and tries to linger on the light areas. This vehicle is an example in code of the simplest of Valentino Braitenberg's thought experiments in his book Vehicles: experiments with synthetic psychology. Oct16.
code
Perlin
screenshot
p5 Particle system, that births 500 Things, which then travel on random trajectories around the canvas. Direction is changed on hitting an edge, and paths are made more natural (less straight) by the addition of Perlin Noise to the movement vector. Code for each object is contained in separate js files. Prototype for Pond Life project and autonomous agents experiments. Sep18.
code
Pond Life
screenshot
p5 Prototype to test health function in a particle system of simple Things (Pond Life). Two hundred Things are birthed, they swim, they lose health incrementally(hunger) and they die if their health runs out. Things became more transparent as health runs down. Movement uses Perlin Noise to make it more natural. When a Thing's health falls below 50%, it heads toward the bottom edge. If it makes it in time, health is replenished. Nov18.
code
Rogue Red
screenshot
p5 About as basic as it gets - 19 lines of code. Random squares populate the canvas in random postions, roughly one in twenty is red. Part of the Coding Emotions workshop that informed a submission to 2019 Transmediale Festival, Berlin. Dec18.
code
Info
screenshot
This is a collection of code sketches mostly from the p5.JS workshops I have run in recent times.
Click an image to see a short video of the action. To play with the sketch code, download it via the coloured button. You will need to run this in a browser with a suitably set up index.html file. Download everything you need from p5js.org.
You can also run my code directly via the tiny p5 button in each sketch card. Be aware that you will need your browser open at a suitable width. These sketches are generally not set up for mobile - experiences vary.
Contact
screenshot
Official

WSA/UoS staff pages

Message me

  

Elsewhere