はじめに
さあ、さて。第一回目のラボは「canvas*1」です。
html5のタグとしてcanvasが加えられ、これによってがしがしビットマップ描画をすることができるようになりました。具体的には、htmlにてcanvas要素を記述し、描画はJavaScriptにて記述します。
たとえば、
<canvas id="canvasTag" width="200" height="200" style="border: 1px black solid"></canvas>
<script>
var canvas = document.getElementById("canvasTag")
var ctx = canvas.getContext('2d');
ctx.fillStyle='rgba(192,40,50, 0.4)'; //色指定RGB+A
ctx.beginPath();
ctx.arc(80,80,60,0,Math.PI*2,true); //座標(80,80),半径(60)
ctx.fill(); //描画実行
</script>
これだけの記述で、こんな感じ（デモ）で色付きの円を描くことができます。
描画部分はJavaScript部分で記述することになりますので、たとえば、こんな感じ（デモ）のも簡単に描けます。
デモ
このcanvasを触って動かして遊んでみました。せっかくなので、お気に入りの絵本をイメージして点というかきれいな円を描いたり動かしてみたい！、と。あるいは、いまから数年前にとある人物たち（自分も含む）によって企画され、いまも深い深い水面下で作り続けられている（はずの）「デンタルフロスくんの涙」という壮大すぎて未完の(違) 物語をイメージしたcanvasアニメーションを習作してみよう！、と。また、落ちてくる「涙」にカーソルをあててクリックして拾ってみてください。スッと何かがあらわれるかと思います*2。
これは何？
- デンタルフロスくんの「涙」はひとつひとつがTwitterのつぶやき
- 情報源は国立国会図書館のカレントアウェアネス(ca_tweetアカウント)
- 「涙」のサイズはそのつぶやきのRTの数に比例して大きくなる
- 色と速度はランダム
- B modeはまだ内緒です
裏側の仕組み
Floating interface
検索でもブラウジングでもない、クリックしないと中身がわからない、うかうかしていると流れていってしまうことから「偶然」を盛り込んだインターフェースになると面白いなあ、と思いながら作りました。あとは見ていて飽きないアニメーションにしたいなあ、と*3。