PS3のホーム画面のようなゆったりとした波の動きを表現したかったのですが、少し違った味わいのものに仕上がりました。

デモ（要Flash Player）

以下ソース。

package  
{
	import flash.display.BlendMode;
	import flash.display.Sprite;
	
	public class Main extends Sprite
	{
		private var _wave1:Wave;
		private var _wave2:Wave;
		private var _wave3:Wave;
		
		public function Main() 
		{
			graphics.beginFill(0x000000, 1.00);
			graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			graphics.endFill();
			
			_wave1 = new Wave(80, Math.random(), 0.04, 0x3399cc, 0.50);
			addChild(_wave1);
			
			_wave2 = new Wave(100, Math.random(), 0.06, 0x33ffcc, 0.50);
			addChild(_wave2);
			
			_wave3 = new Wave(120, Math.random(), 0.08, 0x33ccff, 0.50);
			addChild(_wave3);
		}
	}
}

import flash.display.Sprite;
import flash.events.Event;

class Wave extends Sprite
{
	private var _r:Number;     // 波の半径
	private var _rad:Number;   // 波の周期
	private var _speed:Number; // 速度
	private var _color:uint;   // 色
	private var _alpha:Number; // 不透明度
	
	public function Wave(r:Number, rad:Number, speed:Number, color:uint, alpha:Number)
	{
		_r = r;
		_rad = rad;
		_speed = speed;
		_color = color;
		_alpha = alpha;
		
		addEventListener(Event.ENTER_FRAME, _draw);
	}
	
	private function _draw(e:Event):void 
	{
		_rad += _speed;
		
		var w:Number = stage.stageWidth;
		var h:Number = stage.stageHeight;
		var pt1:Number = Math.sin(_rad + Math.PI * 0.00) * _r;
		var pt2:Number = Math.sin(_rad + Math.PI * 0.50) * _r;
		var pt3:Number = Math.sin(_rad + Math.PI * 1.00) * _r;
		var pt4:Number = Math.sin(_rad + Math.PI * 1.50) * _r;
		var pt5:Number = Math.sin(_rad + Math.PI * 2.00) * _r;
		
		var cp1:Number = (pt1 + pt2) / 2;
		var cp2:Number = (pt2 + pt3) / 2;
		var cp3:Number = (pt3 + pt4) / 2;
		var cp4:Number = (pt4 + pt5) / 2;
		
		pt1 /= 2;
		pt2 /= 2;
		pt3 /= 2;
		pt4 /= 2;
		pt5 /= 2;
		
		cp1 += (h / 2);
		cp2 += (h / 2);
		cp3 += (h / 2);
		cp4 += (h / 2);
		
		pt1 += (h / 2);
		pt2 += (h / 2);
		pt3 += (h / 2);
		pt4 += (h / 2);
		pt5 += (h / 2);
			
		graphics.clear();
		graphics.beginFill(_color, _alpha);
		graphics.moveTo(0, pt1);
		graphics.curveTo(w * 1 / 8, cp1, w * 2 / 8, pt2);
		graphics.curveTo(w * 3 / 8, cp2, w * 4 / 8, pt3);
		graphics.curveTo(w * 5 / 8, cp3, w * 6 / 8, pt4);
		graphics.curveTo(w * 7 / 8, cp4, w * 8 / 8, pt5);
		graphics.lineTo(w, h);
		graphics.lineTo(0, h);
		graphics.endFill();
	}
}

_draw()で行っている計算は無茶苦茶です。
調整すればそれなりになりそうな気がするので、いつか本腰入れて手直ししてみようと思います。

Tweet