画像を貼ってみた＞ [Prototyping] バネ機構（頂点-Ground間のみ接合）
フルスクリーン再生のビロビロ具合も是非お楽しみください。
*
* 最近流行りのdrawTrianglesで画像を貼り付けたら面白いんじゃないかな？と貼り付けてみた。
* けど、そんなに面白くなかった。
* シンプルなワイヤーフレームだけの方が面白いです。
* [d]押したらワイヤーフレーム付きになります。
*
/**
* Copyright fumix ( http://wonderfl.net/user/fumix )
* MIT License ( http://www.opensource.org/licenses/mit-license.php )
* Downloaded from: http://wonderfl.net/c/r8Qt
*/
// forked from alumican_net's [Prototyping] バネ機構（頂点-Ground間のみ接合）
/**
* フルスクリーン再生のビロビロ具合も是非お楽しみください。
*
* 最近流行りのdrawTrianglesで画像を貼り付けたら面白いんじゃないかな？と貼り付けてみた。
* けど、そんなに面白くなかった。
* シンプルなワイヤーフレームだけの方が面白いです。
* [d]押したらワイヤーフレーム付きになります。
*
*/
package {
import flash.events.KeyboardEvent;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Graphics;
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.StageQuality;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.system.LoaderContext;
import flash.system.Security;
//import com.flashdynamix.utils.SWFProfiler;
[SWF(width = 465, height = 465, backgroundColor = 0x0, frameRate = 60)]
public class Main extends Sprite {
//----------------------------------------
//CLASS CONSTANTS
private const W : uint = 465;
private const H : uint = 465;
private const DIVIDE_X : uint = 20;
private const DIVIDE_Y : uint = 20;
private const SPRING : Number = 0.3;
private const FRICTION : Number = 0.9;
private const IMAGE_URL : String = "http://assets.wonderfl.net/images/related_images/9/9e/9eba/9eba844b4256a2d613f905f98cce2e1971230321";
//----------------------------------------
//VARIABLES
//nodes[idy][idx]
private var _nodes : Vector.<Vector.<Node>>;
//head node of linked list
private var _first : Node;
//drawing canvas
private var _canvas : Sprite;
//background
private var _background : BitmapData;
private var _isOnStage : Boolean;
private var loader : Loader;
private var _flg:Boolean = false;
private var _uvtData : Vector.<Number>;
private var _indices : Vector.<int>;
//----------------------------------------
//METHODS
public function Main() : void {
//Wonderfl.disable_capture();
//Wonderfl.capture_delay(10);
Security.allowDomain("www.planet-ape.net");
Security.allowDomain("wonderfl.net");
Security.allowDomain("swf.wonderfl.net");
addEventListener(Event.ADDED_TO_STAGE, _initialize);
}
/**
* entry point
*/
private function _initialize(e : Event) : void {
removeEventListener(Event.ADDED_TO_STAGE, _initialize);
//SWFProfiler.init(this);
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.quality = StageQuality.LOW;
var i : uint, j : uint, node : Node, old : Node;
var nx : uint = DIVIDE_X + 1;
var ny : uint = DIVIDE_Y + 1;
var ox : Number;
var oy : Number;
_isOnStage = false;
//背景カラー
_background = new BitmapData(W, H, false, 0x0);
addChild(new Bitmap(_background));
//ドロー用
_canvas = addChild(new Sprite()) as Sprite;
//drawTriangles用
_uvtData = new Vector.<Number>();
_indices = new Vector.<int>();
//ネットワーク生成
_nodes = new Vector.<Vector.<Node>>(ny);
for (i = 0;i < ny; ++i) {
_nodes[i] = new Vector.<Node>(ny);
for (j = 0;j < ny; ++j) {
_nodes[i][j] = node = new Node();
node.ox = node.x = j * W / DIVIDE_X;
node.oy = node.y = i * H / DIVIDE_Y;
ox = node.ox / W;
oy = node.oy / H;
_uvtData.push(ox);
_uvtData.push(oy);
}
}
for (i = 0;i < DIVIDE_Y; i++) {
for (j = 0;j < DIVIDE_X; j++) {
_indices.push(i * (DIVIDE_Y+1) + j, i * (DIVIDE_Y+1) + j + 1, (i + 1) * (DIVIDE_Y+1) + j);
_indices.push(i * (DIVIDE_Y+1) + j + 1, (i + 1) * (DIVIDE_Y+1) + 1 + j, (i + 1) * (DIVIDE_Y+1) + j);
}
}
var bounds : Vector.<Boolean> = new Vector.<Boolean>(4);
//コネクション生成
for (i = 0;i < ny; ++i) {
for (j = 0;j < nx; ++j) {
node = _nodes[i][j];
//隣接ノード
bounds[0] = (i == 0 ) ? true : false;
bounds[1] = (j == nx - 1) ? true : false;
bounds[2] = (i == ny - 1) ? true : false;
bounds[3] = (j == 0 ) ? true : false;
node.nn[0] = (bounds[0] ) ? null : _nodes[i - 1][j ]; //top - center
node.nn[1] = (bounds[0] || bounds[1]) ? null : _nodes[i - 1][j + 1]; //top - right
node.nn[2] = (bounds[1] ) ? null : _nodes[i ][j + 1]; //middle - right
node.nn[3] = (bounds[1] || bounds[2]) ? null : _nodes[i + 1][j + 1]; //bottom - right
node.nn[4] = (bounds[2] ) ? null : _nodes[i + 1][j ]; //bottom - center
node.nn[5] = (bounds[2] || bounds[3]) ? null : _nodes[i + 1][j - 1]; //bottom - left
node.nn[6] = (bounds[3] ) ? null : _nodes[i ][j - 1]; //middle - left
node.nn[7] = (bounds[3] || bounds[0]) ? null : _nodes[i - 1][j - 1]; //top - left
//リンクリスト
if (_first == null) {
old = _first = node;
} else {
old.next = node;
old = node;
}
}
}
// 画像読み込み
var context : LoaderContext = new LoaderContext(true);
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, compHandler);
loader.load(new URLRequest(IMAGE_URL), context);
}
/**
* 画像読み込み完了
*/
private function compHandler(event : Event) : void {
addEventListener(Event.ENTER_FRAME, _updateHandler);
stage.addEventListener(MouseEvent.MOUSE_OVER, _stageMouseOverHandler);
stage.addEventListener(Event.MOUSE_LEAVE, _stageMouseLeaveHandler);
stage.addEventListener(KeyboardEvent.KEY_DOWN, _stageKeybordHandler);
}
private function _stageKeybordHandler(event : KeyboardEvent) : void {
if (event.keyCode == 68){ // D
trace("changeDisplay");
_flg = !_flg;
}
}
/**
* アップデート
*/
private function _updateHandler(e : Event) : void {
_interaction();
//_draw();
_drawPicture();
}
/**
* マウスインタラクションの反映
*/
private function _interaction() : void {
var tx : Number, ty : Number, dx : Number, dy : Number, dist : Number,
spring : Number = SPRING,
friction : Number = FRICTION,
node : Node = _first;
do {
if (_isOnStage) {
dx = node.ox - mouseX;
dy = node.oy - mouseY;
dist = Math.sqrt(dx * dx + dy * dy) + 1;
tx = node.ox + dx / dist * 100;
ty = node.oy + dy / dist * 100;
} else {
tx = node.ox;
ty = node.oy;
}
node.vx += (tx - node.x) * spring;
node.vy += (ty - node.y) * spring;
node.x += node.vx *= friction;
node.y += node.vy *= friction;
}
while (node = node.next);
}
/**
* 描画
*/
private function _draw() : void {
var n1 : Node, n2 : Node, n3 : Node, n4 : Node,
px : Number, py : Number,
g : Graphics = _canvas.graphics;
g.clear();
g.lineStyle(1, 0xffffff);
var node : Node = _first;
do {
px = node.x;
py = node.y;
if ((n1 = node.nn[1])) {
g.moveTo(px, py);
g.lineTo(n1.x, n1.y);
}
if ((n2 = node.nn[2])) {
g.moveTo(px, py);
g.lineTo(n2.x, n2.y);
}
if ((n3 = node.nn[3])) {
g.moveTo(px, py);
g.lineTo(n3.x, n3.y);
}
if ((n4 = node.nn[4])) {
g.moveTo(px, py);
g.lineTo(n4.x, n4.y);
}
}
while (node = node.next);
}
/**
* drawTriangles でテクスチャを貼り付けるメソッド
* 参考： http://wonderfl.net/code/e7e1e28a9f20d73f11f0bb02d3e4b5f512c7cc0f
*/
private function _drawPicture() : void {
var px : Number, py : Number,
g : Graphics = _canvas.graphics;
var vertices : Vector.<Number> = new Vector.<Number>();
g.clear();
if(_flg) g.lineStyle(1,0xFFFFFF);
var node : Node = _first;
do {
px = node.x;
py = node.y;
vertices[vertices.length] = px;
vertices[vertices.length] = py;
}
while (node = node.next);
g.beginBitmapFill(Bitmap(loader.content).bitmapData,null,false,false);
g.drawTriangles(vertices, _indices, _uvtData);
g.endFill();
}
/**
* マウスがステージ内へ入ったとき
*/
private function _stageMouseOverHandler(e : MouseEvent) : void {
_isOnStage = true;
}
/**
* マウスがステージ外へ出たとき
*/
private function _stageMouseLeaveHandler(e : Event) : void {
_isOnStage = false;
}
}
}
internal class Node {
//----------------------------------------
//VARIABLES
public var vx : Number;
public var vy : Number;
public var x : Number;
public var y : Number;
public var ox : Number;
public var oy : Number;
public var nn : Vector.<Node>;
public var next : Node;
//----------------------------------------
//METHODS
public function Node() : void {
vx = vy = x = y = ox = oy = 0;
nn = new Vector.<Node>(8);
}
}