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 on how to run the code live 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.
New Normal
screenshot
p5  Has it come to this? Socially minded blobs move purposively around the space towards a random target on one of the walls. Each blob will move in a straight line to the target unless confronted with a social distancing issue. The blob will then adjust its path to the target after moving off-line to maintain a safe distance. When a blob reaches its target a new target on a different wall is assigned and off it goes again. Jun20.
code
RGBA
screenshot
p5  RGBA. Playing with video pixels in p5.js and using some recently unearthed family Super8 cine film from the 80s. Everything here is coded in p5 and running in a browser. Feb20.
code
Flipdisc
screenshot
p5  I've always loved the sight and sound of those flip board displays in airports and stations - now mostly long-gone victims of digitalisation. This is an early experiment to make a dot matrix display or, better, a flip disc display. Got the mechanics working, encoding the characters comes next. Playing with this as a possible student exercise. Jul19.
code
Is it art?
screenshot
p5  The same code as Compass - with a couple of minor tweaks - but with the parameters pushed to extremes. It's trial and error to get something that looks reasonable! This doesn't follow a cursor, although it could. It's a random walker with an occassional Levy Step. Jan20.
code
Compass
screenshot
p5 A flow field of sorts inspired by a sketch by Tim Rodenbröker and the Compass Table of @stefansagmeister that I saw in Paris several years ago. Multiple vanes rotate to follow the cursor. This is p5.js running in a web browser. Jan20.
code
Turn Tiles
screenshot
p5  More tiles, this time of the rotating kind. Diagonally symmetrical square tiles, that rotate automatically at random and alter the overall pattern. Another version of this works with tiles rotating with mouse action over them. Tile size can be changed to produce large scale or small scale patterns. Jun19.
code
Atlas 1985
screenshot
p5  Basic mechanic of a sliding tile puzzle. Swap tiles into the hole - in this case marked with a dot - to rearrange the image. Here, the action is automated with a looping narrative as tiles are scrambled at random and then unscrambled back to the start. The image is a book cover that has a bit of personal history attached to it. Jun19.
code
Starfield
screenshot
p5  Design challenge from a beginners p5.js workshop with MA Communication Design students. On reflection, this was probably a bit too tough for most of the group - especially the concept of a star object. May19.
code
Color Waves
screenshot
p5 Horizontal bars of colour that change according to a sine wave applied to the RGB colour values, thus creating pulsing waves that are also influenced by mouse position on the screen. It works but it's not super-exciting! May19.
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 a 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