Coding Challenge #54.1: Islamic Star Patterns

Subscribers:
1,750,000
Published on ● 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







Tags:
JavaScript (Programming Language)
live
programming
daniel shiffman
creative coding
p5.js
coding challenge
p5.js tutorial
p5js
javascript (programming language)
tutorial
javascript
coding
challenges
coding train
the coding train
islamic star patterns
star patterns js
star patterns javascript
islamic star pattern algorithm
islamic star pattern code
star pattern p5js
refugee help
muslim star pattern
mosque star pattern
hankins
tile pattern
mosaic