CCI Diploma 2021/2022: Unit 1: Lecture 8: Images and Simulating.
Back to slide index.

I'm going to start every lecture with a promise and an artist to reference.

I promise that by the end of this lecture you'll be able to understand how images are made and stored on computers, and how they can be used to store more than "just" imagery.

The artist of the day is Anna Ridler.

I was first drawn to her work by her piece "Myriad (Tulips)".

Anna was awarded a fellowship here at CCI.

I think alot of Anna's work is about images and systems for making images, which is why she's perfect for today's lecture - which is on exactly those things!

The main things I want you keep in mind today is that images can also be thought of as two dimensional arrays of pixel data. The way that images are usually stored in memory is in one giant one dimensional array - with all the rows of image data stacked side by side. Pixels in p5.js are (usually) stored in RGBA order, something you can move through with a pair of nested for loops - one for dealing with the rows and one for dealing with the columns in those rows.

By the end of this lecture, you'll know more about:

• Moving to four dimensions
• Artists working with space and time
• How p5.js works with images
• Spatial compression and Temporal compression
• The Fast Fourier transform
• Three kinds of feedback: audio, visual and interactive
• Conway's Game of Life, Cellular Automata and rules 30 and 110
• Boids, Evolved Virtual Creatures and emergence
• How you can use p5.js to simulate different systems

Moving to four dimensions.

• Going from Cube to Hypercube.
• You can also go from the Sphere to the Hypersphere.
• You can also think of Time as the fourth dimension.
• You can use any variable as a new dimension, and measure distance between them using Pythagoras, as we saw in previous lectures.
• Perfect Shapes in Higher Dimensions from Numberphile, which is a great channel to get lost in.

Artists working with space and time.

• Eadweard Muybridge, Sallie Gardner at a Gallop.
• Étienne-Jules Marey and the photographic gun.
• Marcel Duchamp, Nude descending a staircase.
• Umberto Boccioni, Unique Forms of Continuity in Space - see at the Tate Modern.
• James Turrell and skyspaces.
• Richard Long, A Line Made by Walking.

How p5.js works with images.

https://p5js.org/reference/#/p5/loadImage

https://p5js.org/reference/#/p5/image

https://p5js.org/reference/#/p5/createImage

https://p5js.org/reference/#/p5/pixels

https://p5js.org/examples/image-load-and-display-image.html

https://p5js.org/examples/image-transparency.html

https://p5js.org/examples/image-alpha-mask.html

https://p5js.org/examples/image-create-image.html

https://p5js.org/examples/image-pointillism.html

https://p5js.org/reference/#/p5/saveCanvas

https://p5js.org/reference/#/p5.Image - p5.Image is a super useful object to use - it even allows you to load animated gifs!

Spatial compression and Temporal compression.

• JPEG is spatial compression for still images.
• MPEG is temporal compression for moving images and sound.
• Glitch and Glitch Art.
• See Rosa Menkman's amazing series of lectures on artefacts that result from accidents in both analogue and digital media (such as glitch, encoding and feedback).

The Fast Fourier transform.

• The Fast Fourier transform is a way of splitting up any waveform into a series of simpler waves.
• This can be very useful to find out how much bass, mid and treble any sound has and is used in music visualisers.
• See this great interactive website for an explanation and further links.
• See this interactive Better Explained article for a further, further explanation.

Three kinds of feedback: audio, visual and interactive.

• Feedback is when you feed the output of a signal into the input of it. It's a very powerful technique that can be used in a variety of fields:
• Audio feedback. Jimi Hendrix used this to great effect.
• Video feedback, the video equivalent.
• Nam June Paik, TV-Buddha. Media Art Net is a great resource.
• Douglas Trumbull, 2001 Star Gate Sequence.
• An Informal Catalogue of Slit-Scan Video Artworks and Research by Golan Levin. Slit-Scan p5.js from Adam Ferriss's Computational Photography Course. p5.js Slit-Scan example that uses shaders to run even faster from Adam Ferris's p5.js shader examples GitHub repo.
• Going around the Corner Piece by Bruce Nauman.
• The story of making audio reactive visuals for Massive Attack in 2008.

Conway's Game of Life, Cellular Automata and rules 30 and 110.

• Conway's Game of Life was invented by John Conway in 1970. Conway created it to simulate simple biological life with four rules.
• It turns out you can even make Game of Life inside of Game of Life.
• There was an existing field called Cellular Automata which began in the 1940's. Nils Aall Barricelli was a pioneer in this area. A demonstration of his work.
• Stephen Wolfram did further work on CA's in the 1980's discovering several interesting systems - including Rule 30 (which is unpredictable) and Rule 110 (which has been proven to be Turing complete).
• There is also The Game, which I just lost (again).

Boids, Evolved Virtual Creatures and emergence.

• Boids was an artifical life system developed by Craig Reynolds in 1986. It simulated realistic flocking with just three simple rules. Compare the simulation to this murmuration.
• Evolved Virtual Creatures was a film created by Karl Sims in 1994 that showed how virtual creatures could evolve the ability to walk.
• Both are examples of emergence - or the idea that "the whole is greater than the sum of the parts".
• A great interactive essay on complex systems, how things spread - from viruses to knowledge. This area of interactive essays is interesting in itself - a good Twitter thread on the subject. More here and a great list here.
• Learning JS Data - "this guide teaches the basics of manipulating data using JavaScript in the browser, or in node.js." - very useful tutorial on reading in data in JavaScript.

How you can use p5.js to simulate different systems

https://p5js.org/examples/simulate-game-of-life.html

https://p5js.org/examples/simulate-wolfram-ca.html

https://p5js.org/examples/simulate-spirograph.html

https://p5js.org/examples/simulate-l-systems.html

https://p5js.org/examples/simulate-recursive-tree.html

https://p5js.org/examples/simulate-stepping-feet-illusion.html

https://p5js.org/examples/simulate-particles.html

Thanks!
Back to slide index.