wolkd
Version:
Server and user interface to control WS2801 RGB LED strips via SPI
112 lines (94 loc) • 2.17 kB
HTML
<html>
<head>
<style type="text/css">
canvas {
border: 1px solid black;
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<a href="javascript:doeHet('test')">test</a>
<a href="javascript:doeHet('lighthouse')">lighthouse</a>
t=<span id="t">-</span>
R=<span id="r">-</span>
G=<span id="g">-</span>
B=<span id="b">-</span>
<br/>
<hr/>
<canvas id="tutorial" width="100" height="100"></canvas>
<script>
var scale = 4;
var canvas = document.getElementById('tutorial');
var debug = {
t: document.getElementById('t'),
r: document.getElementById('r'),
g: document.getElementById('g'),
b: document.getElementById('b')
}
var ctx = canvas.getContext('2d');
function rgb(r, g, b)
{
var rs = Math.round(r * 255);
var gs = Math.round(g * 255);
var bs = Math.round(b * 255);
return "rgb(" + rs + "," + gs + "," + bs + ")";
}
var ding = 'lighthouse'
function doeHet(d){
ding = d; repeat()
}
function debugShow(k, v){
debug[k].innerText = v.toString();
}
function debugRGB(rgbValue){
debugShow('r', rgbValue[0].toFixed(2))
debugShow('g', rgbValue[0].toFixed(2))
debugShow('b', rgbValue[0].toFixed(2))
}
var i = 0;
setInterval(repeat, 300);
function repeat(){
debugShow('t', i);
debugEm(dingen[ding]);
i += .1;
}
canvas.onmousemove = function(e){
var x = e.layerX / canvas.clientWidth;
var y = e.layerY / canvas.clientHeight;
RGBZ = dingen[ding](i, 0, x, y);
debugRGB(RGBZ);
}
function debugEm(ding)
{
for(var x = 0; x < canvas.width; x += 4)
{
for(var y = 0; y < canvas.height; y += 4)
{
var X = x / canvas.width;
var Y = y / canvas.width;
var Z = ding(i, 0, X, Y)
ctx.fillStyle = rgb(Z[0], Z[1], Z[2]);
ctx.fillRect(x, y, scale, scale);
}
}
}
var dingen = {
test: function(t, i, x, y){
var u = x / canvas.width;
var v = y / canvas.height;
var z = (t % 100) / 16;
return [u, v, z];
},
lighthouse: function(t, i, x, y) {
var dx = x - 0.5;
var dy = y - 0.5;
var a = Math.atan2(dy, dx) / Math.PI;
var rad = Math.abs(a + t) % 1;
var v = (rad < .15) ? 1 : 0;
return [v, v, v]
}
}
</script>