Interactive Noise Particle System

This is a cool and creative interactive noise-generated particle system created using three.js and WebGL. The first particle mode reacts to the movements of the user’s input direction and will move with the motion.  The second mode expands the particles away from the user’s input, creating a colorful magenta bubble.

WebGL Interactive Particles Demo

The particles appear to float in mid-space and change color depending on the speed of your motion. It starts off as blue, then yellow and moves on to a vibrant magenta at the fastest movement speed. This creates a very vibrant and beautiful gradient that’s very satisfying to look at.

If you want to check out this cool project, feel free to try it out here.


You might also find this interesting:


  1. How to Create a Particle System in Three.js Some of the most fascinating Chrome Experiments to watch and experience are 3D Particles. The sdg Blog has a series of tutorials about programming 3D graphics in the browser using Three.js. Their...

  2. WebGL Water Noise demo Using simplex noise and a normal map, an WebGL experiment in creating a water surface. Share List...

  3. WebGL Particle Morph A neat interactive WebGL demo of flying particles morphing into a few various shapes Share List...

  4. GPU Particle Attractors A Three.js Chrome Experiment using texture and FBO to store and compute particle data. View Demo Share List...

  5. WebGL FBO Particle System See your 3D objects as a cloud of particles in this new WebGL experience called Point Cloud Sandbox. Just specify the number of particles (between 10,000 to 2 million), upload...

, , ,
HTML5 Demos, Three.js-1, WebGL-1