https://github.com/semuadmin/fractal-generator
Fractal generator implemented in JavaScript, deployable as web site or Electron desktop app.
https://github.com/semuadmin/fractal-generator
fractal javascript julia-set mandelbrot-set
Last synced: 5 months ago
JSON representation
Fractal generator implemented in JavaScript, deployable as web site or Electron desktop app.
- Host: GitHub
- URL: https://github.com/semuadmin/fractal-generator
- Owner: semuconsulting
- License: gpl-3.0
- Created: 2021-12-24T16:21:10.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-24T23:57:38.000Z (over 3 years ago)
- Last Synced: 2024-12-29T20:31:15.652Z (over 1 year ago)
- Topics: fractal, javascript, julia-set, mandelbrot-set
- Language: JavaScript
- Homepage:
- Size: 3.12 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Citation: CITATION.bib
Awesome Lists containing this project
README
# Fractal Generator
Just a bit of fun...
A JavaScript implementation of an interactive fractal generator. It supports both Mandelbrot and Julia modes and 'Standard', 'Burning Ship' and 'Tricorn' variants using a variety of color rendering themes, including user-generated colour palettes and gradients.
The application also supports basic 'Deep Zoom' and 'Julia Spin' animation.
Fractal can be configured via a set of 'quick-set' buttons, or more comprehensively via a manual configuration form which allows specific coordinates to be entered in complex (real/imaginary) notation.
## How to Use
The instructions can be viewed by clicking on the  button:
- Click anywhere in the image to zoom in current cursor position by the zoom increment amount..
- Click, drag and release to zoom into drawn area.
- Ctrl + Click to zoom out at current cursor position by zoom increment amount.
- Shift + Click to centre at current cursor position.
- Alt(Option) + Click to toggle between Mandelbrot and Julia modes at current cursor position (useful points of interest can be found just outside the perimeter of the Mandelbrot set).
- Press  to reset to default settings.
- Press  to zoom in at current coordinates.
- Press  to zoom out at current coordinates.
- Press  to turn zoom animation on or off. A series of frames will be automatically generated, centered at the current coordinates with the zoom level incremented by the 'zoom increment' amount.
- Press  to cycle through modes (Mandelbrot / Julia).
- Press  to cycle through variants (Standard / Burning Ship / Tricorn).
- Press  to cycle exponent (2 - 6).
- Press  to cycle through color themes.
- Press / to shift color theme up or down.
- Press / to rotate Julia Set clockwise or anti-clockwise.
- Press  to turn Julia spin animation on or off.
- Press  to save image.
- Press  to open or close settings panel.
- Press  to open or close help panel.
### To create a custom color rendering palette
- Choose a palette depth of 4, 8, 12 or 16 colors.
- Choose a gradient depth of 16, 32, 64, 128, 256 or 512 levels.
- Choose the color interpolation method ('None' or 'Linear').
- Create the palette by picking colors using the color picker widget and applying the selection to each palette slot in turn.
- Click 'PAINT'. A color gradient will be created dynamically and applied to the displayed fractal.
- The custom color gradient will also be added to the list of available color rendering themes in the format 'User_x_nnn', where 'x' is an auto-incremented number and 'nnn' is the number of levels.
## How to Deploy
### To view and deploy as a web page
The project can be deployed as an Electron (Node.js) desktop application (`index2.html`), or as a stand-alone web site `index.html`.
To view as a web page, simply open the [index.html](./index.html) file from the project root directory in any web browser. To deploy to a web server, from your command line:
```bash
# Clone this repository
git clone https://github.com/Algol-Variables/fractal-generator
# Go into the repository
cd fractal-generator
# Copy files to required web server directory e.g. /var/www/html/fractal/
cp {complexlite.js, colorutils.js, fractalutils.js, app.js, index.html, styles.css, resources/*} /var/www/html/fractal
```
See, for example: [fractal-generator](https://www.algolvariables.com/fractals/index.html)
### To build and deploy as a desktop application
To clone and run this repository you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:
```bash
# Clone this repository
git clone https://github.com/Algol-Variables/fractal-generator
# Go into the repository
cd fractal-generator
# Install dependencies
npm install
# Install electron-forge (if required)
npm install --save-dev @electron-forge/cli
npx electron-forge import
# Run the app
npm start
# Create local app executable using electron-forge (if required)
npm run make
# The executable application (.app, .exe, etc.) can be found in the /out/make directory
cd out/make
```
## License
Copyright: Algol Variables © 2021
[GPLv3 License](LICENSE)
Icons from [iconmonstr](https://iconmonstr.com/) - [License](https://iconmonstr.com/license/)
## Author Information
admin@algolvariables.com