PlasmaFractal

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).

Live demo

• 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.

Requirements and browser support:

• 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!

Preset Links

Click an image to open PlasmaFractal preset.

Credits

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.

• Bootstrap

  • Copyright (c) 2011-2019 Twitter, Inc.
  • Copyright (c) 2011-2019 The Bootstrap Authors

• Vue.js

  • Copyright (c) 2013-present, Yuxi (Evan) You

• Bootstrap-Vue

  • Copyright (c) 2016-2019 - BootstrapVue

• Bootswatch

  • Copyright (c) 2013 Thomas Park

• Popper.js

  • Copyright © 2016 Federico Zivolo and contributors

• jQuery

  • Copyright jQuery Foundation and other contributors.

• jQuery Easing

  • Copyright © 2008 George McGinley Smith. All rights reserved.

• Spectrum Colorpicker

  • Copyright (c) 2014, Brian Grinstead

• mersennetwister

  • 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.

• tinycolor

  • Copyright (c), Brian Grinstead, http://briangrinstead.com

• nouislider

  • Copyright (c) 2018 Léon Gersen

• lodash

  • Copyright OpenJS Foundation and other contributors https://openjsf.org/
  • Based on Underscore.js, copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors http://underscorejs.org/

• ResizeObserver polyfill

  • Copyright (c) 2016 Denis Rul

Special thanks to

• stackoverflow

  • So many helpful answers, too many to credit them individually. Kudos to this awesome community!

• Nickelartist

  • For many inspirations and some awesome presets.