Coding Challenge #60: Butterfly Generator

Channel:

The Coding Train

Subscribers:

1,750,000

Published on February 27, 2017 2:54:51 PM ● Video Link: https://www.youtube.com/watch?v=O_0fRV4MTZo

Duration: 20:50

49,135 views

1,161

Inspired by Everest Pipkin’s Moth Generator, I use trigonometry and perlin noise to procedurally generate butterfly wing designs with p5.js. Code: https://thecodingtrain.com/challenges/60-butterfly-generator

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/tKBc2fP8r

🎥 Previous video: https://youtu.be/4hA7G3gup-4?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/0dwJ-bkJwDI?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🖋️ Moth Generator: https://twitter.com/mothgenerator
🗄 Rose (mathematics) on Wikipedia: https://en.wikipedia.org/wiki/Rose_(mathematics)

Videos:
🎥 Trigonometry and Polar Coordinates - The Nature of Code: https://youtu.be/znOBmOrtz_M
🎥 What is Perlin Noise?: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bgPNQAdxQZpJuJCjeOr7VD
🔴 Live Stream Archive #80: https://youtu.be/bMOv5vTC9uE?t=3431s

Related Coding Challenges:
🚂 #36 Blobby!: https://youtu.be/rX5p-QRP6R4
🚂 #55 Mathematical Rose Patterns: https://youtu.be/f5QBExMNB1I
🚂 #134 Heart Curve: https://youtu.be/oUBAi9xQ2X4
🚂 #136 Polar Noise Loops: https://youtu.be/ZI1dmHv3MeM

Timestamps:
0:00 Introduce coding challenge
0:17 Highlight project which inspires the coding challenge
1:13 Explain symmetrical drawing and polar coordinates
2:45 Let's code
3:04 Draw one of the butterfly's wings
4:09 Translate canvas to center the drawing
4:41 Draw points
5:25 Draw the wing with a line
6:18 Introduce Perlin Noise
7:08 Implement Perlin Noise
8:23 Experiment with noise arguments
9:06 Draw the other wing symmetrically
10:55 Draw a continous shape
13:20 Highlight math to draw roses with polar coordinates
13:49 Include math in the coding challenge
14:44 Reintroduce noise
15:26 Experiment with different values
16:06 Animate drawing changing the noise values
16:45 Implement Perlin Noise in multiple dimensions
18:00 Conclude coding challenge
18:40 Consider comments from the chat

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#butterflywings #perlinnoise #polarcoordinates #javascript #p5js