プロ生ちゃん回してみた.
この記事は,プロ生ちゃん 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日
そこで,どんな方法で回転させているのか気になってソースを確認してみると,JQueryRotateというものが使われていました.
JQueryRotateは,かなりシンプルに書くことができるようです. 例えば,50msごとに3度回転だと,
var angle = 0; setInterval(function(){ angle+=3; $("#img").rotate(angle); },50);
とてもシンプルで良いですね.
同じ方法でプロ生ちゃんを回転させても良いのですが,面白くないので別の方法を探します.
生のJavaScriptで書いてみた.
html5からcanvas 要素というものが追加されています.
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 - WebGL framework for Web development -
- WebGL - Web API インターフェイス | MDN
- three.js - Javascript 3D library
ということで,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); } });
canvas内の状態は,.goml というファイルで管理しているので,context.drawImage などはする必要ありません.
興味があれば,ソースコードを公開しているのでぜひこちらから試してみてください.
実際に動くもの
https://ipolyomino.github.io/pronama_spinner/
ではでは👋