Julia set fractals with WebGL
npm install julia-set[![Build status][ci-image]][ci-url]
[![Coverage report][coverage-image]][coverage-url]
[![License: Apache-2.0][license-image]][license-url]
[ci-image]: https://github.com/slowli/julia-set/workflows/CI/badge.svg?branch=master
[ci-url]: https://github.com/slowli/julia-set/actions
[coverage-image]: https://img.shields.io/codecov/c/gh/slowli/julia-set.svg
[coverage-url]: https://codecov.io/gh/slowli/julia-set/
[license-image]: https://img.shields.io/github/license/slowli/julia-set.svg
[license-url]: https://github.com/slowli/julia-set/blob/master/LICENSE
> Rendering [Julia sets] for complex functions using WebGL.
This package allows rendering Julia / Fatou sets for complex functions [in modern browsers][webgl-support].
The resulting images often have fractal-like nature.
An image can be rendered using the default export of the package:
``typescript
declare class JuliaSet {
static render(el: HTMLCanvasElement, options: Options);
constructor(el: HTMLCanvasElement, options: Options);
}
export default JuliaSet;
`
Here, Options are defined as follows:
`typescript`
declare interface Options {
code: string,
palette?: string | [number, number, number, number?][],
center?: [number, number],
height?: number,
iterations?: number,
runawayDistance?: number,
antialias?: boolean,
}
- code is the function of a complex variable z, such as 'z*z + 0.2i0.5'.+
It can use binary operators, such as , * or ^, and standardsinh
unary complex functions such as and atanh.palette
- is a named palette or an array of 3- or 4-component colors0
(encoded as RGB / RGBA, respectively) with each component being an integer from to 255.center
- is the center of the rendered rectangular area.height
- is the height of the rendered area. The width is determined automatically based on heightiterations
and the canvas dimensions.
- is the maximum number of iterations performed by the algorithm.runawayDistance
Greater values reveal more details, but the image may become desaturated.
- is the stopgap distance for the algorithm. In some cases, increasingantialias
it may reveal fractal details.
- corresponds to the [eponymous flag for HMTLCanvasElement.getContext][getContext()].
`javascript
import JuliaSet from 'julia-set';
JuliaSet.render(document.getElementById('canvas'), {
code: 'z * z + 0.33i0.5',
palette: [[255, 255, 255], [0, 192, 0]],
height: 3,
center: [0, 0],
iterations: 75,
runawayDistance: 4,
});
`
The following functions can be used in options.code:
Binary operations:
- +, -, *, /, ^
Unary functions:
- Trigonometric functions: sinh, cosh, tanh (with sh, ch, th synonyms respectively)asinh
- Inverse trigonometric functions: , acosh, atanhexp
- Exponentiation: log
- Logarithm: (with the ln synonym)re
- Real / imaginary parts of a complex value: , imarg
- Argument / modulus of a complex value: , mod
To influence function priority, you can use any of three kinds of brackets: (), [] or {}.
The following string values can be used as options.palette:
- grayscalered
- green
- tree
- (brown and green tones)snow
- (light-blue tones)
julia-set` is licensed under the [Apache 2.0 license][license].
[Julia sets]: https://en.wikipedia.org/wiki/Julia_set
[webgl-support]: https://caniuse.com/webgl
[getContext()]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext
[license]: https://www.apache.org/licenses/LICENSE-2.0