Log In  

Hello there, after a positng a sketch variation I did on Twitter earlier today, I was asked how one would do such a similar result.

So instead of a badly written Twitter thread, let me post you a badly written BBS post with a badly written (but well commented) breakdown on how I did it.

The spiral is a cylinder sliced in a few circles I offset on X and Y based on a formula. This formula varies with time and on which circle it'll yield the offset to (here, the index).

So, I progressively iterated from nothing to the spiral. Here's how I broke it down:

First I generate circles made by vertices I'd store aside. Drawing circles this way will allow me to the other steps. Each circle is drawn by drawing a segment between two consecutive vertices in the circle and by linking the same vertex between two consecutives circles. Here, it looks like a colored spider web.

Then, I made the circles' center move based on the time. But it still doesn't look like a spiral. We can do better.

So I make each circle's offset move indenpendtanly. I draw the circle in a for i=1,n
loop, so I can use i to have a different result per circle. Here I just add an offset to the sin formula to make each center different from the others.

By doing the same on the y axis, I'd have a diagonal if I would use the exact same formula. The complement formula to draw a circle based on T with sine is cosine, so for the y offset I used the same formula but with sin turned into cos. Now each center moves into a circle.

I can perfectly tweak both formulas differently. For instance here, I removed the x offset and made the y offset in a way so circles will cross some of their neigbors. It'll be useful to give a better sense of depth in the next step

And, as a last step, I replaced the line drawing by drawing quads with the trifill routine generously made by ElectricGryphon so we have a solid tunnel instead of a wireframe one!

And that's the core basics on how I made the Nuclear Throne inspired vortex sketch a while ago! I'll be leaving the commented code on the bottom of this post, feel free to have a look on how I did it, but here's a fair warning: I clearly didn't optimize the code, there is still a lot that could be done to avoid useless calculations, but it should be clear enough to allow quickly anyone to hack it, it works and in 30 FPS. Have a nice day and happy 32 colors day!

Cart #colored_spiral-0 | 2019-09-04 | Code ▽ | Embed ▽ | No License

P#67245 2019-09-04 18:50 ( Edited 2019-09-04 18:56)

Neat - too many tokens to revisit Nuklear Klone transition screen but really good looking!

P#67247 2019-09-04 18:53

Great explanation, thank you!

P#67248 2019-09-04 18:56

I remember ! I walked through something like this in a fun-house back as a kid. :)

P#67282 2019-09-05 15:45

[Please log in to post a comment]

Follow Lexaloffle:          
Generated 2023-12-05 22:16:33 | 0.010s | Q:16