24 items •
Download ./*
24 items •
Download ./*
firefoxtrigonometry.html
4 years ago• 1 523
{}
<!DOCTYPE html>
<!--
Author: Twily 2020
Website: twily.info
-->
<html>
<head>
<title>Twilys Trigonometry</title>
<meta name="viewport" content="width=640" />
<style type="text/css">
html,body {
background: #000; color: #eee;
font-family: Sans-serif; font-size: 10pt;
}
a:link, a:visited { color: #ee0; text-decoration: none; }
a:hover, a:active { color: #ee0; }
.log {
display: inline-block;
width: 300px; height: 300px;
border: 1px solid #666; text-align: left;
overflow: auto; white-space: pre;
font-family: monospace; color: #060;
}
.clock, .draw {
display: inline-block;
width: 300px; height: 300px;
border: 1px solid #666;
overflow: hidden;
position: relative;
}
.citem {
width: 10px; height: 10px; font-size: 10px;
text-align: center;
position: absolute; /*transition: .2s ease; glitch effect*/
}
</style>
<script type="text/javascript">
var $=function(id) { return document.getElementById(id); };
function clearTri(id) {
var c=$(id);
var ctx=c.getContext("2d");
//ctx.fillStyle="red";
//ctx.fillRect(0,0,300,300);
ctx.clearRect(0,0,300,300);
}
function drawTri(id,x,y) { // just to give visuals to the triangles
var c=$(id);
var ctx=c.getContext("2d");
var radius=150-5;
x+=radius;
y+=radius;
if(spindir==1 || spindir==0) {
ctx.strokeStyle="#003300";
ctx.beginPath();
ctx.moveTo(radius,5);
ctx.lineTo(radius,radius*2);
ctx.stroke();
ctx.strokeStyle="#660000";
ctx.beginPath();
ctx.moveTo(x,radius);
ctx.lineTo(x,y);
ctx.stroke();
ctx.strokeStyle="#000066";
ctx.beginPath();
ctx.moveTo(radius,radius);
ctx.lineTo(x,radius);
ctx.stroke();
ctx.strokeStyle="#750000";
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(radius,radius);
ctx.stroke();
} else if(spindir==-1) {
ctx.strokeStyle="#0000D5";
ctx.beginPath();
ctx.moveTo(radius,y);
ctx.lineTo(x,y);
ctx.stroke();
ctx.strokeStyle="#000066";
ctx.beginPath();
ctx.moveTo(radius,radius);
ctx.lineTo(radius,y);
ctx.stroke();
ctx.strokeStyle="#750000";
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(radius,radius);
ctx.stroke();
}
}
var clock1={};
clock1.num=25;
clock1.degree=360*2;
clock1.points=Math.round(clock1.degree/clock1.num)+1;
clock1.radius=150-5;
var clock2={};
clock2.num=61; // 62
clock2.degree=360*5;
clock2.points=Math.round(clock2.degree/clock2.num)+1;
clock2.radius=150-5;
var radian=(Math.PI/180);
function digits() { // place the digits in position
var mylog=[],itostr="",html="",x,y,orbit=140,cangle;
for(var i=0;i<clock1.num;i++) {
itostr=(i.toString().length<2)?"0"+i:i;
if(i<24 && !$('c1i'+itostr)) {
cangle=(i*clock1.points-90);
while(cangle>360) cangle-=360; // ex 630deg - 360 == 270deg
while(cangle<0) cangle+=360; // ex -90deg + 360 == 270deg
if(i>11) orbit=120;
x=Math.round(Math.cos(cangle*radian)*orbit);
y=Math.round(Math.sin(cangle*radian)*orbit);
html+="<a onclick=\"cclick(this.id);\" href=\"#\" target=\"_self\" class=\"citem\" id=\"c1i"+itostr+"\" style=\"top: "+(y+clock1.radius)+"px; left: "+(x+clock1.radius)+"px;\">"+itostr+"</a>";
drawTri('draw1',x,y);
mylog.push([itostr,cangle,x,y]);
}
}
$('clock1').innerHTML+=html;
printmyLog("log1",mylog);
mylog=[],html="",x,y,orbit=140;
for(var i=0;i<clock2.num;i++) {
itostr=(i.toString().length<2)?"0"+i:i;
if(i<60 && !$('c2i'+itostr)) {
cangle=(i*clock2.points-90);
while(cangle>360) cangle-=360;
while(cangle<0) cangle+=360;
if(i>11) orbit=120;
if(i>23) orbit=100;
if(i>35) orbit=80;
if(i>47) orbit=60;
x=Math.round(Math.cos(cangle*radian)*orbit);
y=Math.round(Math.sin(cangle*radian)*orbit);
html+="<a onclick=\"cclick(this.id);\" href=\"#\" target=\"_self\" class=\"citem\" id=\"c2i"+itostr+"\" style=\"top: "+(y+clock2.radius)+"px; left: "+(x+clock2.radius)+"px;\">"+itostr+"</a>";
drawTri('draw2',x,y);
mylog.push([itostr,cangle,x,y]);
}
}
$('clock2').innerHTML+=html;
printmyLog("log2",mylog);
}
var fps=30;
var spina=90;
var spindir=0;
function spin() { // loop and spin the digits around CCW/CW
if(spina>360) spina=0;
if(spina<0) spina=360;
if(spindir==-1) spina++;
else if(spindir==1) spina--;
clearTri('draw1');
clearTri('draw2');
var mylog=[],itostr="",x,y,orbit=140,cangle;
for(var i=0;i<clock1.num;i++) {
itostr=(i.toString().length<2)?"0"+i:i;
if(i<24 && $('c1i'+itostr)) {
cangle=(i*clock1.points-spina);
while(cangle>360) cangle-=360;
while(cangle<0) cangle+=360;
if(i>11) orbit=120;
x=Math.round(Math.cos(cangle*radian)*orbit);
y=Math.round(Math.sin(cangle*radian)*orbit);
$('c1i'+itostr).style.top=(y+clock1.radius)+"px";
$('c1i'+itostr).style.left=(x+clock1.radius)+"px";
drawTri('draw1',x,y);
mylog.push([itostr,cangle,x,y]);
}
}
printmyLog("log1",mylog);
mylog=[],orbit=140;
for(var i=0;i<clock2.num;i++) {
itostr=(i.toString().length<2)?"0"+i:i;
if(i<60 && $('c2i'+itostr)) {
cangle=(i*clock2.points-spina);
while(cangle>360) cangle-=360;
while(cangle<0) cangle+=360;
if(i>11) orbit=120;
if(i>23) orbit=100;
if(i>35) orbit=80;
if(i>47) orbit=60;
x=Math.round(Math.cos(cangle*radian)*orbit);
y=Math.round(Math.sin(cangle*radian)*orbit);
$('c2i'+itostr).style.top=(y+clock2.radius)+"px";
$('c2i'+itostr).style.left=(x+clock2.radius)+"px";
drawTri('draw2',x,y);
mylog.push([itostr,cangle,x,y]);
}
}
printmyLog("log2",mylog);
}
var lastupdate=0;
function clockswap(ctime) { // every 5 second switch clock2 num between 61 and 62 and recreate missing
lastupdate=ctime;
if(clock2.num>61) clock2.num=61
else clock2.num=62;
clock2.points=Math.round(clock2.degree/clock2.num)+1;
digits();
}
function printmyLog(id,log) {
var ctime=new Date().getTime();
if(ctime-lastupdate>5000) {
clockswap(ctime);
}
var lognum=id.substr(3);
var str="",autoscroll=true;
var arr=$(id).innerHTML.split("\n");
for(var i=0;i<log.length;i++) { // add spacing and update logs
var logform={};
logform.angle=log[i][1].toString();
logform.x=log[i][2].toString();
logform.y=log[i][3].toString();
while(logform.angle.length<3) logform.angle=" "+logform.angle;
while(logform.x.length<4) logform.x=logform.x+" ";
while(logform.y.length<4) logform.y=logform.y+" ";
arr.push("c"+lognum+"i"+log[i][0]+" "+logform.angle+"deg x="+logform.x+" y="+logform.y);
}
for(var i=0;i<arr.length;i++) {
if(i>arr.length-100) {
if(arr[i]!="") {
str+=arr[i]+"\n";
}
}
}
// autoscroll detection
if(($(id).scrollTop+10)>=($(id).scrollHeight-$(id).clientHeight)) autoscroll=true;
else autoscroll=false;
$(id).innerHTML=str+"\n";
if(autoscroll) $(id).scrollTop=$(id).scrollHeight;
}
function cclick(id) {
var txt=$(id).innerHTML;
var csel=id.substr(1,1);
var dat=csel+","+txt;
console.log("Clicked citem="+id+" data="+dat);
}
function init() {
digits();
var iS,spintoggle=false;
document.body.addEventListener('click',function() { // stop start spin on mouse click
if(!spintoggle) {
lastupdate=new Date().getTime();
iS=setInterval(function() { spin(); },1000/fps);
if(spindir==-1 || spindir==0) spindir=1;
else if(spindir==1) spindir=-1;
} else {
clearInterval(iS);
}
spintoggle=!spintoggle;
});
}
</script>
</head>
<body onload="init();">
<center>
<div class="clock" id="clock1"></div>
<div class="clock" id="clock2"></div>
<br />
<canvas class="draw" id="draw1" width="300px" height="300px"></canvas>
<canvas class="draw" id="draw2" width="300px" height="300px"></canvas>
<br />
<div class="log" id="log1"></div>
<div class="log" id="log2"></div>
</center>
</body>
</html>
Top
©twily.info 2013 - 2024
2 160 711 visits