東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

CreateJSのメモ

●graphics.drawCircle(0,0,100)のかっこの中は(円の中心のx座標、円の中心のy座標)
.x、.yはdrawCircleで決めた円の中心の座標がそれぞれxpx、ypx移動する。
drawCircleの基準点は円の中心


●graphics.drawRect(0,0,200,100)のかっこの中は(短形の左上頂点のx座標、短形の左上頂点のy座標、幅、高さ)
.x,.yはdrawRectで決めた短形の左上頂点を中心に移動


●graphics.drawRoundRect(0,0,100,100,20,20)のかっこの中は(短形の左上頂点のx座標、短形の左上頂点のy座標、幅、高さ、20px・20pxの角丸)
.x,.yはdrawRoundRectで決めた短形の左上頂点を中心に移動


●graphics.drawPolyStar(星の中心のx座標, 星の中心のy座標, 半径, 頂点数, 谷の深さ, 起点角)のかっこの中は(円の中心のx座標、円の中心のy座標)
.x、.yはdrawCircleで決めた円の中心の座標がそれぞれxpx、ypx移動する。
drawCircleの基準点は円の中心

●regX,regYでオブジェクトの基準点を調整できる。bitmapだとデフォルトの基準点は左上。そこから画像の半分の幅と高さにregXとregYを設定してあげれば基準点は画像の真ん中になる

●graphics.moveTo, lineToは自由に頂点を設定して描くことができます。moveTo()メソッドで現在の描画位置を移動し、lineTo()メソッドで現在の描画位置から次の描画位置まで、現在の線のスタイルを使用して線を描画

window.addEventListener("load", init);
  function init(){
	 var obj = new createjs.Shape();
         obj.graphics.beginFill("DarkRed"); // 赤色で描画するように設定
         obj.graphics.moveTo(0, 0); // (0,0)座標から描き始める
         obj.graphics.lineTo(100, 0); // (100,0)座標まで辺を描く
         obj.graphics.lineTo(0, 100); // (0,100)座標まで辺を描く
         obj.graphics.lineTo(0, 0); // (0,0)座標まで辺を描く
         stage.addChild(obj); // 表示リストに追加
  }

f:id:miukro:20160725213626p:plain


●距離と角度から座標を求める。三角関数は単位円における角度θのxy座標を定める。
三角関数は半径1の円(「単位円と呼ぶ」)について、中心角θのxy座標を(cosθ,sinθ)と定める。すると、中心から距離がrで角度θのxy座標は、単純にrを掛け合わせて、(r cosθ, r sinθ)になる。

どういうことかというと、
まずsinθ、cosθ、tanθの求め方というか公式は、

sinθ = y/r
cosθ = x/r
tanθ = y/x

となる。(これはもうこう覚えるしかない。rは円の半径。x,yは座標)

それで単位円(半径=1)では

sinθ = y/1
cosθ = x/1

となるのですなわち

sinθ = y
cosθ = x

ということになる


f:id:miukro:20160722010737p:plain


●角度をラジアンに変換

ラジアンは角度を単位円における弧の長さで表す。つまり2πラジアンは360度。したがって度数は次のようにしてラジアンに換算できる。

ラジアン / 度数 = 2π / 360 = π / 180
ラジアン=度数×π / 180

というか180°=π[rad]!!!!!!(これ大事!!)

例えば、
次の各々の角度を弧度法で示す場合、


①1°の場合
180°= π[rad]であるから

180分の1ということで、1/180を両辺にかける

180 × 1/180 = π × 1/180[rad]

1° = π/180[rad]


②36°の場合
①から、


1° = π/180[rad]であるので、

1°×36 = π/180[rad] × 36

36° = π/5[rad]

この2つの例が下記のようなコードで使われる。


// 角度をラジアンに変換
var radian = angle * Math.PI / 180; //angleはもちろん変数

f:id:miukro:20160722010244p:plain

●アークタンジェント
XY座標から角度を求めるにはtanの逆関数:アークタンジェントを使うのが簡単。角度θは次の式で得られる。

θ=atan(Y/X)



三平方の定理ピタゴラスの定理
2点間の距離を測定するには三平方の定理(ピタゴラスの定理)を使う。三角形の底辺と高さをそれぞれ二乗したものを足し算して、その平方根をとると斜辺の長さになるいう定理
jsでは平方根を求めるためにMath.sqrt()関数を使う
(https://ics.media/tutorial-createjs/math_basic.html)


●DisplayObject.filtersプロパティ
【文法】DisplayObjectオブジェクト.filters
DisplayObjectインスタンスに適用するFilterオブジェクトを納めた配列。フィルタの効果を得るには、インスタンスに対してDisplayObject.cache()あるいはDisplayObject.updateCache()メソッドを呼出さなければならない。また、フィルタはキャッシュに定めた領域の中だけにかかる。

●DisplayObject.cache()メソッド
【文法】DisplayObjectオブジェクト.cache(x, y, width, height, scale)
DisplayObjectインスタンスを新たなCanvasに描き、時系列で続く描画にもそのイメージを用いる。すると、動かない子インスタンスをたくさんもつ親インスタンスや込入ったShapeオブジェクトなど、変化の少ない複雑なコンテンツは素速く描ける。tickイベントのたびにコンテンツを描き直さなくて済むためである。

キャッシュしたDisplayObjectインスタンスは、移動したり回転したり、フェードイン・アウトもできる。しかし、中身が変わったときは、DisplayObject.cache()あるいはDisplayObject.updateCache()メソッドを呼出して描き直さなければならない。キャッシュする領域は、左上角のxy座標および幅と高さで定める。この矩形領域の座標は、参照するDisplayObjectインスタンスにもとづく。

x - キャッシュ領域の左端標値。

y - キャッシュ領域の上端標値。

width - キャッシュ領域の幅。

height - キャッシュ領域の高さ。

scale - キャッシュ領域の拡大・縮小率。


●BlurFilter()コンストラクタ
【文法】BlurFilter(blurX, blurY, quality)
短形領域でぼかすBoxBlurFilterインスタンスをつくる
blurX:ぼかす水平ピクセル
blurY:ぼかす垂直ピクセル
quality:ぼかす品質を示す1から3


【参考URL】
http://xn--w6q13e505b.jp/define/arctan.html
http://www.da-tools.com/AE/basicMath/BasicMath05.html