A simple demo of a palette rotation plasma effect implemented using HTML5 Canvas and JavaScript. This project showcases smooth, vibrant color transitions and a mesmerizing visual effect.
This demo was first written in 2012, during the early stages of HTML5 Canvas. See this old blog post I wrote then for context.
Check out the live demo.
The plasma effect demo comes with several pre-defined presets and customization options, allowing you to tweak and experiment with the visuals easily. Here's how you can customize the effect:
The effect includes 10 pre-defined presets, each with unique parameters that control the visual appearance of the plasma. You can switch between these presets using the following keyboard keys:
0to9: Select a specific preset (e.g., press0for the first preset,1for the second, etc.).
Use these keyboard controls to modify the effect in real time:
- Amplitude / Frequency:
WXAD
N: Shrink the canvas size.M: Grow the canvas size.F: Resize to fit the full viewport.
H: Toggle animation on or off.
Change the mathematical function used for the plasma's angle calculations:
S: UseMath.sin.T: UseMath.tan.U: UseMath.atan.
Switch the primary color channel used in the effect:
R: Red channel.G: Green channel.B: Blue channel.
Every 3 seconds, the effect will automatically randomize the color channel and
pattern preset, keeping the visuals fresh and dynamic. You can manually trigger
these randomizations via the JavaScript function randomizeEffects().
Experiment with these options to create unique and mesmerizing plasma effects!
The current frames-per-second (FPS) is displayed in the top-left corner of the viewport. This helps you monitor the performance of the plasma effect in real time as you experiment with different presets and customizations.
This project is open-source and available under the MIT License.