nmLog

Frocessingでマウスを追従する曲線を書く。

FrocessingのF5MovieClip2DBmpとバネ運動で滑らかな曲線を描く。

曲線の描画方法はネットで紹介されているやり方をそのまま使用した。
F5MovieClip2DBmpはEnterFrameごとにBitmapDataを更新しているようだが、曲線と曲線のつなぎ目によく見ると隙間ができてしまうのをなんとかしたい。
マウスダウンでフェードアウトします。

package {
	
	import flash.display.*;
	import flash.filters.*;
	import flash.geom.*;
	
	import frocessing.display.*;
	import frocessing.color.*;
	import frocessing.geom.*;


	public class NMain extends F5MovieClip2DBmp {
		
		//-------------------------------------------------------------------------------- Properties

		private var _this:*;
		private var _stage:Stage;
		
		
		//-------------------------------------------------------------------------------- Constractor
		
		public function NMain() {
			
			_this = this;
			_stage = stage;
			
			_stage.scaleMode = StageScaleMode.NO_SCALE;
			_stage.align = StageAlign.TOP_LEFT;
			
			Init();
		}
		
		
		
		//-------------------------------------------------------------------------------- Function
		 
		/**
		 * initialize
		 */
		public function Init():void {

			size(_stage.stageWidth, _stage.stageHeight);
			
			background(255);
			
			setupaction();
		}
		
		/**
		 * setup
		 */
		private var possx_b:Array; // positions bottom line
		private var possy_b:Array;
		private var possx_u:Array; // positions upper line
		private var possy_u:Array;
		private var colorarr:Array;
	
		private function setupaction():void {			
			
			vx = 0;
			vy = 0;
			currentposx = _stage.stageWidth / 2;
			currentposy = _stage.stageHeight / 2
			
			possx_b = [currentposx, currentposx, currentposx];
			possy_b = [currentposy, currentposy, currentposy];
			possx_u = [currentposx, currentposx, currentposx];
			possy_u = [currentposy, currentposy, currentposy];
				
			var col_1 = new ColorCMY(0, 255, 0);
			var col_2 = new ColorCMY(0, 0, 255);
			colorarr = ColorLerp.gradient(col_1.value, col_2.value, 8);
			
			currentcol = colorarr[0];
			lastcol = currentcol;
		}
		
		/**
		 * draw
		 */
		private var currentposx:Number;
		private var currentposy:Number;
		private var lastposx:Number;
		private var lastposy:Number;
		private var vx:Number;
		private var vy:Number;
		private var linewid:Number = .025;
		private var colcnt:int = 0;
		private var currentcol:uint;
		private var lastcol:uint;
		private var spring:Number = .4;
		private var friction:Number = .85;
		
		public function draw():void {
			
			colcnt ++;
			if(colcnt > colorarr.length - 2) {
				
				colcnt = 0;
				colorarr.reverse();
			}
			
			lastcol = currentcol;
			currentcol = colorarr[colcnt];
			
			
			lastposx = currentposx;
			lastposy = currentposy;
			
			vx += (_this.pmouseX - currentposx) * spring;  
			vx *= friction;  
			currentposx += vx;
			
			vy += (_this.pmouseY - currentposy) * spring;  
			vy *= friction;  
			currentposy += vy;
			
			
			var posx_b:Number = lastposx + vy * linewid;
			var posy_b:Number = lastposy - vx * linewid;
			var posx_u:Number = lastposx - vy * linewid;
			var posy_u:Number = lastposy + vx * linewid;
			
			noStroke();
			
			//fill(tgtcol, 1);

			var mtx:FGradientMatrix = new FGradientMatrix();
			mtx.createLinear(possx_b[1], possy_b[1], possx_b[2], possy_b[2]);
	
			beginShape();
			
			beginGradientFill("linear", [lastcol, currentcol], [1, 1], [0, 255], mtx);
			
			curveVertex(possx_b[0], possy_b[0]);
			curveVertex(possx_b[1], possy_b[1]);
			curveVertex(possx_b[2], possy_b[2]);
			curveVertex(posx_b, posy_b);
			
			vertex(possx_u[2], possy_u[2]);
			curveVertex(posx_u, posy_u);
			curveVertex(possx_u[2], possy_u[2]);
			curveVertex(possx_u[1], possy_u[1]);
			curveVertex(possx_u[0], possy_u[0]);
			
			endShape();
			
			strokeWeight(1);
			stroke(0x000000, .2);
			noFill();
			curve(possx_b[0], possy_b[0], possx_b[1], possy_b[1], possx_b[2], possy_b[2], posx_b, posy_b);
			curve(possx_u[0], possy_u[0], possx_u[1], possy_u[1], possx_u[2], possy_u[2], posx_u, posy_u);
			
			
			possx_b.shift();
			possx_b.push(posx_b);
			possy_b.shift();
			possy_b.push(posy_b);
			possx_u.shift();
			possx_u.push(posx_u);
			possy_u.shift();
			possy_u.push(posy_u);
			
			if(_this.isMousePressed) {
				
				bitmapData.applyFilter(bitmapData, bitmapData.rect, new Point(), new BlurFilter(2, 2, 1)); 
				bitmapData.colorTransform(bitmapData.rect, new ColorTransform(1, 1, 1, .98, 1, 1, 1));
			}
		}

	}
}