I currently have the vague idea of reusing some concepts from my short film Ravines for a live coding set that I could perform in various ways (as opposed to the short film itself, which exists in a static, definite form). The laptop I use for live coding is quite slow, so I have to really simplify and optimize the original algorithms to be able to run them in real time. It’s an interesting challenge to work around those limitations. The animations in Ravines were too resource-intensive to be rendered in real time. It took around 12 hours to render the whole thing.

As you can see in the still images above and below, my goal is also to play with colour. I enjoy the stark black and white look of Ravines, but I generally prefer to work with colours and I envision my live coding sets as being very warm and colourful. The colourful backgrounds here were created by adapting the fog effect taken from this ShaderToy post.

I’m currently learning the basics of wavetable synthesis with SuperCollider, and I will gather my notes and my first musical sketches below. I started to learn with this excellent video by Eli Fieldsteel, who takes part of his material in the documentation of the Shaper class.

It all begins with the creation of a wavetable:

~sig = Signal.newClear(513);
(
~sig.waveFill({
arg x, y, i;
// i.linlin(0, 512, -1, 1);
// sin(x);
sin(x.cubed * 20);
}, 0, 1);
~sig.plot;
~w = ~sig.asWavetableNoWrap;
~b = Buffer.loadCollection(s, ~w);
)

We create an instance of Signal, we fill it with the waveFill method, we transform it into an instance of Wavetable, and then load it into a Buffer. The expression sin(x.cubed * 20) used to fill the Signal was written arbitrarily and I really love the sound that it produces.

I’m continuing to learn live coding with SuperCollider and WebGL shaders, and I composed another audiovisual set, trying more complicated things that I wasn’t able to do for the first one. I performed this new piece at the concert venue La Vitrola on March 29th 2019, as part of the third edition of Signes vitaux, a series of concerts organised by Rodrigo Velasco (Yecto) and Toplap Montréal.

Unfortunately, my computer is not fast enough to render this piece to disk while I perform it, so for now I’m unable to share a completed version of this work.

The code written to make the animation above and the one below can be found on the noise-loops branch of the Evolutionary Botany GitHub repository. The OpenSimplex noise implementation that I’m using is called SimplexNoiseJS and was written by Mark Spronck.

While getting to know the basics of machine learning, I encountered (unsurprisingly) some notions of calculus. I’m very unfamiliar with calculus but I would very much love to understand it. I have been thinking for a while about devising some small experiments that would allow me to familiarize myself with mathematical concepts in an intuitive way. So this sudden need to understand a bit of calculus seemed like a good opportunity to delve into this.

The animation below is one of those experiments. It helped me to familiarize myself with the notions of limits and tangents. A line is tangent to a circle when its slope is identical to the slope of the circle at the point where they meet. This slope is calculated by taking two different points on the circle, and by then diminishing almost infinitely the distance between those two points. This is what I have done while writing the code for this animation. I was interested in what kinds of shapes I would obtain by playing with these notions, and I ended up with this dense mesh of tangent lines evenly distributed around a circle. And then, why not make the circle morph to see what movements would the mesh end up making?

Below are some notes that I took while following Daniel Shiffman’s video tutorials on neural networks, which are heavily inspired by Make Your Own Neural Network, a book written by Tariq Rashid. The concepts and formulas here are not my original material, I just wrote them down in order to better understand and remember them.

### Feedforward algorithm

The calculations made by one the network’s layers, which takes into account its synaptic “weights”, can be represented by the matrix product written down below, in which h represents an intermediary layer (or “hidden layer”) of the network, w represents the weights and x represents the inputs. In this inverted notation, wij indicates the weight from j to i.

[h1h2]=[w11w12w13w21w22w23]x1x2x3

This product can also be represented thusly:

h1=(w11×x1)+(w12×x2)+(w13×x3)h2=(w21×x1)+(w22×x2)+(w23×x3)

Below are some notes that I took while following Daniel Shiffman’s video tutorials on neural networks, which are heavily inspired by Make Your Own Neural Network, a book written by Tariq Rashid. The concepts and formulas here are not my original material, I just wrote them down in order to better understand and remember them.

### Slope and intercept

A line is traditionally represented by this equation, in which m represents the slope and b the y intercept at the origin:

y=mx+b

In the case of linear regression (or the ordinary least squares method), we will calculate the m value with the formula below. This formula is taken from this video made by Daniel Shiffman for his Intelligence and Learning course. We will consider that the numerator of this fraction represents the correlation between the growth of the value x and the growth of the value y (which determines the slope of the line).

m=ni=0(xi¯x)(yi¯y)ni=0(xi¯x)2

### 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.

Drawing blurry shapes with WebGL can be quite complicated. All the basic shapes it creates are very precise, with well-defined (and often poorly aliased) contours. Because I want to create animations that are foggy, atmospheric, and uncertain, I’m slowly building a set of tools dedicated to drawing blurry WebGL geometry.

Blurry circles are not so hard to draw because the distance from the center of a circle can be used to draw a gradient, and then this gradient can be adjusted with the smoothstep() function—it’s all fast calculations for the gpu. Drawing more complex shapes requires me to learn a lot more about WebGL, a technology that I do not yet know a lot about.

I started with quadrilaterals. I created a system where I only need to specify the position and blurriness of a quadrilateral, and all the triangles necessary to interpolate the colour of the shape are created automatically. In the upper left part of the diagram below, asking for a rectangle whose area is equal to the area of triangles a and b will generate the triangles a, b, c, d, e, f, g, h, i, and j.

This project represents my very first experience with live coding. The animation is made with p5.js and WebGL, and the music is made with SuperCollider. The music also uses this free pack of piano samples.

The animation is based on Boids flocking algorithms, which I first learned about in video tutorials made by Daniel Shiffman. Shiffman has covered this subject a few times already, but this video in particular was the inspiration behind this project.

The project’s full video can be watched on YouTube, and a shorter version (which contains, in my opinion, the most interesting part of the longer video) is on my Twitter feed.