イナヅマTVログ

2014.07.15
11:06
author: taikiken
0件のコメント

【Canvas練習ノート】親子関係(addChild)

オブジェクトの親子関係を作れると作業は楽になります。

Canvas上の描画オブジェクトへDOM element, MovieClipで当たり前に存在する addChild を実装するの巻。

addChildされた子オブジェクトは親オブジェクトから様々な影響を受けます。
位置(x, y)
角度(rotation)
透明度(alpha)
スケール(scale)
何か忘れてないかな…
全て加味された状態で子オブジェクトをレンダリングしないといけません。
続きを読む →

2014.07.14
16:41
author: taikiken
2件のコメント

【Canvas練習ノート】マウス(タッチ)操作 – ドラッグとか

Canvasに描いた形状に対するマウス(MouseEvent, TouchEvent)操作。
DOM elementやFlash MovieClipなら当たり前にできることをCanvasに実装するのはなかなかの面倒くささです。

Canvas上のオブジェクトにマウス(タッチ)操作を実現する方法は2通りありそうです。
1. DOM element, MovieClipのようにオブジェクトそのものにaddEventListenerできるようにする。
2. ある点(Position)にヒットするオブジェクトを描画が最後のものから配列で返す機能を提供する。
*他にもあるでしょうか?ご存知の方はお教え下さい。

1の方が扱いやすいですがプログラムが複雑になりそうだったので2の方法で実装を試みました。
three.jsが同様の方法をとっていたというのもあります。

どちらの方法をとるにせよ描画オブジェクトを一括管理する必要があります。
続きを読む →

2014.07.10
11:00
author: taikiken
0件のコメント

[JavaScript] Memo, IE 8, 7, 6で32bit PNG Fade時の黒いボーダーを回避したい

いまだに IE 6 の面倒をみてる心優しい開発者です。

IE 8, 7, 6で32bit PNGをフェードさせると画像の周りにジャギーって言うのか黒いボーダーができてしまいます。
背景にべた塗り(background-color)を設定すると回避できるけど、
それならワザワザ32bit PNGなんて使わない。

透明の背景色設定できればどうにかなるかと試してみました。
rgbaは使えないけどGoogle先生に伺うとすぐにステキなお答えが…
続きを読む →

2014.07.06
12:00
author: taikiken
0件のコメント

【Canvas練習ノート】星(Star)を描く

canvas上に星を描く練習です。

beginPath, closePath 間に星の頂点に対し lineTo することで星型(Star)が描けます。
頂点移動は三角関数を使えば可能です。
可能ですが、ボンクラ脳ではさっぱりなのでGoogle大先生に助けて頂くことにしました。
便利な世の中です。
続きを読む →

2014.07.05
13:41
author: taikiken
0件のコメント

【Canvas練習ノート】boids + 残像のようなもの – 2(形状変更:円)

@bit101 Keith 大先生の著書を参考にCanvas練習中です。
boids + 残像のようなもの」の描画形状を変更できるようにしました。

今までは描画形状(パス)は簡便化を図るためハードコードしていましたが、それは不便なので変更できるようにしました。
元の設計が悪く後方互換を保つようなアップデートができなかったのは残念です。

色々考えていたつもりでしたが甘かったようです。
続きを読む →

2014.07.04
11:30
author: taikiken
0件のコメント

【Canvas練習ノート】回転と拡大縮小と透明度

@bit101 Keith 大先生の著書を参考にCanvas練習中です。

回転はすでに何とかなってたので、それにスケール(拡大縮小)とアルファ(透明度)の機能を追加しました。
ActionScript(Flash)では用意されている機能を使うだけなのにCanvasでは自力で何とかしないといけないのは中々つらい…

EaseleJSの劣化版をはるか周回遅れになって作ってるのは分かってる、理解を深めるための課程と言い聞かせてる。
おこがましいけど、DisplayObjectを実装するのは、あらためて「大変だな〜」と感じてます。

skinner先生はやっぱ神ですね。

インタラクティブなとこまではたどりつきたいなぁ〜。
後もう少しだけ…
続きを読む →

2014.06.26
23:20
author: taikiken
1件のコメント

【Canvas練習ノート】群れるまたはboidsみたいなの

@bit101 Keith 大先生の著書を参考にCanvas練習中です。

「ActionScript 3.0 アニメーション」(オライリー)2章 操舵行動 をJavaScript+Canvasで試してみました。
この章のキモ Class Vector2D を three.js Vecotr2 を参考にあれこれ悩みながら作成しました。
向き(回転)の実現方法はかなり苦労しました。

EaselJS のように Matrix を使ってみようと試してみたり、諦めたり…

なんか力技感満載だけどなんとか2章 最後の「群行動」までたどり着きました。
続きを読む →

2014.06.23
11:30
author: taikiken
0件のコメント

[JavaScript] ドロネー図練習ノートその1

JavaScript でドロネー図描き書きの練習中。

参考にさせて頂きました。
slideshare: ドロネー三角形分割
hackist.jp: HTML5のCanvasでボロノイ図をかいてみた
wikipedia: ドロネー図

結局githubのコードを写経しました。
https://github.com/ironwallaby/delaunay

やっと最初の一歩、道は険しい…

demo

delaunay