タグ

JavascriptとCreateJSに関するrizmhateのブックマーク (3)

  • JavaScript開発に役立つ重要なランダムの数式まとめ - ICS MEDIA

    プログラムで使うことの多い「乱数」。ゲーム開発やビジュアルアート、ウェブサイトのアニメーションにおいて乱数は非常に重要で、さまざまな用途で利用されています。プログラムで一般に乱数と聞くと、すべての数値が同じ頻度(分布)で出現する「一様乱数」と呼ばれる乱数をイメージする方が多いと思います。 多くの場合はこの「一様乱数」で取得した乱数を用いれば十分でしょう。しかし、場合によっては「一様乱数」ではなく、偏りのある乱数を用いることでコンテンツの見た目や現象の「自然さ」を演出することが可能です。 実は「一様乱数」に一手間加えることで、乱数の分布の偏りを制御できます。今回は乱数を使用して好みの分布を得るためのパターンをいくつか紹介します。 乱数分布のシミュレーションデモ (HTML5製) 次のデモはリアルタイムで乱数の出現頻度を計算し、グラフに可視化するコンテンツです。画面下のプルダウンで乱数の種類を

    JavaScript開発に役立つ重要なランダムの数式まとめ - ICS MEDIA
  • CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB

    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

    CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB
  • Cacheを使ってアニメーションのフレームレートを改善する ~ CreateJS公式サンプルを使ってみる (第4回)

    Cacheの効果を示すサンプルです。左上にfps(frame per second)と表示されているのが、1秒間に何フレーム描写できたかを示しています。 Cacheを有効にするチェックボックスをチェックすると、動きが滑らかになり、fpsの数字が増えているのが分かると思います。Graphicsのメソッドで作成した丸い画像を毎回メソッドで書き直すのではなく、1度だけ作成して画像イメージとしてCache(メモリ)に入れておくことで、2回目以降の演算が減るため、描写性能が上がります。 Cacheの絶大な効果がよく分かると思います。 次回紹介する予定ですが、Cacheした画像の形状が変わる場合は、cacheUpdate()というAPIを実行する必要があります。 以下にCache.htmlからJavascript部分を抜き出したCache.jsを示します。 var canvas; var stage;

  • 1