A simple HTML5 + vanilla JS mandelbrot manipulation workbench to experiment with and showcase browser modules + canvas (and workers features in the future).
- NodeJs version >= 14.16.0
This simple application was born out of curiosity from my girlfriend on how complex would be to do the programming - or simply how to instruct the computer to do the spectacular visualizations you can see below and that are screenshots from this application - of the algorithm behind the Mandelbrot Set and associated visualization from scratch.
Besides some brush up on basic Complex/Imaginary number operations math 'magic' most if not all of the algorithm is based on this quite nice and pragmatic Python tutorial: https://www.codingame.com/playgrounds/2358/how-to-plot-the-mandelbrot-set/adding-some-colors
Very simple and pragmatic:
- Plain Vanilla Javascript following the Module organisation
- A couple of modules encapsulating and separating the different concerns (ui/presentation, complex numbers, mandelbrot calculations, graphical computation)
- HTML5 Canvas for rendering
- No CSS (I'm not a big Frontend or Pixel Perfect kind of personality)
- Animation Loop: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
- Canvas
- Coordinate System: https://www.w3schools.com/graphics/canvas_coordinates.asp
- Image Data in Canvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
- Image Data in Canvas: https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/
-
Implement a canvas plugin system/interface to support more canvas based visualizations - Julia Set I'm looking at you! For instance this could be accepting (point, color, color system) and then render to canvas.
-
Explore some features with web worker framework
-
Interesting resources to explore
-
Main and worker interactions
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/transferControlToOffscreen
- https://stackoverflow.com/questions/59598111/send-offscreencanvas-to-webworker-more-than-once
- https://stackoverflow.com/questions/57762759/an-offscreencanvas-could-not-be-cloned-because-it-was-detached
- https://www.i-programmer.info/programming/javascript/13092-javascript-canvas-offscreencanvas.html?start=2
-
- Run
npm install
- No need the build process in itself. Node is presented as a requirement in order to have a quick way of statically serving the files at the
- This Javascript code is Module compatible and will run on any modern compatible web browser. For more compatibility details please check: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
- No tests yet
- First start a static content webserver to serve the page content by running:
npx serve - Open your browser of choice at http://localhost:5000/mandelbrot-explorer.html
- Due to project being JS Module based the html file needs to be served from a Web server and won't run from your local file system in your preferred browser at least without any command-line or configuration magic.