While doing a lot of animation with p5.js over the last few months, I’ve slowly developed a template that I now use to start all my projects. It’s designed for my own use but perhaps it could also be useful (in part or as a whole) for other people. So I’m sharing it on GitHub and documenting it below. There’s always ample room for improvement, so if you have any ideas don’t hesite to get in touch.

The main feature of this template is a convenient system to export frames to create videos and gifs. This is accomplished with a small Node.js server, named server.js, that communicates with the p5.js sketch via Socket.io. To export frames, the sketch gets a reference to the web canvas and sends it to server.js, which saves it to disk. The best part is that the exportation can all happen behind the scene, in the command line, using the Node module Puppeteer. Then, when all the frames are exported, they can be turned into videos and gifs using ffmpeg.

Below are all the files included in the template. I will now go through how all the pieces fit together.

frame-export.js
frames
headless.js
index.html
libraries
server.js
sketch.js
style.css

Context

This blog post is part of my research project Towards an algorithmic cinema, started in April 2018. I invite you to read the first blog post of the project to learn more about it.

La botanique algorithmique est un très beau champ d’étude dans les sciences informatiques. Le botaniste hongrois Aristid Lindenmayer en est un des pionniers, et le livre The Algorithmic Beauty of Plants qu’il a co-signé avec l’informaticien Przemysław Prusinkiewicz est la plus riche et exhaustive référence le sujet. Le livre est disponible gratuitement, en entier, sur un site Web hébergé par l’Université de Calgary, où Prof. Prusinkiewicz enseigne. Il s’agit d’un site Web formidable qui contient une foule de documents intéressants concernant la botanique algorithmique.

J’ai fait plusieurs expériences pour apprendre appliquer différents aspects de la botanique algorithmique afin d’en faire des animations. La première animation que j’ai réalisée (et dont l’image ci-dessus est extraite) se trouve sur mon fil Twitter. J’ai rassemblé ci-dessous quelques notes de travail prises lors de la réalisation de cette animation et des autres qui suivront.

The animation above is inspired by the ideas behind Heroes and Cowards, an agent based model created by William Rand and Uri Wilensky, although it’s a very distant alteration of this model. The code written to generate this animation is contained on the second-version branch of the project’s Git repository, which is hosted on GitHub.

The animation’s mechanism is simple: each black dot represents a turtle that can receive instructions and that possesses a certain behaviour. When the animation starts, each turtle is associated with two friends (two different dots in the group). Then, between each new frame of animation, each turtle walks in the direction of a point that is equally distant between its two friends.

The turtles thus have an identical individual behaviour, but because their initial positions are all different, a complex collective behaviour emerges from the aggregate of their actions: the group of turtles is collectively trying to form a single loop. When a new spiral is added in the scene, those new turtles are rapidly merging with the path of older turtles.

Context

This blog post is part of my research project Towards an algorithmic cinema, started in April 2018. I invite you to read the first blog post of the project to learn more about it.

I’m currently reading Complexity: A Guided Tour, a wonderful book written by the American scientist Melanie Mitchell. I created the animation shown above using an equation I learned about in the book, the logistic map, which is the most famous equation in the field of chaos theory. Here it is:

new project that I find very exciting will occupy me throughout the next twelve months. Thanks to the Conseil des Arts et des Lettres du Québec and the Plan culturel numérique du Québec, I will have the opportunity to do research about digital art—and more specifically, about algorithmic cinema: an experimental animation cinema (most often abstract, but not necessarily so), that is created by writing code to generates images and movement.

Because this cinema is somewhat unknown to the general public and practiced by relatively few artists around the world, I hope to help in demystifying it by maintening a journal of my work during this project. The journal will contain short experimental animations and parts of the creative process—so, a mixture of things that are accessible to all and other things that are more technical or “arcane”, like blocks of code and mathematical formulas. We’ll see how this joyous aggregate ends up looking.

About a year ago, I wrote a short program to model pencil strokes. The project is still in its embryonic stages and I plan to keep working on it sporadically. I will begin now by revisiting the code written last year to extract its concepts.

These animations were created with the p5.js library, in response to two coding challenges presented by Daniel Shiffman on his YouTube channel The Coding Train.