~firefox
15 itemsDownload ./*


..
stylish
hidecaption.ahk
homepage-centered-iframe.html
homepage-centered-slideshow.html
homepage-masonry.html
homepage-panels.html
homepage-sidebar.html
homepage-slide3d.html
homepage-stars.html
mailorder.html
remoteButter.html
slideshow.html
template.html
template.min.html
trigonometry.html


firefoxtrigonometry.html
702 weeks agoDownloadRawClose


<!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 at twily dot info
©twily.info 2013 - 2020



1 491 267 visits
... ^ v