RAD-GUI

Interactive Particle System Demo

Setup & Usage

// Using npm
npm install rad-gui

// Using in browser
<script src="rad-gui.js"></script>
// CSS is automatically injected!

// Create a new GUI instance
const gui = new rad.GUI();

// Define parameters to control
const params = {
  value: 50,
  active: true,
  color: '#4b72c4'
};

// Add controllers
gui.add(params, 'value', 0, 100);
gui.add(params, 'active');
gui.addColor(params, 'color');

Code Example

// Create a GUI with custom configuration
const gui = new rad.GUI({
  container: document.getElementById('container'),
  width: 300,
  title: 'My Controls'
});

// Object to store parameters
const params = {
  count: 50,
  speed: 0.5,
  size: 5,
  color1: '#4b72c4',
  color2: '#c4b5fd',
  animate: true,
  shape: 'circle',
  opacity: 0.8,
  reset: function() {
    console.log('Resetting simulation...');
    initParticles();
  }
};

// Add basic controls with different methods
gui.add(params, 'count', 10, 200).step(1)
   .name('Particle Count')
   .onChange(value => {
     updateParticleCount(value);
   });

gui.add(params, 'speed', 0.1, 2)
   .name('Speed')
   .onChange(updateSpeed);

// Create a folder for appearance
const appearance = gui.addFolder('Appearance');

appearance.add(params, 'size', 1, 20)
  .name('Particle Size');

appearance.add(params, 'shape', ['circle', 'square', 'triangle'])
  .name('Particle Shape');

appearance.add(params, 'opacity', 0, 1)
  .name('Opacity');

// Add color pickers
const colors = gui.addFolder('Colors');
colors.addColor(params, 'color1').name('Primary Color');
colors.addColor(params, 'color2').name('Secondary Color');

// Add a button
gui.add(params, 'reset').name('Reset Simulation');

// Open folders by default
appearance.open();
colors.open();