PlasmaFractal

Oldschool PlasmaFractal revival with Perlin Noise and WebGL. Fully customizable via dynamic VueJS based UI.

Basic algorithm (fragment shader):

• For each pixel, grayscale value is calculated by calling Perlin Noise or other noise functions.
• RGB color is generated by using grayscale value as palette index.
• To produce fractal, calculate noise function multiple times per pixel with increasing frequency and decreasing amplitude.
• Optional domain warping:
  • Distort the space by applying another noise function to the input coordinates of the final noise function. Most tutorials simply add noise values to the coordinates, while more interesting results can be achieved with other techniques, e. g. using polar coordinates.

Animation

• Noise can be mutated by taking a slice of 3D noise and incrementing the Z position over time.
• A turbulence effect can be achieved by incrementing the Z position faster for each octave of fractal.
• Palette can be animated by rotating the palette entries and by blending between random colors.

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 WebGL2 support by browser.
• ✅ Tested successfully with Chrome v77.0.3865.90, Opera v63.0.3368.94, Firefox v69.0.1
• Best performance observed in Chromium-based browsers like Chrome and Opera.

Preset Links

Develop

# Install
npm install
npm install -g @vue/cli
    
# Build & Serve
vue ui
    
# Build Release
npm run build

To open the release build locally in a browser, you must use a local web server. The root folder must be the project directory, so that there is a "plasmafractal-gl" sub folder in the URL: http://127.0.0.1:8080/plasmafractal-gl/index.html

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.

• Wombat - An efficient texture-free GLSL procedural noise library

  • by Brian Sharpe
    • http://briansharpe.wordpress.com
    • https://github.com/BrianSharpe

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

• Vue.js

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

• Bootstrap

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

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