3 ms·
Thanks! First I'm generating the general geometry of the wings - the most basic shape is a "teardrop" / half of the infinity symbol (see this[0]). Then they ar
by andersource 5y ago
Thanks!
First I'm generating the general geometry of the wings - the most basic shape is a "teardrop" / half of the infinity symbol (see this[0]). Then they are scaled and rotated randomly (within a range to match the other parts of the wings), and further perturbed to make the shape more random. Then I'm drawing lines from the "tip" of the teardrop to the edges and using them to color the segments. The final result is rendered with Three.js[1].
Obviously this is a very succinct explanation, it took me quite some work. You're welcome to look at the code[2], though it's quite messy :)
[0] https://en.wikipedia.org/wiki/Lemniscate_of_Gerono https://en.wikipedia.org/wiki/Lemniscate_of_Gerono
[1] https://threejs.org/ https://threejs.org/
[2] https://github.com/andersource/andersource.github.io/blob/master/assets/proc-butterfly/index.js https://github.com/andersource/andersource.github.io/blob/ma...
- beckingz 5y agoThat's quite a lot of code! I wasn't expecting to see a linear interpellation function, but that would explain how smooth it looks.
- pdm55 5y agoI moved my cursor pointer around the screen and hoped it would follow.
- andersource 5y agoThat's a great idea!