Math Canvas

Inspiration

I was inspired by a video I saw on youtube a couple months ago where a guy had created a visual of the Mandelbrot set (a fractal) and was able to zoom in for several minutes. The patterns and everything were so cool to see and knowing that it's just a recursive function was even more interesting to me.

What it does

Currently, it just displays a Mandelbrot fractal and there is a section where you can enter 3 hex colors to automatically change the pixel colors! You can also drag the fractal canvas and zoom in/out.

How we built it

I built it using HTML/CSS and JavaScript, with p5.js, which is a tool that makes building things with HTML canvas a lot simpler.

Challenges we ran into

I wasted a solid 2 hours trying to get the server that was running to work correctly. I was having issues with getting the styling to properly load and update.

Accomplishments that we're proud of

I'm proud that I actually got something done, despite not accomplishing much at the beginning. Also, while I did have a ton of ideas I wanted to implement, mandelbrot fractal was my very first idea, so it feels good that I did get it up there.

What we learned

I learned how to work with HTML canvas/p5.js a bit! I still have much to learn, but I worked with canvases as well as shaders.

What's next for Math Canvas

I have a few buttons on the header (algorithms, automata, recursion). My initial idea was to have those as categories. So, things like the fractals will go under recursion, I definitely want to do the game of life (cellular automata) under automata and for algorithms, I want to demonstrate sorting algorithms by having an array of colored pixels that will sort themselves into rgb order. I'd like to add onto the color picker so it's an actual wheel, add the option to enter rgb instead of just hex, and I'd like to add sliders for things such as brightness and such. There's a lot more I want to do but that's what's next!

Built With

• css
• html
• javascript
• p5
• vscode