Drawing a line between two points with little points and lerp

Let’s draw lots of little transparent white points between the two disks. This trick seems useless so far but then when the curve won’t be a line, it will give cool shades of grey, that you can’t get easily with beginShape() endShape() (I think).

(inside draw())
If you understood lerp there isn't much more to understand there. I use the variable name "tt" because I want to call it "t" but it's already taken by time. Really I don't know what more to say about this code.Link to full code

Result :

Seeing the disks with a delay

The idea is that the disk will be seen with a delay kind of proportional with the distance to the disk. Let’s begin to use this delay trick for the first disk only.

Explanation and code for more complex gifs

I’ll give a link to the code of each gif, but I warn you : it uses the motion blur system of beesandbombs (Dave Whyte), it might be experimental code with bad variable names, unecessary stuff, details that may be hard to understand, or just stupid stuff, or there might be some mistakes.

Gif 1

This gif simply uses an array of disks that have a trajectory based on simplex noise like previously, with different seeds for each disk. A curve is drawn with the trick between each disk and a point at the bottom that doesn’t move. Each disk has a method that gives the position depending on time, like array[i].x(t) makes sense.

Gif 3

Here it is the same thing as Gif 2, excepted that trajectories are centered differently. Also there is higher opacity and stroke weight when the disks are closer to each other. Also now the delay factor is actually proportionnal to the distance between the disks (so an almost straight curve between them is drawn when they are close). I can’t remember well why I changed the curves like that but I remember I thought I needed it. (Update : it’s because when the two points are closer with the original curve trick, the curve will just be contracted, in order to avoid that I use a smaller “delay factor” when the points are closer).

Gif 4

It is similar to the previous gif. The differences : the center of trajectories are generated randomly inside a circle, with a random angle and a random radius that has quite high probability to be close to the radius of the circle (I adjusted a probability distribution). When the center of trajectory is closer to the center of the canvas, the trajectory becomes larger (it can be so large that some disks stay far outside the circle), when it’s close to the circle it moves less.

Code
(I love the different results this one gives when you run it again)

Gif 5

The only thing to talk about here might be the trajectory of the left point, and it’s in the code.

Gif 6

Gif 7

Take one random moving curve generated with the tutorial trick between two disks, rotate it around the center of the canvas, add some time offset depending on the angle (and so that it loops well), and you can get this kind of gif.
I was inspired by this gif from echophon.tumblr.com.

3 thoughts on “A trick to get looping curves with lerp and delay”

Excellent tutorial, well done indeed.
I am relatively new to generative coding, I learning this kind of coding with javascript in the Canvas, processing is similar but less verbose. Do you know where I could translate your examples from Processing to Javascript? The example from Decatron is a good starting point.

Hello, glad you liked my tutorial.
If you want to translate it into javascript, you should use the p5.js library, it’s the javascript version of Processing and it’s very similar : you won’t have to change many things.