Linear Colour Palette Cycler for modV

Intended to be a helper Class for the JavaScript VJ software modV: https://github.com/2xaa/modV

by Sam Wray

HTML

<script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"></script>
<div class="largeSwatch"></div>
<br>
<label for="bpm-input">BPM: <input type="number" min="10" max="240" id="bpm-input" value="120" /></label>

CSS

div.largeSwatch {
    width: 100px;
    height: 100px;
}

div.palette div.swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px #aaa solid;
}

div.palette div.swatch ~ div.swatch {
    border-left: none;
}

JavaScript

//BPM sync: (bpm / 60) * 1000/2 <-- divide by 2 is optional, but more punchy colour changes.

const { keyframes, easing, styler, transform } = window.popmotion;
const { transformMap } = transform;

function bpmToDuration(bpm) {
	return (bpm / 60) * 1000 / 2;
}

const bpm = 130;
const duration = bpmToDuration(bpm);

/* const pal2 = [
  [0,0,0],
  [255,255,255]
]; */

const pal2 = [
  [212,191,182],
  [184,176,157],
  [88,117,121],
  [67,74,103],
  [133,101,160],
];

const paletteOut = {
  red: 0,
  green: 0,
  blue: 0,
};

const largeSwatch = document.querySelector('.largeSwatch');

const newPalette = pal2.splice(0);
newPalette.push(newPalette[0]);

console.log(newPalette);

const myKeyframes = keyframes({
  values: newPalette,
  duration: duration * newPalette.length,
  ease: easing.linear,
  loop: Infinity
})
	.pipe(transformMap({
    x: Math.round
  }))
	.start((v) => {
    largeSwatch.style.backgroundColor = `rgb(${v[0]}, ${v[1]}, ${v[2]})`;
  });

console.log(myKeyframes);

document.getElementById('bpm-input').addEventListener('input', (e) => {
 	const bpm = parseInt(e.target.value);
  const duration = bpmToDuration(bpm);
  console.log(duration);
  
  myKeyframes.duration = duration * newPalette.length;
});