variaboard
Version:
VariaBoard is a control interface to modify parameters in JavaScript.
197 lines (174 loc) • 5.43 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VariaBoard Demo</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Jack Rugile">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="./css/variaboard.min.css">
</head>
<body>
<script src="./js/variaboard.min.js"></script>
<script>
let varia = new VariaBoard({
container: document.body
});
varia.addRange({
id: 'width',
title: 'Width',
min: 0,
max: 400,
step: 0.5,
default: 40,
randomizable: true,
mutable: true,
locked: false
});
varia.addRange({
id: 'height',
title: 'Height',
min: 0,
max: 300,
step: 0.5,
default: 40,
randomizable: true,
mutable: true,
locked: false
});
varia.addRange({
id: 'rotation',
title: 'Rotation',
min: 0,
max: 300,
step: 1,
default: 0,
randomizable: true,
mutable: true,
locked: false
});
varia.addRange({
id: 'radius',
title: 'Radius',
min: 1,
max: 140,
step: 1,
default: 10,
randomizable: true,
mutable: true,
locked: false
});
varia.addRange({
id: 'hue',
title: 'Hue',
min: 0,
max: 360,
step: 1,
default: 0,
randomizable: true,
mutable: true,
locked: false
});
varia.addRange({
id: 'saturation',
title: 'Saturation',
min: 50,
max: 100,
step: 1,
default: 100,
randomizable: true,
mutable: true,
locked: false
});
varia.addRange({
id: 'lightness',
title: 'Lightness',
min: 20,
max: 80,
step: 1,
default: 50,
randomizable: true,
mutable: true,
locked: false
});
varia.addRange({
id: 'alpha',
title: 'Alpha',
min: 0.5,
max: 1,
step: 0.01,
default: 1,
randomizable: true,
mutable: true,
locked: false
});
varia.addButton({
id: 'randomize',
title: 'Randomize',
description: 'Set all controls to a random value',
callback: () => {
varia.randomize();
}
});
varia.addButton({
id: 'mutate',
title: 'Mutate',
description: 'Change the value of all controls slightly',
callback: () => {
varia.mutate();
}
});
let c = document.createElement('canvas');
let ctx = c.getContext('2d');
let w = 400;
let h = 400;
let dpr = window.devicePixelRatio;
c.width = w * dpr;
c.height = h * dpr;
c.style.width = `${w}px`;
c.style.height = `${h}px`;
ctx.scale(dpr, dpr);
document.body.appendChild(c);
function loop() {
requestAnimationFrame(loop);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = '#000'
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = 'lighter';
ctx.save();
ctx.translate(w * 0.25, h / 2);
ctx.rotate(varia.get('rotation') / 360 * Math.PI * 2);
ctx.fillStyle = `hsla(${varia.get('hue') - 90}, ${varia.get('saturation')}%, ${varia.get('lightness')}%, ${varia.get('alpha')})`;
ctx.fillRect(varia.get('width') / -2, varia.get('height') / -2, varia.get('width'), varia.get('height'));
ctx.restore();
ctx.save();
ctx.translate(w / 2, h / 2);
ctx.rotate(varia.get('rotation') / 360 * Math.PI * 2);
ctx.fillStyle = `hsla(${varia.get('hue')}, ${varia.get('saturation')}%, ${varia.get('lightness')}%, ${varia.get('alpha')})`;
ctx.fillRect(varia.get('width') / -2, varia.get('height') / -2, varia.get('width'), varia.get('height'));
ctx.restore();
ctx.save();
ctx.translate(w * 0.75, h / 2);
ctx.rotate(varia.get('rotation') / 360 * Math.PI * 2);
ctx.fillStyle = `hsla(${varia.get('hue') + 90}, ${varia.get('saturation')}%, ${varia.get('lightness')}%, ${varia.get('alpha')})`;
ctx.fillRect(varia.get('width') / -2, varia.get('height') / -2, varia.get('width'), varia.get('height'));
ctx.restore();
ctx.beginPath();
ctx.fillStyle = `hsla(${varia.get('hue') + 90}, ${varia.get('saturation')}%, ${varia.get('lightness')}%, ${varia.get('alpha')})`;
ctx.arc(w * 0.25, h / 2, varia.get('radius'), 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = `hsla(${varia.get('hue') + 180}, ${varia.get('saturation')}%, ${varia.get('lightness')}%, ${varia.get('alpha')})`;
ctx.arc(w / 2, h / 2, varia.get('radius'), 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = `hsla(${varia.get('hue') - 90}, ${varia.get('saturation')}%, ${varia.get('lightness')}%, ${varia.get('alpha')})`;
ctx.arc(w * 0.75, h / 2, varia.get('radius'), 0, Math.PI * 2);
ctx.fill();
}
loop();
</script>
</body>
</html>