ktyr report

[twitter]friends visualizer

2010-03-29

追記
※このコンテンツは2010年6月30日のTwitterのBASIC認証廃止と同時に使用不可になります。
TwitterのBASIC認証廃止、企業ユーザーが知っておくべきこと

twitterでフォローしあってる人をクモの巣状に表示していきます。
百聞は一見に如かず。とりあえずtwitterのIDを入力してスタートを押してください。
1人から出てくる人物は5名までに制限しています。

ステージドラッグ：全体移動
サムネドラッグ：サムネ移動
サムネダブルクリック：対象のtwitterページを開く
マウスホイール：ズームインアウト

friends visualizer

さて、次の更新は水曜日です。

[CSS3]interface4 on CSS3

2010-03-24

WindowsXPの下記のブラウザで動作を確認しました。
これら以外のブラウザは正しく動作しない可能性が高いです。
Safari 4.0.4
Google Chrome 4.0.249.89
SRWare Iron 4.0.280

右リング上でマウスホイール：リング回転
右リング以外でマウスホイール：リング前後

interface4 on CSS3

さて、次は何を作ろうか。

[JavaScript]painting on canvas

2010-03-22

マウスで絵を描く→pngで保存。
canvasタグの使い方はこちらが詳しいです。HTML5.jp – Canvas
「みんなの絵を見る」機能無しのflashバージョンはこちら[Flashからjpg]

HTML5.jpによると下記の環境で動きます。IEは論外。
Firefox 2以降
Safari 4以降
Google Chrome 2以降
Opera 9.2以降

キャンバスドラッグ：線を引く
「太」の数字変更：線の太さ変更
カラーパレットクリック：色選択
「保存」クリック：pngで保存
「消去」クリック：キャンバスを真っ白に
「みんなの絵を見る」：みんなの絵一覧
サムネイルクリック：pngオリジナルサイズを別ウィンドウで開く

painting on canvas

さて、次は何を作ろうか。

[JavaScript]rainbow on canvas

2010-03-17

レインボーの線がボールに近づくとボールに引き寄せられます。
garakuta_archiveの3行目1列目のやつのjavascriptバージョンです。

IE以外の大抵のブラウザで動くはず。

ボールドラッグ：ボール移動

rainbow on canvas

さて、次は何を作ろうか。

[CSS3]trickart on CSS3

2010-03-15

[Papervision3D]TrickArtのCSS3バージョンです。
2Dっぽいけど実は3Dだったというものです。
ちょっと重い。

WindowsXPの下記のブラウザで動作を確認しました。
これら以外のブラウザは正しく動作しない可能性が高いです。
Safari 4.0.4
Google Chrome 4.0.249.89
SRWare Iron 4.0.280

画像クリック：カメラ移動

trickart on CSS3

さて、次は何を作ろうか。

[CSS3]skew

2010-03-10

skewプロパティ。
jQueryなどのライブラリを使わず全て自作。

WindowsXPの下記のブラウザで動作を確認しました。
これら以外のブラウザは正しく動作しない可能性が高いです。
Safari 4.0.4
Google Chrome 4.0.249.89
SRWare Iron 4.0.280

ステージでマウスホイール：カメラ上下
円柱上でマウスホイール：円柱回転

skew

CSS3で3Dにする場合
transform-styleの値をpreserve-3dにして、
rotateYを変化させれば立体的に回転してくれます。
しかし、カメラが動くことを想定して、パースを合わせるためにoriginYの値を
3D処理毎に変化させるとこれがまた重い。異常に重い。
こんな感じになる。preserve-3dバージョン
そこで今回は、skewとrotateに同じ値を入れると縦方向にシアーがかかるので
これを利用してパースをつけています。
3D座標から2D座標にプロットするやり方はこちらのエントリーを。