LED Animation simulator

by nickcoutsos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<script src="https://raw.github.com/processing-js/processing-js/v1.4.8/processing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>
<div id="leds"></div>

CSS

html, body {
  width: 100%;
  height: 100;
  background: #102030;
}

#leds {
  position: absolute;
  left: 50%;
  top: 50%;
  
  transform: translate(-50%, -50%);
}

.led {
  background: #204060;
  width: 50px;
  height: 50px;
  border: 2px solid rgba(20, 20, 20, 0.5);
}

JavaScript

const simplex = new SimplexNoise()
const ledCount = 8
const RGBLED_NUM = ledCount
const led = []
const led_positions = [
	[-2, 1.5],
  [-2, .5],
  [-2, -.5],
  [-2, -1.5],
  [2, 1.5],
  [2, .5],
  [2, -.5],
  [2, -1.5],
];


const effects = {
  'Hue Wave': rgblight_effect_hue_wave
}

const config = {
  RGBLIGHT_HUE_STEP: 72,
  active_effect: 'Hue Wave',
  glow: false,
  noise: 0.3
}


const rgblight_config = {
	hue: 200,
  sat: 100,
  val: 60
}

const anim = {
	pos: 0,
  run: true,
  current_hue: 0,
  current_offset: 0
}

var gui = new dat.GUI();
gui.add(rgblight_config, 'hue', 0, 255).onChange(update)
gui.add(rgblight_config, 'sat', 0, 100).onChange(update)
gui.add(rgblight_config, 'val', 0, 100).onChange(update)
gui.add(config, 'RGBLIGHT_HUE_STEP', 1, 255).onChange(update)
gui.add(config, 'glow').onChange(update)
gui.add(anim, 'pos', 0, 255).listen().onChange(update)
gui.add(anim, 'run').onChange(update)
gui.add(config, 'active_effect', Object.keys(effects)).onChange(update)
gui.add(config, 'noise', 0, 1).step(0.1).onChange(update)

outrun_led_hues = Array(ledCount)

const BLEND = (a, b, t) => ( a + (b - a) * t / 255.0 )

function sethsv(hue, sat, val, ledElement) {
	ledElement.style.background = `hsla(${hue / 255.0 * 360}, ${sat}%, ${val}%, 1)`
	ledElement.style.boxShadow = config.glow
  	? `0 0 20px ${7 * val / 100}px hsla(${hue / 255.0 * 360}, ${sat}%, ${val*1.5}%, .25)`
    : 'none'
}

let timeout

function init() {
	const size = 30

  for (let i = 0; i < ledCount; i++) {
    const ledElement = document.createElement('div')
    const [x, y] = led_positions[i]
    document.querySelector('#leds').appendChild(ledElement)
    led.push(ledElement)
    ledElement.classList.add('led')
    ledElement.dataset.index = i
    ledElement.style.position = 'absolute'
    ledElement.style.left = '50%'
    ledElement.style.top = '50%'
    ledElement.style.transform = `translate(${x*(size+10)}px, ${y*(size+10)}px)`
    ledElement.style.width = `${size}px`
   ...