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.

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.

Atlas 1985

screenshot — p5 Basic mechanic of a sliding tile game. 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.

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.

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.

Curved

screenshot — p5 Uses the same code as the Laser example - 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

OO Walker

screenshot — p5 Basic random walker created with OO principles. Early prototype for Pond Life and autonomous agents experiments. Nov18.

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.

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.

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.

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.

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.

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.

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.

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.

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