top of page

Wrapping a Sine Wave

I saw a great video from 3blue1brown and I it got me thinking about how I could create some similar visualizations in Javascript. Here you can see I've wrapped a sine wave in a circle. There are two sliders that control the frequency of the wave and how far the wave is allowed to travel around the circle. There are some beautiful patterns that emerge from this relatively simple concept.

I know my code isn't clean or pretty and I think I could refine this idea much more so that you can understand what each slider is controlling. Even when I was writing the code, there was a ton of trial and error without really knowing exactly how things are playing out. For example, I knew the farther the sine wave goes, the more vertices I needed, but I did not put much thought into how many that should be.

With all that said, I'm really proud of this because the idea was inspired from a video, but all the code came from me and the tools which I have already learned. I was able to pretty much create this one my own and that's a great feeling. A future project will be to have multiple waves graphed here and have them added together just like the video that inspired this project.

bottom of page