This is a webcomponent that displays an interactive widget of the mandelbrot set. The set can be zoomed and one can pan the canvas. You can also switch to the julia set at a given point on the canvas. This webcomponent can be customized using some attributes like the width, the color palette and the number of iterations for the mandelbrot plotting algorithm. The calculation is done using webworkers.
This webcomponent follows the open-wc recommendation.
npm i mandelbrot-widget
<script type="module">
import "mandelbrot-widget/mandelbrot-widget.js";
</script>
<mandelbrot-widget></mandelbrot-widget>
You can supply a number of attributes to this webcomponent to control the layout and features:
width
The max width of the component (defaults to1000px
)julia
Flag for the additional display of the julia set when clicking on the canvas (defaults totrue
)palette
Color palette to display the set (options aregrayscale
,blue
andcolorful
)iterations
Number of iterations that the plotting algorithm uses to determine if it converges or diverges (defaults to100
)random
CControl the order of plotting (The set is plotted columnwise; if you providefalse
this will be sequentially from left to right, otherwise the columns will be drwan on the canvas in random order)
To execute a single test run:
npm run test
To run the tests in interactive watch mode run:
npm run test:watch
For most of the tools, the configuration is in the package.json
to minimize the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.
npm start
To run a local development server that serves the basic demo located in demo/index.html