109 lines
2.5 KiB
HTML
109 lines
2.5 KiB
HTML
|
<html><head>
|
||
|
|
<title>Syn2lights simulator</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<canvas id="myCanvas" width="1437" height="1051"></canvas>
|
||
|
|
<script>
|
||
|
|
var canvas = document.getElementById('myCanvas');
|
||
|
|
var context = canvas.getContext('2d');
|
||
|
|
var imageObj = new Image();
|
||
|
imageObj.src = 'building-isometric_night.jpg';
|
||
|
|
// windowTab[0][0]={x:488,y:265};
|
||
|
|
// windowTab[1][0]={x:528,y:265};
|
||
|
|
function lightWindow(x,y,val) {
|
||
|
|
context.beginPath();
|
||
|
|
context.rect(488+40.3*x, 265+87.4*y, 23, 34);
|
||
|
|
context.fillStyle = 'rgb('+val+','+val+','+val+')';
|
||
|
|
context.fill();
|
||
|
|
}
|
||
|
|
function lightSegment(display,segment,r,g,b) {
|
||
|
|
context.beginPath();
|
||
|
|
segx=488+40.3*display;
|
||
|
|
segy=176
|
||
|
|
switch(segment) {
|
||
|
|
case 0: //segment 0
|
||
|
|
context.moveTo(segx,segy);
|
||
|
|
context.lineTo(segx+23,segy);
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
context.moveTo(segx+23,segy);
|
||
|
|
context.lineTo(segx+23,segy+17);
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
context.moveTo(segx+23,segy+18);
|
||
|
|
context.lineTo(segx+23,segy+34);
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
context.moveTo(segx,segy+34);
|
||
|
|
context.lineTo(segx+23,segy+34);
|
||
|
|
break;
|
||
|
|
case 4:
|
||
|
|
context.moveTo(segx,segy+18);
|
||
|
|
context.lineTo(segx,segy+34);
|
||
|
|
break;
|
||
|
|
case 5:
|
||
|
|
context.moveTo(segx,segy);
|
||
|
|
context.lineTo(segx,segy+17);
|
||
|
|
break;
|
||
|
|
case 6:
|
||
|
|
context.moveTo(segx,segy+17);
|
||
|
|
context.lineTo(segx+23,segy+17);
|
||
|
|
break;
|
||
|
|
case 7:
|
||
|
|
context.moveTo(segx+23,segy+38);
|
||
|
|
context.lineTo(segx+23,segy+42);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
context.lineWidth=5;
|
||
|
|
context.strokeStyle = 'rgb('+r+','+g+','+b+')';
|
||
|
|
context.stroke();
|
||
|
|
}
|
||
|
|
imageObj.onload = function() {
|
||
|
|
context.drawImage(imageObj, 0, 0);
|
||
|
|
|
||
|
|
for(x=0;x<12;x++)
|
||
|
|
for(y=-1;y<8;y++)
|
||
|
|
lightWindow(x,y,0);
|
||
|
|
|
||
|
|
i=0;
|
||
|
|
j=0;
|
||
|
|
oldi=oldj=0;
|
||
|
|
colwave=0;
|
||
|
|
d=0;
|
||
|
|
s=0;
|
||
|
|
oldd=olds=0;
|
||
|
|
setInterval("loop()",100);
|
||
|
|
};
|
||
|
|
|
||
|
|
function loop() {
|
||
|
|
// 7 segments colorful sequence
|
||
|
|
lightSegment(oldd,olds,0,0,0);
|
||
|
|
lightSegment(d,s,255,Math.floor((Math.sin(colwave/30)+1)*127),Math.floor((Math.cos(colwave/17)+1)*127));
|
||
|
|
colwave++;
|
||
|
|
oldd=d;olds=s;
|
||
|
|
s++;
|
||
|
|
if(s>=8) {
|
||
|
|
s=0
|
||
|
|
d++
|
||
|
|
if(d>=12) {
|
||
|
|
d=0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// windows sliding light
|
||
|
|
lightWindow(oldi,oldj,0) // switch off previous window
|
||
|
|
lightWindow(i,j,Math.floor((Math.sin(colwave/77)+1)*127)) // switch on new window
|
||
|
|
oldi=i;
|
||
|
|
oldj=j;
|
||
|
|
i++;
|
||
|
|
if(i>=12) {
|
||
|
|
i=0;
|
||
|
|
j++;
|
||
|
|
if(j>=8) {
|
||
|
|
i=j=0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body></html>
|