Coding Challenge #54.1: Islamic Star Patterns

Channel:

The Coding Train

Subscribers:

1,750,000

Published on February 1, 2017 4:54:12 PM ● Video Link: https://www.youtube.com/watch?v=sJ6pMLp_IaI

Duration: 1:05:14

55,114 views

1,852

In this bonus super-sized coding challenge, I work through visualizing Islamic Star Patterns in p5.js. Code: https://thecodingtrain.com/challenges/54-islamic-star-patterns

p5.js Web Editor Sketches:
🕹️ Islamic Star Pattern - Part I: https://editor.p5js.org/codingtrain/sketches/b3wnFYeVs
🕹️ Islamic Star Pattern - Part II: https://editor.p5js.org/codingtrain/sketches/j-WTRIgjN

Other Parts of this Challenge:
📺 Part 2: Update - Law of Sines: https://youtu.be/lobJ9gzbLo8

🎥 Previous video: https://youtu.be/bqF9w9TTfeo?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/f5QBExMNB1I?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
📐 Points, lines, and planes: http://paulbourke.net/geometry/pointlineplane/
🔗 Law of Sines on Wikipedia: https://en.wikipedia.org/wiki/Law_of_sines
✡︎ Gabriel Weymouth's Tweet on Star Patterns: https://twitter.com/gabrielweymouth/status/826890126747906048
🎤 Craig S. Kaplan Lecture on Star Patterns: https://youtu.be/FBn6VgoF3fE
📓 University of Waterloo's Star Patterns Paper: http://www.cgl.uwaterloo.ca/csk/projects/starpatterns/

Links to Charities:
💸 Refugees International: https://refugeerights.org/donate/
💸 National Immigration Law Center: https://www.nilc.org/donate
💸 International Rescue Committee: https://www.refugeesinternational.org/donate/
💸 Urban Justice Center | Intl. Refugee Assistance Project: https://help.rescue.org/donate/refugees-need-urgent-support

Live Stream Archive:
🔴 Coding Train Live 75: Islamic Star Patterns: https://youtu.be/hCjTKCb2Cuw?t=1108s

Related Coding Challenges:
🚂 #155 Kaleidoscope Snowflake #SupportP5: https://youtu.be/R3C2giDfmO8

Timestamps:
00:00 Introduction
03:10 References and theory
08:13 Code! Creating Polygon and Edge objects
14:46 Closing the Polygon
17:00 Creating Hankin objects
25:10 Rotating the Hankin objects correctly
27:13 How to find the point of intersection of Hankins
30:21 Code! Implementing the math of intersection points
43:54 Finding some of the intersection points
49:40 Finding all the intersection points
51:17 Getting rid of debugging stuff
51:38 Normalizing some vectors
52:08 Adding the delta on Hankins
54:45 Adding some sliders!
57:43 Creating the tiling
1:00:02 What's missing from this implementation?
1:03:53 Getting rid of the grid

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

#islamicstarpatterns #hankins #tilepattern #lawofsines #p5js #javascript