POPSブログ

サインカーブによるRGBカラーの循環変化

101

  Category:  as32012/05/03 pops 

wonderfl記事「サインカーブによるRGBカラーの循環変化」拠り引用して改造してみました。


サインカーブによるRGBカラーの循環変化

大変キレイな図形の色変化です。図形の角数を変えたり幅を変えたりできるように改造してみました。
中に文字などを配置しても使用できるような気がします。また色々と「いじくる」と面白い形に変化します。


【参考.引用】wonderfl記事: サインカーブによるRGBカラーの循環変化
上記リンクの記事のスクリプトを改造したものです。動きなどは同じですが、形が違っています。図形の角数などかえられます。色々な応用があるかもしれませんが、ちと難しい。



面白い形に変化した「デモ」はこちらのDEMOページをご覧ください。
【DEMO-001】: サインカーブによるRGBカラーの循環変化2


AS3

FlashTest292.as


//サインカーブによる RGB カラーの循環変化
//波の高さを変更できるように改造
//FlashTest292
//http://wonderfl.net/c/gZuX

package  {
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.filters.BitmapFilterQuality;
	import flash.filters.BlurFilter;
	import flash.geom.ColorTransform;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	
	[SWF(width = "465", height = "465", frameRate = "30", backgroundColor = "#000000")]
	
/**
 * サインカーブによる RGB カラーの循環変化
 * 座標とスケールもあるよ
 * 67WS の GEEKs in OSAKA イベントレポートの城戸さんのセッションムービーを見てショックを受けました
 * @author Aquioux
 */

	public class FlashTest292 extends Sprite {

		//星型の分割数 1=円 2=長円 3-12分割 奇数値でも可能
		//12分割以上はあまり効果が無いようだ
		private const SPLITS:uint = 5;//5 6
		//DOT数 分割数X20位 条件によりかえます
		private const NUM_OF_DOT:uint = 120;//120-240前後
		//波中間までの半径 実際にはこれより大きくなる 振幅拠り小さくは出来ません
		private const RADIUS:uint = 150;//50-180
		//波の高さ(振幅)の半径 実際にはこれより大きくなる
		private const RADIUS2:uint = 30;//15-50
		//実際には大きくなる、5分割 150 30 設定で 465x465 に収まる大きさになる
		//回転方向 1=左回転 -1=右回転 0は停止します、 1 以上の場合は回転が速くなりますが、表示じょうたいが若干異なります
		private var rotation_Chg:Number = 1;
		//Math.PI*2=360度に配置する
		private const RADIAN:Number = Math.PI * 2 / NUM_OF_DOT;
		//描画中心点
		private var CX:Number = stage.stageWidth / 2;
		private var CY:Number = stage.stageHeight / 2;

		private var dots:Array = [];
		private var radian1:Number = 0;
		private var radian2:Number = 0;

		//180度の分割 3なら6分割になる180
		private const ADD:Number = Math.PI / 180 * 360 / NUM_OF_DOT;// degree 1度分の radian 値

		private var dotCanvas:Sprite;
		private var drawCanvas:BitmapData;
		private var viewCanvas:BitmapData;

		private const FADE:ColorTransform = new ColorTransform(1, 1, 1, 0.97, 0, 0, 0, 0);
		private const BLUR:BlurFilter = new BlurFilter(2, 2, BitmapFilterQuality.LOW);
		private const RECT:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
		private const ZERO_POINT:Point = new Point();

		private var flg:Boolean;


		public function FlashTest292() {
	
			setup();
			addEventListener(Event.ENTER_FRAME, loop);
			stage.addEventListener(MouseEvent.CLICK, clickHandler);
		}

		private function setup():void {
	
			dotCanvas = new Sprite();
			drawCanvas = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0x000000);
			viewCanvas = drawCanvas.clone();
			addChild(new Bitmap(viewCanvas));

			for (var i:int = 0; i < NUM_OF_DOT; i++) {

				var dot:Dot = new Dot();
				var p:Point = Point.polar(RADIUS, RADIAN * i);
				dot.x = p.x + CX;
				dot.y = p.y + CY;
				dot.radian = RADIAN * i + Math.PI / 2;//2
				dotCanvas.addChild(dot);
				dot.update();
				dots[i] = dot;
			}
		}

		private function loop(e:Event):void {
	
			radian2 = 0;
			for (var i:int = 0; i < NUM_OF_DOT; i++) {
				var dot:Dot = dots[i];
				//収束振動 (山の高さ + 半径の倍率) 半径の倍率1.2以下で小さいドットが消える
				var offset:Number = (Math.sin(radian1 + radian2) + 1.5);//1-1.5
				//見た目の問題で少し修正しているので、大きめになる
				var p:Point = Point.polar(RADIUS2 * offset + RADIUS, RADIAN * i);
				dot.x = p.x + CX;
				dot.y = p.y + CY
				dot.scaleX = dot.scaleY = offset * 1.2;//1.2-1.5 DOTの拡大率
				dot.update();
				radian2 += ADD * SPLITS;//分割数を適用
			}
			//マイナスの値は逆転します rotation_Chg回転フラグ
			radian1 += ADD * rotation_Chg;

			drawCanvas.draw(dotCanvas);
			viewCanvas.draw(drawCanvas);
	
			if (flg) {
				drawCanvas.applyFilter(drawCanvas, RECT, ZERO_POINT, BLUR);
			} else {
				drawCanvas.colorTransform(RECT, FADE);
			}
		}

		private function clickHandler(e:MouseEvent):void {
			flg = !flg;
		}
	}
}

import flash.display.Graphics;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.ColorTransform;
/**
 * Dot
 * @author Aquioux(Yoshida, Akio)
 */
class Dot extends Sprite {

	public function set radian(value:Number):void { _radian = value; }
	private var _radian:Number = Math.PI / 2;

	private const ADD:Number = Math.PI / 180;// degree 1度分の radian 値
	private const OFFSET1:Number = Math.PI / 2;// 90度
	private const OFFSET2:Number = Math.PI;// 180度

	public function Dot():void {
		var g:Graphics = graphics;
		g.beginFill(0xFFFFFF);
		g.drawCircle(0, 0, 1);
		g.endFill();
	}

	public function update():void {
		_radian += ADD;
		var valR:Number = (Math.sin(_radian) + 1) / 2;
		var valG:Number = (Math.sin(_radian + OFFSET1) + 1) / 2;
		var valB:Number = (Math.sin(_radian + OFFSET2) + 1) / 2;
		var ct:ColorTransform = new ColorTransform(valR, valG, valB);
		//全て白
		//var ct:ColorTransform = new ColorTransform(1, 1, 1);
		transform.colorTransform = ct;
	}
}

【DEMO-001】: サインカーブによるRGBカラーの循環変化2


以上です。



[ この記事のURL ]


タグ:flash , ActionScript , as3

 

ブログ記事一覧

年別アーカイブ一覧



[1]