• Jack Chen

NOC: Tunnel Generator

This week, I made a tunnel generator where a series of circles are drawn to simulate moving forward in a tunnel:

https://editor.p5js.org/ukpfilms/sketches/228dJYHdB


I started by making a version of the recursive sketch example where smaller circles move to the center of the canvas:

https://editor.p5js.org/ukpfilms/sketches/6YIosj_3z


In order to make a moving tunnel, the circles have to continuously increase in size while new circles are drawn. To implement those two elements, I made the sketch object based, referencing the way it's done in the fractal tree object based sketch example. I changed the alpha of the circles overtime to simulate depth.


Tunnel generator v1: https://editor.p5js.org/ukpfilms/sketches/mEUKwmD3A


After setting up the initial mechanics, I tweaked the colors and attributes of the "next()" function of the circle class to make the visual appear more like a tunnel. The size and position of the new tunnel is generated based on the attributes of the previous circle with a small range of randomization.

Lastly, I made the height of the circle change slightly in each new generation to simulate a more organic/irregular tunnel shape.


Tunnel Generator v3: https://editor.p5js.org/ukpfilms/sketches/228dJYHdB



8 views0 comments