プロ生ちゃん回してみた．

この記事は，プロ生ちゃん Advent Calendar 2017 7日目の記事です．

2017年もあとすこしとなってきました．

今年を振り返るといろいろなことがありました．

「5000兆円欲しい」や「けものフレンズ」，「ハンドスピナー」が話題になりました．

ハンドスピナー...!?

ということで，プロ生ちゃんをハンドスピナーの如く回転させました！！！
　~~(；´Д｀) < 強引すぎる~~　

→　https://ipolyomino.github.io/pronama_spinner/

webでできるハンドスピナーは，うおた氏が作成されていました．

ハンドスピナーが欲しすぎるので作ったスマホで遊べます!　https://t.co/07EdovMXFk pic.twitter.com/qEWhXcVIbn
— うおた (@uo_ta) 2017年5月28日

hand spinner

そこで，どんな方法で回転させているのか気になってソースを確認してみると，JQueryRotateというものが使われていました．

jqueryrotate.com

JQueryRotateは，かなりシンプルに書くことができるようです．例えば，50msごとに3度回転だと，

var angle = 0;
  setInterval(function(){
    angle+=3;
  $("#img").rotate(angle);
  },50);

とてもシンプルで良いですね．

同じ方法でプロ生ちゃんを回転させても良いのですが，面白くないので別の方法を探します．

生のJavaScriptで書いてみた．

html5からcanvas 要素というものが追加されています．

developer.mozilla.org

HTMLの canvas 要素と Canvas スクリプティング API を使用して、グラフィックスやアニメーションを描画することができます。

要するに JavaScriptを用いて，canvas内の様子を設定することができるというものですね．

今回のように，回転させたりするときに用いると便利なタグです．

コード

const canvas = document.getElementById('normal_canvas');
canvas.height = 300;
canvas.width = 300;

const context = canvas.getContext('2d');

const image = new Image();
image.src = 'image/money.png';
image.onload = () => { 
    rotate();
}

let theta = 0;

function rotate() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    context.save();
    
    context.translate(canvas.width / 2, canvas.height / 2);
    context.rotate(++theta * Math.PI / 180);
    context.translate(-canvas.width / 2, -canvas.height / 2);
    
    context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
    
    context.restore();

    setTimeout(rotate, 15);
}

．．．(´・ω・｀)

imageが読み込まれたイベントを取得して，画像を表示．
画像を表示するときには，widthとheightを取得してcanvasの大きさに合わせる．
回転の中心をcanvasの中心にして，再描画．この回転させる関数を定期的に呼び出して...

~~辛すぎワロタ~~

JQueryRotateなら数行で書けたものを，生のJavaScriptだと，数倍書かないといけないです．

もっと，うまいことcanvasに再描画して欲しいです．

Grimoire.js で書いてみた．

Grimoire(グリモア).jsとは，Web開発のためのWebGL フレームワークのことです．

もう少し詳しく書きます．まずWebGLについて，

WebGLとは，Web Graphics Libraryのことで，Web上でインタラクティブな2D/3Dグラフィックスをレンダリングするための JavaScript API です．

極端に言えば，Web上で綺麗な2D/3Dを出す技術の一つです．

WebGLの例は，http://webglsamples.org/ を見るとたくさんあります．

このWebGLは見ていて綺麗ですが，かなりいろいろ考えて作る必要があるので大変です．（ threejs でググってみると面白いかも）

そこで，Grimoire.js です．

Web開発の中にWebGLを簡単に取り入れることができます．

［参考］

ということで，Grimoire.js でプロ生ちゃんを回してみます．

コード

gr.registerComponent('Rotate2d', {
    attributes: {
        speed: {
            default: 1,
            converter: 'Number'
        }
    },
    $mount: function () {
        this.theta = 0;
    },
    $update: function () {
        this.theta += this.getAttribute('speed');
        this.node.setAttribute('rotation', 0 + ',' + 0 + ',' + -this.theta);
    }
});

少しJavaScript を触ったことがある人なら，大体何をしているのかすぐに分かると思います．

Grimoire.jsは，WebGLのフレームワークです．2Dの回転ではなく，3Dの回転も簡単できます！

gr.registerComponent('Rotate3d', {
    attributes: {
        speed: {
            default: 1,
            converter: 'Number'
        }
    },
    $mount: function () {
        this.theta = 0;
    },
    $update: function () {
        this.theta += this.getAttribute('speed');
        this.node.setAttribute('rotation', 25 + ',' + -this.theta + ',' + 0);
    }
});