Algorithms for making interesting organic simulations
Article explaining simulation algorithms that produce complex organic behaviours, starting with the classic physarum algorithm from Jeff Jones.| bleuje.com
Sometimes what you need to draw requires some computation by steps. For example if you want to draw particles following a flow field, or want to use positions obtained from another kind of simulation. Saving a frame at each step doesn’t give you a lot of control. This tutorial is about a basic technique to tackle this problem. For some people, no need to read this tutorial if this is clear to you: this is about doing linear interpolation on a list of values to get a continuous function.| Home on bleuje
This tutorial is about motion blur but also about workflow and what the code of my Processing gif art actually looks like. Most of the source codes of my gifs made in Processing have a structure and first section which are similar for all gifs, and I call it a template. This template is coming from the gif artist beesandbombs (dave). It’s mostly useful to render animations with motion blur but can also contain some useful functions.| Home on bleuje
The replacement technique was already explained and illustrated in the previous tutorial. This one shows both how to use it with objects that have random parameters, and also with a 2D grid structure: something I have used a lot. I chose this gif as example for this tutorial: In the gif the positions of the tiles on one axis (x-axis) never change, and it moves along another axis (y-axis). We’re going to use a 2D grid of tiles of size 70 x 4.| Home on bleuje
This tutorial is about explaining a common method to make animations that loop perfectly. You basically need 3 things: A periodic function (1-periodic) What to do with the periodic function An offset function All objects have the same periodic motion or change but with an offset, which can give patterns and a feeling of propagation. Here the periodic function has to be 1-periodic because time goes from 0 to 1.| Home on bleuje
This tutorial is about making a basic perfectly looping gif with Processing: a dot doing a circular loop. The trajectory of the black dot can be described with maths: the angle depends on time and the radius is fixed. Hence if the radius of the circle is r, the position at time t can be defined with: Note that if t goes from 0 to 1 (which will always be the case in those tutorials), the position at t=0 is the same as t=1.| Home on bleuje
This tutorial explains how to loop a value with noise, and then a perfect loop technique that’s similar to periodic function propagation from the previous tutorial but using noise and more advanced technique. I call it “noise propagation”, and it was used to make that animation: First of all if you’re not familiar with noise in creative coding you can for example learn about it on the Coding Train (video about Perlin Noise, video about openSimplexNoise ).| Home on bleuje
This is about a perfect loop technique that’s probably the one I use the most. It’s quite abstract and general: the idea is to have queue of objects. During the time of one gif loop, each object will take the position or state of a next one. That’s why I call it the “replacement” technique. Basically we have a function like this one to draw one object: p is a continuous parameter, increasing with time.| Home on bleuje
I’m Etienne Jacob, born in 1994 and based in Paris. I’m a software engineer, and in my free time, an artist creating GIF animations through programming. I also enjoy exploring other creative coding projects, including playful interactive installations. Contact: etin.jacob (at) gmail.com About my art Almost all of my animations are created with the constraint of keeping the GIF file size under 5 MB. My primary goal is for them to be appreciated solely for their visual appeal, not for the p...| Home on bleuje
Generative stuff rendered with Blender. (2020) (2020) (2016) Back to other stuff| Home on bleuje
What software do you use to make your animations? My animations are made by programming. Most of them have been made with Processing (Java version). I’ve also been using openFrameworks which is similar to Processing but in C++. I also make stuff with shaders (GLSL) sometimes. How to learn to do this? To learn to draw stuff with code, I suggest watching The Coding Train. There are videos that explain programming from zero, but if you are already at least a little experienced in programming b...| Home on bleuje
Interactive real-time simulations with gamepad interaction. It has been used as artistic installation. It’s using the algorithm in the work 36 Points from Sage Jenson. Demo video: (remark: video from May 2024, before color improvements) Github repository. It contains the code to try it yourself. Attribution details are given, and the algorithm is explained. Use during some events At the Wonder in Bobigny for an algorave (November 22nd, 2024): Nice projection test before the event:| Home on bleuje
Variograph Playful combination and manipulation of mathematical functions. 2022-present Interactive physarum Playful interaction with organic simulations. 2024-present Physarum simulation videos Rendered videos of some physarum or organic simulations. 2021-present Webpage projects Various web projects. 2016-present Visuals for Karma Fields Animated visuals for 4 singles by Karma Fields. 2021 Shaders Real-time visuals. 2020-present Github account (has some gifs source code)| Home on bleuje
Videos from real-time “simulation” of physarum, using the paper from Jeff Jones, inspired by Sage Jenson, and often using a replication of their “36 Points” algorithm. Attribution details with similar code here. -- .video-grid { display: none; /* Hidden by default */ flex-wrap: wrap; gap: 5px; margin-top: 20px; } .| Home on bleuje
Processing techniques I wish I used earlier. push() and pop() At the very beginning of drawing with Processing I didn’t use them and wanted to describe positions with longer formulas and more maths. I didn’t realize how useful and worth getting used to they were. I don’t want to explain how to use push() and pop() here, a lot of people must have explained it way better than I would be able to do.| Home on bleuje
Shaders are programs that can make real-time visuals, meaning computed while you see them. It requires a different approach when coding them compared to Processing for example. You can see some of my shaders on ShaderToy : link to my shadertoy page. Some screenshots (clickable to check out the corresponding shader): Back to other stuff| Home on bleuje
Loop techniques Making a first gif with Processing Loop from periodic function and offset (Processing) Noise loop / noise propagation (Processing) Replacement technique (Processing) Replacement technique with 2D grid of objects (Processing) Motion blur template (by beesandbombs) (Processing) Drawing on paths computed by steps/simulation (Processing) Other Physarum/organic simulations explanation (big article) Processing little tricks| Home on bleuje
Variograph builds upon the work of generateme1, who explored various 2D transformations, their combinations, and their visualizations2. These functions/transformations are termed ‘variations’, which inspired the project’s name. My project takes a significant leap forward by utilizing the GPU for rendering visuals, as opposed to the CPU. This shift enables a range of real-time interactions. Additionally, I have developed an algorithm that introduces a mode with 3D structures instead of 2D.| Home on bleuje
Visuals for singles by Karma Fields, animated on youtube and spotify. (use spotify or youtube to listen to entire songs and see animations) its_OK CODE 10-32 .me KF:KONG Back to other stuff| Home on bleuje
(not made for phone) […] Interactive variations of a looping animation. […] Navigate and solve generated literal 4D mazes : 4 axis of movement instead of 2 for 2D mazes. […] …| bleuje.com
Article explaining simulation algorithms that produce complex organic behaviours, starting with the classic physarum algorithm from Jeff Jones.| bleuje.com
