version - using available
Sticky canvases:
Escape Radius:
Iterations:
Fractal Power:
Juliaset Constant:
Interpolate between normal and juliaset:
Canvas Size:
Color offset:
Colorfulness:
Sample Count:
WebGPU uses more modern backends such as Vulkan, D3D12 and Metal, providing a performance benefit, but isn't supported in every browser yet.
WebGL uses the more outdated OpenGL backend, which might be a bit worse performance-wise, but some browsers don't yet implement WebGPU.
Seed:
Amplitude:
Multiplier:
Forcing the backend to be WebGL may help a with the render time and export speed, if you are experiencing issues exporting or just find it slow, .
Final Image Size:
Chunk Size:
}(Using Backend: )
As an example, here is the mandelbrot set:
return c_pow(z, power) + c;In this example, c_pow() raises a complex number z to a float power (usually 2), and adds c.
NOTE: When experimenting around, sometimes you should use some of these with a low radius. That produces better results sometimes.
complex(re, im): Creates a complex number. Can also be written as vec2<f32>();
c_multiplication(a, b): Multiplies two complex numbers together.
c_division(a, b): Divides two complex numbers.
c_pow(z, p): Raises a complex number to a (float) power.
c_cpow(z, p): Raises a complex number to a (complex) power.
c_sin(z): Complex Sine
c_cos(z): Complex Cosine
c_tan(z): Complex Tangent
c_sinh(z): Complex Hyperbolic Sine
c_cosh(z): Complex Hyperbolic Cosine
c_tanh(z): Complex Hyperbolic Tangent
c_asin(z): Complex Arcsine
c_acos(z): Complex Arccosine
c_atan(z): Complex Arctangent
c_asinh(z): Complex Hyperbolic Arcsine
c_acosh(z): Complex Hyperbolic Arccosine
c_atanh(z): Complex Hyperbolic Arctangent
c_log(z): Complex Logarithm
c_exp(z): Complex Exponential
c_sqrt(z): Complex Square Root
c_abs(z): Complex Absolute (kind of, just takes the absolute of both sides)
You have access to all built-in WGSL/GLSL functions aswell.
pi: Pi
e: e
ln2: Natural Logarithm of 2
phi: Golden ratio.
}(Using Backend: )
var xp: f32 = x * pi * 2.;
return vec4<f32>(
.5 + sin(xp) / 2.,
.5 + sin(xp + 1.) / 2.,
.5 + sin(xp + 2.) / 2.,
1.
);This code uses a few sines to create the "classic" colorscheme.
var xv: f32 = x;
var red: vec3<f32> = vec3<f32>(1., 0., 0.);
var yellow: vec3<f32> = vec3<f32>(1., 1., 0.);
var green: vec3<f32> = vec3<f32>(0., 1., 0.);
var lightblue: vec3<f32> = vec3<f32>(0., 1., 1.);
var blue: vec3<f32> = vec3<f32>(0., 0., 1.);
var pink: vec3<f32> = vec3<f32>(1., 0., 1.);
xv = fract(xv) * 6.;
if (xv < 1.) {
return color_interpolate(pink, red, yellow, green, fract(xv));
}
if (xv < 2.) {
return color_interpolate(red, yellow, green, lightblue, fract(xv));
}
if (xv < 3.) {
return color_interpolate(yellow, green, lightblue, blue, fract(xv));
}
if (xv < 4.) {
return color_interpolate(green, lightblue, blue, pink, fract(xv));
}
if (xv < 5.) {
return color_interpolate(lightblue, blue, pink, red, fract(xv));
}
if (xv <= 6.) {
return color_interpolate(blue, pink, red, yellow, fract(xv));
}
return vec4<f32>(0., 0., 0., 1.);
While this might look a little confusing at first, you can also just try modifying the colors at the top, changing (1., 0., 1.) to whatever color (in RGB) you like.
This example creates the "rainbow" colorscheme.
This project is still very early in development. This means, new features will be added in the future. Until everything is finished, bugs might occur and things might break. If you find anything, please open a issue on github.
This project by nathansolomon1678 on github, where I got a lot of insipration (and a bit of code) from
This project by BenjaminAster on github, that helped me a little since I wasn't too experienced with WebGPU/WGSL
Paul Bourke's page on fractals, where I got lots of the fractals and insipration from
CodeParade (HackerPoet on github) for this project, where I got the code for the feather fractal and a few others from
This project on github I got some colormaps from.
This repository on github by radian628, where I got the idea of multisampling from.
Indigo Quilez' Website, which contains a lot of useful articles on graphical programming.
This project on github by kbinani, where I found some colormaps.
All the amazing people who discovered some of these fractals and made this project possible
My friends (who did nothing for this project)
You, for visiting and testing my project
- Added WebGL backend along with existing WebGPU to ensure maximum compatibility and performance
- UI redesign
- Faster load time
- Several bugfixes
- Replace the wacky preset URL system
- Bought a domain for the website
- Everything else new in v5
- Image chunker
- Halved loading time due to double compilation
- Fixed small possible bugs
- Improved exporting speed by a huge margin
- Fix bug with importing fractals being completely broken in most cases
- Fix bug where exporting chunked juliasets is broken
- 2 new colorschemes (purple, brown)
- Fix small bug when opening the window at a small scale, text will be squished a lot
- Canvases now automatically stick and unstick with the window being resized
- Added this changelog
- Slightly modifier the randomizer
- Fix noise not appearing correctly in chunked renders
- You can now drag and drop exported images (and preset urls) to automatically import the preset
- Fix a lot of messy code that will make working on some things easier
- Fix Fractal buttons by plugins not properly being highlighted
- Change the description section a bit