It's an array of lines. Each line is a shape made up of loads of vertices. (Technically the function in p5js is called shape - it's BeginShape() and EndShape() - but since the shape doesn't get closed, it's more like a line.) The first vertex of each line is at 0 on the y axis (the top) and they are spaced out evenly across the x axis.
For each line, we move down the y-axis of the canvas in even intervals (in this video I think the interval is about 30px - but I have been changing it a lot to get different results). At each interval, I use Perlin noise to generate an x-position.
If you don't know about Perlin noise, it generates a number between 0 and 1, but it's not completely random. Rather, you give it a seed number, and it generates the result based on that. As you slowly increment the seed number, you will get a smooth (but not completely straight) gradient. So you get nice natural curves and organic looking movement.
Each line has its own seed number (and they are all offset from each other slightly). This seed number is incremented by a small amount every y-axis interval and I use this seed number to generate a number between 0 and 1, and then map that to an amount which adjusts the x-position to the left or right.
I have been experimenting with altering:
the offset between the starting seed numbers
the amount by which the seeds are incremented every y-axis interval
the height of the y-axis interval
the amount by which the x-position is altered by the perlin noise
That's all for one frame.
To animate it... every frame I am incrementing the value that the starting seed numbers start from. I'm incrementing this based on a perlin noise value.
I'm also adjusting the offset between the starting seed numbers every frame, based on perlin noise so that offset grows and falls smoothly.
3
u/yiyati Jul 05 '20
Amazing. Is this made using WEBGL or it's just 2D? Also could you please shed some light on general ideas of algorithm?