目で追従するやつをriotで実装

背景

何やら入力を目で追従するようなサイトが流行っているので作ってみようと思った。

結論

こうなった

リンクは下記
http://hasito.com/kuma/

実装

メイン部分

コード全体は長いけど主は下記の部分のみだと思う…
kakuとshahenで単純に三角関数で角度を算出してから角度と斜辺の長さから目の位置を割り出して、
その結果をオブジェクトに入れてstyleとしてhtml上に展開しています。

    move(e){
        var kaku=(p1,p2)=>{
            return Math.atan2((p1.y-p2.y),(p1.x-p2.x)); 
        }
        var shahen=(r,l)=>{
            return {x:Math.cos(r)*l,y:Math.sin(r)*l};
        }
        var m1=shahen(kaku(e,bme1_p),me_size);
        var m2=shahen(kaku(e,bme2_p),me_size);
        self.styles['meb1']={
            top:(bme1_p.y+m1.y)+ "px",
            left:(bme1_p.x+m1.x)+"px"
        };
        self.styles['meb2']={
            top:(bme2_p.y+m2.y)+ "px",
            left:(bme2_p.x+m2.x)+"px"
        };
        self.update();
    }

ソース全体

<kuma>
    <div onmousemove={move} style={styles['body']}>
        <div class="kao"></div>
        <div class="mimi p1"></div>
        <div class="mimi p2"></div>
        <div class="me p3"></div>
        <div class="me p4"></div>
        <div class="bme p5" style={styles['meb1']}></div>
        <div class="bme p6" style={styles['meb2']}></div>
    </div>
<style>
.kao {
    border-radius: 50%;
    height: 300px;
    width: 300px;
    top:100px;
    left:100px;
    background-color:#666;
    position:absolute;
}
.mimi {
    border-radius: 50%;
    height: 100px;
    width: 100px;   
    background-color:#666;
    position:absolute;
}
.me {
    border-radius: 50%;
    height: 100px;
    width: 100px;   
    background-color:#eee;
    position:absolute;
}
.bme {
    border-radius: 50%;
    height: 50px;
    width: 50px;   
    background-color:#000;
    position:absolute;
    transition:0.2s;
    -webkit-transition: 0.2s;
}
.p1{top:100px;left:100px;}
.p2{top:100px;left:300px;}
.p3{top:150px;left:130px;}
.p4{top:150px;left:270px;}
.p5{top:175px;left:155px;}
.p6{top:175px;left:295px;}

</style>
<script>
    var self  = this;
    self.styles={};
    var bme1_p={y:175,x:155};
    var bme2_p={y:175,x:295};
    var me_size=25;
    self.styles['body']={
        update:function(){
            this.height= window.innerHeight + 'px';
            this.width= window.innerWidth + 'px';
        },
        height:"0px",
        width:"0px",
        'background-color':'#333',
        margin: '0px',
        display: 'block'
    };
    move(e){
        var kaku=(p1,p2)=>{
            return Math.atan2((p1.y-p2.y),(p1.x-p2.x)); 
        }
        var shahen=(r,l)=>{
            return {x:Math.cos(r)*l,y:Math.sin(r)*l};
        }
        var m1=shahen(kaku(e,bme1_p),me_size);
        var m2=shahen(kaku(e,bme2_p),me_size);
        self.styles['meb1']={
            top:(bme1_p.y+m1.y)+ "px",
            left:(bme1_p.x+m1.x)+"px"
        };
        self.styles['meb2']={
            top:(bme2_p.y+m2.y)+ "px",
            left:(bme2_p.x+m2.x)+"px"
        };
        self.update();
    }
    window.onresize = ()=>{
        self.styles['body'].update();
        self.update();
    }
    window.onresize();
</script>
</kuma>