ここでは三角関数を使った様々な計算の手法を学んでいきましょう。三角関数はあらゆる実装の基本となるため、この解説をおさえて応用のための基礎知識をつけておきましょう。 マウスの方向を向かせる 画面上の矢印を、常にマウスを向くように実装してみましょう。 サンプルを再生する サンプルのソースコードを確認する これ実現している主なコードは次の部分です。tickイベントの処理でマウスの方向を向くようにrotationプロパティーを変化させています。 // 時間経過 createjs.Ticker.addEventListener("tick", handleTick); function handleTick() { // マウス座標との差分を計算 var dx = stage.mouseX - arrow.x; var dy = stage.mouseY - arrow.y; // 差分を元に方向を

CreateJS勉強会 (第6回)でのライトニングトーク「意地でもCreateJSでWebGLを使ってみよう」（発表者：川勝）の発表内容を記事としてまとめました。CreateJSのWebGL機能は高いパフォーマンスが得られるものの、表現の制約があります。本記事ではCreateJSのWebGL機能を拡張することで、その制約を超えて望みの表現を実現する方法を紹介します。 CreateJSではWebGLレンダリングに対応 CreateJSの中で、描画機能を提供しているEaselJSはWebGLでのレンダリングに対応しています。WebGLではレンダリングにGPUを使用できるため、高速に描画が可能です。CreateJSではWebGLを使用すると、従来のContext2D形式に比べて環境によっては最大51倍もの高速化が見込めます（参照「WebGL Support in EaselJS - Create

先々週の金曜日、第6回 CreateJS勉強会に行ってきました。もともと一般の参加者として登録していたのですが、定員40名のところに参加希望者が80名以上と、もったいないオバケもびっくりな状況になっていたので、主催の野中さんと調整し、私もオフィスとして入居しているコワーキングスペースICTCOでの開催に協力することになりました。 LT会の始めにLT3連発として、ICSの鹿野さん、蔵下さん、川勝さんの発表がありました。それぞれ、CreateJSを触りはじめてちょっと経つと沸いてくる疑問や問題に応えるような内容になっており、とても有意義なものでした。 個人的に、mp3で完全にスムーズな音声ループをさせる方法（mp3はどうしてもループ時にギャップができてしまう）を知りたかったのですが、CreateJS側ではそれを回避する手段はなさそうでした。今のところ、BGMをループさせるタイミングで一度無音の

2015年に開催したCreateJS勉強会（第6回）でのライトニングトーク「オーディオスプライトを使った音声ファイルの最適化」の発表内容を記事としてまとめました。音声を扱ったHTML5コンテンツにおけるCreateJSの最新機能「オーディオスプライト」の必要性と使い方を本記事で紹介します。 ウェブページではファイルの読み込み数を減らすことが必要 ウェブページを見る時や作る時、そのページでどのくらいのファイルがダウンロードされているかを気にしていますか？　CSS・JavaScript・画像・音声ファイル等、ウェブページでは必要なファイルが多くなりがちです。ファイル数が多いとファイルをダウンロードする時間が増え、その分だけページの表示速度が遅くなります。ページの表示速度が遅くなると、その分だけユーザーの離脱率が上がります。 Amazonはページの反応が0.1秒遅くなると、売り上げが1%ダウンす

HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください）について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。 デモ 今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript