Flashでグニグニ曲がるUIを作る方法 - しっぽのブログ

前にtwitterアイコンやpixivの画像をプヨプヨすることのできるpuyopixというコンテンツを作りました。 Puyopix -プヨプヨにするよ- このページの右上にあるブログパーツもこれです。 解説をやると言っておいて、ずっと書いていなかったので書きます。 あんまりコードだらけにしても面白くないし、方法の概念的なものを図を交えながら説明していきます。 画像をプヨプヨする方法の概要と、それをUIに応用する方法です。 プヨプヨの実装 骨組みを作る 格子状バネという、わりと普通の実装をしています。 格子状に並んだ各点をばねのように接続します。 バネはお互いの点の距離が一定になるように、２つの点に逆方向の力をかけます。 フックの法則というのがあって、「F = -kx」とかいう式もありますが、プログラムとしての感覚は「本来あるべき距離の方向へ、ズレた分の○%だけ加速度をつける」って感じになり

[melo1029]

Flashで画像をぐにゃぐにゃする方法

[koki-h]

ぷよぷよする感じのアニメを実現するためのアルゴリズム＆ノウハウ

[nilab]

Flashでグニグニ曲がるUIを作る方法 - しっぽのブログ

[saz_go]

すげえ！

[mattodesign]

ぐにゃぐにゃの作り方

[tarchan]

twitterアイコンやpixivの画像をプヨプヨすることのできるpuyopix

[TOKOROTEN]

単純に、２個先までバネを繋いでしまえば伝達速度は２倍になります。 あー、なるほど。

[o_mega]

UIを曲げる発想はなかった

[valinst]

こういうアルゴリズムなのかとすごい納得。

[Untouchable]

へぇ、面白いねえ

[silverscythe]

あーなるほど！っていうかDotWarと同じ人だったんだ。

[anetchama]

なんだこの気持よさ

[abtky]

時間がある時にゆっくり読む

[ku_marin]

画像がぷにょんぷにょーんってする。まぁ私が作ることはないだろうけども知識として

[o_hiroyuki]

Flashでグニグニ曲がるUIを作る

[kkeisuke]

格子状バネ drawTriangles

[adsty]

画像をプヨプヨする方法の概要とそれをUIに応用する方法。

[arcenemy7334]

Flash

[sw_lucchini]

ぶにゃんってやつの実装方法

[paella]

ばね

[Rewish]

グニグニ

[dtsuka_hb]

テキストフィールドの工夫に感動した

[gikan]

プログラミングの楽しさはこれだなぁと再認識しました。

[hottn]

flash

[yamakaz]

一つ先と結ぶとか２つ作って隠すとか、凄くコロンブスの卵。こういうアイデアが思いついた時の爽快感は半端ないだろうな

[Arison]

なんだ、この癒しツールは。すごいプニプニだ。

[Nao_u]

曲がったUIに不可視の正常なUIを重ねて座標をずらしながら動かすことで、元のコンポーネントの機能を生かしつつ変形

[yowa]

puyopix の解説など。

[tacshiss]

グニグニ曲がる演出のアルゴリズムや工夫。こういう種明かしは面白い。

[bk-zen]

puyopixの実装 ぐにゃぐにゃ曲がるUI