Old-school plasma fractal with palette animation effect running in a browser. Pure JavaScript, no WebGL.
Basic algorithm:
- Grayscale image is generated once using Perlin Noise algorithm (multiple iterations per pixel to produce fractal).
- For each frame:
- Palette is animated by rotating the palette entries and by blending between random colors.
- Grayscale image is mapped to RGB by using pixel values as palette indices.
Multithreading:
- Two threads (Web Workers) render differently seeded plasma fractals to their own canvas.
- The two canvases are cross-faded from time to time to generate ever-changing structures (see Options > Animation > Noise Transition).
- Double-click to toggle fullscreen.
- Press the "gear" button in the top-left corner to adjust plasma options.
- When you are happy with your settings, share the Permalink with your friends.
- Requires Offscreen Canvas (experimental API) support by browser.
- ✅ Tested successfully with Chrome v76.0.3809.100 and Opera v63.0.3368.71.
⚠️ Firefox currently not supported (tested with v69.0, which is still missing 2D-OffscreenCanvas support).- The newest WebGL version of PlasmaFractal does work in Firefox though!
Click an image to open PlasmaFractal preset.
![Classic Octaves 8 Classic Octaves 8](https://github.com/screenshots/thumbs/freq2_oct8_gain0.4.jpg)
![Classic Octaves 1 Classic Octaves 1](https://github.com/screenshots/thumbs/freq10_oct1_gain0.4.jpg)
![Abstract Paintings Abstract Paintings](https://github.com/screenshots/thumbs/AbstractPaintings.jpg)
![Fiery Fiery](https://github.com/screenshots/thumbs/Fiery.jpg)
![Neon Neon](https://github.com/screenshots/thumbs/Neon1.jpg)
![Turquoise/White Plastic Turquoise/White Plastic](https://github.com/screenshots/thumbs/TurqoiseWhitePlastic.jpg)
![Ocean Waves Ocean Waves](https://github.com/screenshots/thumbs/OceanWaves.jpg)
![Black/White Sine2 Black/White Sine2](https://github.com/screenshots/thumbs/GreySine2.jpg)
![Lava Lamp Lava Lamp](https://github.com/screenshots/thumbs/LavaLamp.jpg)
![Purple/White Sine2 Purple/White Sine2](https://github.com/screenshots/thumbs/PurpleWhiteSine2.jpg)
![Ink - by Nickelartist Ink - by Nickelartist](https://github.com/screenshots/thumbs/Ink.jpg)
![Dexter Dexter](https://github.com/screenshots/thumbs/Dexter.jpg)
![Elektro - by Nickelartist Elektro - by Nickelartist](https://github.com/screenshots/thumbs/Elektro.jpg)
![Lines and Clouds - by Nickelartist Lines and Clouds - by Nickelartist](https://github.com/screenshots/thumbs/Lines-n-clouds.jpg)
![The Maze The Maze](https://github.com/screenshots/thumbs/Maze.jpg)
![Tapes Tapes](https://github.com/screenshots/thumbs/Tapes.jpg)
![Dirty Contrast on White - by Nickelartist Dirty Contrast on White - by Nickelartist](https://github.com/screenshots/thumbs/DirtyContrastOnWhite.jpg)
![Seething Colors on White - by Nickelartist Seething Colors on White - by Nickelartist](https://github.com/screenshots/thumbs/SeethingOnWhite.jpg)
![Gold Islands Gold Islands](https://github.com/screenshots/thumbs/GoldIslands.jpg)
![Black/White/Red - by Nickelartist Black/White/Red - by Nickelartist](https://github.com/screenshots/thumbs/BlackWhiteRed.jpg)
![Café au Lait - by Nickelartist Café au Lait - by Nickelartist](https://github.com/screenshots/thumbs/Cafe_au_Lait.jpg)
![Egg Yolk Fluid - by Nickelartist Egg Yolk Fluid - by Nickelartist](https://github.com/screenshots/thumbs/EggYolkFluid.jpg)
![Neon Tapes Neon Tapes](https://github.com/screenshots/thumbs/NeonTapes.jpg)
![Cosmic Energy Cosmic Energy](https://github.com/screenshots/thumbs/CosmicEnergy.jpg)
This project uses the following open source libraries. Each library comes with its own license terms, which can be found in the source code included in this project.
-
noisejs - A speed-improved perlin and simplex noise algorithms for 2D.
- Based on example code by Stefan Gustavson (stegu@itn.liu.se).
- Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
- Better rank ordering method by Stefan Gustavson in 2012.
- Converted to Javascript by Joseph Gentle.
-
- Copyright (c) 2011-2019 Twitter, Inc.
- Copyright (c) 2011-2019 The Bootstrap Authors
-
- Copyright (c) 2013-present, Yuxi (Evan) You
-
- Copyright (c) 2016-2019 - BootstrapVue
-
- Copyright (c) 2013 Thomas Park
-
- Copyright © 2016 Federico Zivolo and contributors
-
- Copyright jQuery Foundation and other contributors.
-
- Copyright © 2008 George McGinley Smith. All rights reserved.
-
- Copyright (c) 2014, Brian Grinstead
-
- Copyright (C) 1997 - 2002, Makoto Matsumoto and Takuji Nishimura, All rights reserved.
- This implementation by Raphael Pigulla is based on Sean McCullough's port of the original C code written by Makato Matsumoto and Takuji Nishimura.
-
- Copyright (c), Brian Grinstead, http://briangrinstead.com
-
- Copyright (c) 2018 Léon Gersen
-
- Copyright OpenJS Foundation and other contributors https://openjsf.org/
- Based on Underscore.js, copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors http://underscorejs.org/
-
- Copyright (c) 2016 Denis Rul
-
- So many helpful answers, too many to credit them individually. Kudos to this awesome community!
-
- For many inspirations and some awesome presets.