├── README.md ├── background_music.webm ├── index.html └── rachit_dp.png /README.md: -------------------------------------------------------------------------------- 1 | A cool weekend project for Software Engineers to explore HTML and JavaScript. 2 | This is a simulation of "Chaos Game" using JavaScript and HTML Canvas. 3 | 4 | Demo link to try the app: [here](https://rachitiitr.github.io/chaos-in-javascript/) 5 | Tutorial on YouTube: [here](https://www.youtube.com/watch?v=oeM_PexPRAg) 6 | 7 | -------------------------------------------------------------------------------- /background_music.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rachitiitr/chaos-in-javascript/f8dcad1dc6d6e599e99adb9776237790aa0426d4/background_music.webm -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Chaos Game by rachitiitr 11 | 33 | 34 | 35 |
36 |
37 | 38 | Chaos in Javascript 39 | 40 | 41 | Star on GitHub 42 | 43 | 44 |
45 | 46 | 49 |
50 |
51 | 52 |
53 |
54 | 55 |
56 |
57 | 58 |
59 |
60 | Enter number of bigger vertices: 61 |
62 | 63 |
64 |
65 | Enter %age of distance to travel: 66 |
67 | 68 |
69 |
70 |
71 | 74 | 75 |
76 | 77 |
78 |
79 | 80 | How this works? 81 |
82 |
83 |
    84 |
  • We start with a random point.
    • 85 |
  • In each step, we chose randomly one of the bigger vertex and move 50% (or what ever %age you specified) towards it from our current position.
    • 86 |
  • We keep repeating the previous step till infinity.
    • 87 |
88 |
89 |
90 | 91 | Why I made it? 92 |
93 |
94 |
    95 |
  • Programming is my hobby and I enjoy doing random things in my free time (if I get any)
    • 96 |
  • I saw just one example of JS canvas, and was amazed to imagine the things we can do with it.
    • 97 |
  • I love Math + Fractals. I thoroughly enjoyed making this chaos out of nothing in JavaScript.
    • 98 |
99 |
100 |
101 | 102 | Impressed? Learn with me 😁 103 |
104 |
105 | 110 |
111 |
112 |
113 |
114 |
115 | 116 | Made with   by Rachit Jain 117 | 118 |
119 |
120 | 210 | 211 | 212 | 219 | 220 | 221 | -------------------------------------------------------------------------------- /rachit_dp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rachitiitr/chaos-in-javascript/f8dcad1dc6d6e599e99adb9776237790aa0426d4/rachit_dp.png --------------------------------------------------------------------------------