Works

Away3D 15/10/09: Animating particles simulating fire

gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」 第16回「[炎の照り返しのアニメーションと床の反射を調整する](http://gihyo.jp/design/serial/01/away3d-typescript/0016)」 コード3「[パーティクルの数を増やしたアニメーション](http://gihyo.jp/design/serial/01/away3d-typescript/0016?page=2#sec3_o4)」およびコード1「炎のアニメーションを扱うクラス」を2015年10月9日付ビルドに対応させた。 ___ Drag the mouse in order to pan and tilt the camera in the 3D space. This code is revised for the December 9th 2015 build of the [Away3D TypeScript](http://typescript.away3d.com/).

  • 1084
  • 0

Away3D 15/10/09: Dealing with the mouse interactions for objects and the camera

gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」 第10回「[マウスポインタに応じてカメラを水平および垂直に動かす](http://gihyo.jp/design/serial/01/away3d-typescript/0010)」 コード2「[マウスポインタの画面中央からの座標に応じてカメラを水平および垂直に動かす](http://gihyo.jp/design/serial/01/away3d-typescript/0010?page=2#sec2_p5)」を2015年10月9日付ビルドに対応させた。 ___

  • 685
  • 0

Away3D 15/10/09: Panning and tilting the camera in the 3D space

gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」 第4回「[床の追加とカメラのパン・チルト](http://gihyo.jp/design/serial/01/away3d-typescript/0004)」 コード3「[HoverControllerオブジェクトによるカメラのパンとチルトをマウスドラッグで動かす](http://gihyo.jp/design/serial/01/away3d-typescript/0004?page=3#sec3_o4)」を2015年10月9日付ビルドに対応させた。 ___

  • 772
  • 0

EaselJS 0.8.0: Bursting particles animation with the linked list

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」 第36回「[たくさんのオブジェクトを連結リストで扱う](http://gihyo.jp/design/serial/01/createjs/0036)」 コード2「[連結リストに入れたパーティクルをマウスポインタに追随させて弾けるように動かす](http://gihyo.jp/design/serial/01/createjs/0036?page=2#sec3_o6)」をEaselJS 0.8.0に移行。 ___ The [linked list](http://en.wikipedia.org/wiki/Linked_list) is defined as the simple class named LinkedList in the [HTML] window.

  • 1698
  • 0

EaselJS 0.8.0: Verlet Octagon Draggable

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」 第33回「[弾力のある多角形をドラッグして落とす](http://gihyo.jp/design/serial/01/createjs/0033)」 コード2「[弾力のある八角形をドラッグで放る](http://gihyo.jp/design/serial/01/createjs/0033?page=2#sec3_oa)」 ___ Based on the book, "[AdvancED ActionScript 3.0 Animation](http://www.apress.com/9781430216087)" by Keith Peters, the Verlet structures is used in this code. The VerletPoint and VerletStick classes are defined in the "HTML" section.

  • 7325
  • 5

EaselJS 0.8.0 and Box2D: Falling Balls

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」 第30回「[Box2Dでたくさんのボールを床に落とし続ける](http://gihyo.jp/design/serial/01/createjs/0030)」 コード3「[Box2Dのクラスをひとつのオブジェクトのプロパティに定めた](http://gihyo.jp/design/serial/01/createjs/0030?page=3#sec3_oa)」 ___ Free-falling balls on a floor with the CreateJS and the Box2D physics engine. This is a physics simulation of many rigid bodies in 2D space.

  • 11446
  • 2

EaselJS 0.7.1: Particles

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」第25回「[楕円軌道に残像を描きながら回るパーティクル](http://gihyo.jp/design/serial/01/createjs/0025)」から3回にわたって解説を開始。なお、「[等速円運動を三角関数の微分で表す](http://www.fumiononaka.com/Business/html5/FN1401004.html)」参照。 ___ This code is based on [the experiment of Sebastian DeRossi](https://github.com/sebastianderossi/amusement/blob/master/Particles/README.md) and simplified with a class defined in the HTML section.

  • 13179
  • 11

EaselJS 0.7.1: Smooth Line tuned

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」 第23回「[マウスポインタの軌跡を滑らかな線で描きながら消す](http://gihyo.jp/design/serial/01/createjs/0023)」から2回にわたって解説を開始。なお、「[EaselJS 0.7.1: サンプル『Smooth Line』](http://f-site.org/articles/2014/01/21220000.html)」を参照。 ___ This code is revised version of the "[Smooth Line](http://jsdo.it/FumioNonaka/jzlQ)". Changes of the line thickness is eased and the animation uses requestAnimationFrame as timing mode.

  • 14399
  • 10

EaselJS 0.7.1: Rotating a Cube around the X and Y axes

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」 第22回「[立方体の6面をx軸とy軸で回す](http://gihyo.jp/design/serial/01/createjs/0022)」 コード2「[3次元座標と面および数学計算のクラス定義](http://gihyo.jp/design/serial/01/createjs/0022?page=2#sec3_o9)」および「[マウスポインタの位置に応じて立方体をy軸およびx軸で回す](http://gihyo.jp/design/serial/01/createjs/0022?page=2#sec3_ob)」 ___ This code creates a cube in the three dimensional space and rotates it around the X and Y axes, corresponding to the position of the mouse pointer. The [*Matrix2D.transformPoint()* method](http://www.createjs.com/Docs/EaselJS/classes/Matrix2D.html#method_transformPoint) of the EaselJS 0.7 is utilized to rotate coordinates of the vertices. Three classes, Point3D, Face and MathUtils, are defined in the HTML section.

  • 10101
  • 6

EaselJS 0.7.0: Fireworks - Perspective Projection

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」 第19回「[3次元空間で弾むオブジェクトとz座標による重ね順の並べ替え](http://gihyo.jp/design/serial/01/createjs/0019)」 コード2「[3次元座標空間に100個つくってランダムに落としたオブジェクトをz座標値の順に並べ替えたアニメーション](http://gihyo.jp/design/serial/01/createjs/0019?page=2#sec2_oc)」 ___ Ported from the [ActionScript 3.0 sample](http://www.false.jp/pa/ch15/Fireworks/) by Keith Peters. The method of projection is defined to the ball3D class in the [HTML] section.

  • 7756
  • 4

EaselJS 0.7.0: Rotating coordinates with the Matrix2D.transformPoint() method

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」 第17回「[簡単なクラスを定義する](http://gihyo.jp/design/serial/01/createjs/0017)」 コード2「[冒頭に3次元座標のクラスと透視投影のメソッドを定義したy軸で星形が回るアニメーション](http://gihyo.jp/design/serial/01/createjs/0017?page=2#sec3_o5)」 ___ The new [*Matrix2D.transformPoint()* method](http://www.createjs.com/Docs/EaselJS/classes/Matrix2D.html#method_transformPoint) of EaselJS 0.7.0 transforms xy coordinates of Point objects. This code rotates x and z of 3D coordinates with the method. Then, wireframe's star is being rotated around the y axis.

  • 5532
  • 0

EaselJS 0.7.0: Optimized Sparkling Stars with Fade and Blur

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」 第14回「[オブジェクトの使い回しとアニメーション素材の変更](http://gihyo.jp/design/serial/01/createjs/0014)」 コード2「[マウスポインタの動きに合わせてきらめく星のスプライトアニメーションを落として弾ませる](http://gihyo.jp/design/serial/01/createjs/0014?page=3#sec3_oc)」 ___ Sprite sheet animation with motion blur with the new EaselJS 0.7.0 used.

  • 5593
  • 3

Wiping out blur from a image with AlphaMaskFilter New

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」 第10回「ドラッグの軌跡を滑らかな曲線で描く」 http://gihyo.jp/design/serial/01/createjs/0010 コード1「ドラッグする軌跡でアルファマスクを描く」 _____ Drag over the image to wipe out blur.

  • 6693
  • 0

Node Garden

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」 第7回「粒子同士が引き合う力を直線の濃淡で示す」 http://gihyo.jp/design/serial/01/createjs/0007 コード3「オブジェクト同士の距離に比例して線を薄くした」 _____ Referring a sample in "Foundation Actionscript 3.0 Animation: Making Things Move!" by Keith Peters, and this code is re-written with CreateJS. http://books.google.co.jp/books?id=nzyu5TytMEUC&lpg=PA534&ots=Res_tprzYU&dq=keith%20peters%20node%20garden&hl=ja&pg=PA316#v=onepage&q&f=false

  • 8981
  • 6

Tween Circles

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」 第5回「トゥイーンアニメーションを仕上げる」 http://gihyo.jp/design/serial/01/createjs/0005 コード3「リングがトゥイーンを終えたらイベントリスナーは除く」

  • 5637
  • 2

Skills

  • Photoshop
  • Fireworks
  • Dreamweaver
  • Flash
  • Illustrator
  • jQuery
  • HTML5
  • JavaScript
  • ActionScript

Hot tags

Categories

HTML / CSS / JavaScript