手描きアニメ風？線文字 Ver.1

　上部テキスト入力エリアの文を手描きアニメ風の文字にします。
　この文字は変更可能です。
　ちょっとまわりくどい？方法でフォント→線描の変換をしています。
　テキストフィールド→ビットマップデータ→ドット検出→線描領域決定　って感じ。
　フォントサイズとかテキストフィールドの設定を変えると文字の出方も変化します
　ビットマップをスキャンする際の平方ピクセル域の値でも変わります。
　これはもともと、2×2=4ないし、3×3=9のスキャンパターン毎に作りこんだビットマップを割り当てて
　ごにょごにょしようとしたもののwonderfl用に線描版。折角なのでスプライン曲線にしてみた。
　いまは透過pngってつかえるんだっけ…？＞wonderfl
　※スプライン曲線のコードは[http://l00oo.oo00l.com/blog/archives/category/actionscript]のものを使わさせて頂いてます
　これa*とかの経路探索アルゴリズムを応用して線を描くようにしたらもっと実用的な表現になるとおもうけどどうだろ

lagash

forked:4
favorite:39
lines:156
license : MIT License
modified : 2010-02-17 00:01:50

Embed: Tweet

//　上部テキスト入力エリアの文を手描きアニメ風の文字にします。
//　この文字は変更可能です。

//　ちょっとまわりくどい？方法でフォント→線描の変換をしています。
//　テキストフィールド→ビットマップデータ→ドット検出→線描領域決定　って感じ。

//　フォントサイズとかテキストフィールドの設定を変えると文字の出方も変化します
//　ビットマップをスキャンする際の平方ピクセル域の値でも変わります。

//　これはもともと、2×2=4ないし、3×3=9のスキャンパターン毎に作りこんだビットマップを割り当てて
//　ごにょごにょしようとしたもののwonderfl用に線描版。折角なのでスプライン曲線にしてみた。
//　いまは透過pngってつかえるんだっけ…？＞wonderfl
//　※スプライン曲線のコードは[http://l00oo.oo00l.com/blog/archives/category/actionscript]のものを使わさせて頂いてます

//　これa*とかの経路探索アルゴリズムを応用して線を描くようにしたらもっと実用的な表現になるとおもうけどどうだろ

package{
	
	import flash.display.*;
	import flash.events.*;
	import flash.text.TextField;
	import flash.external.ExternalInterface;
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFieldType;
	
	import flash.net.*;
	import flash.geom.*;
	import flash.filters.*;
	import flash.utils.*;
	
	import flash.text.Font;

import caurina.transitions.Tweener;
	import caurina.transitions.properties.*;
	FilterShortcuts.init();
	ColorShortcuts.init();
	
	public class Main extends Sprite{
		
		var date:Date;
		var input_text:TextField;
		var date_text:TextField;
		var datetext_format:TextFormat;
		var datetext_bitmapdata:BitmapData;
		var display_bitmapdata:BitmapData;
		var clear_bmd:BitmapData;
		
		public function Main() {

var fonts:Array = Font.enumerateFonts(false);
			fonts.forEach(function(item, arr, index) { trace(item.fontName) } );
			
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init() {
			stage.addChild(this);
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			datetext_format = new TextFormat();
			with (datetext_format) {
				color = 0x000000;
				size = 21;
				bold = true;
				kerning = true;
			}
			
			date_text = new TextField();
			with (date_text) {
				autoSize = TextFieldAutoSize.CENTER;
				defaultTextFormat = datetext_format;
                                wordWrap = true;
                                width = 100;
			}

input_text = new TextField();
			var tmp_format = new TextFormat();
			tmp_format.color = 0xffffff;
			with (input_text) {
				border = true;
				borderColor = 0xffffff;
				defaultTextFormat = tmp_format;
				type = TextFieldType.INPUT;
                                x = 10;
                                y = 10;
                                width = 250;
                                height = 20;
                                multiline = false;
                                text = "手描き　アニメ風線文字";
			}
			
			display_bitmapdata = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0x00000000);
			clear_bmd = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0x00000000);

var timer:Timer = new Timer(150,0);
			timer.addEventListener(TimerEvent.TIMER, enterframeHndlr);
			timer.start();
			//addEventListener(Event.ENTER_FRAME, enterframeHndlr);
			
			addChild(new Bitmap(new BitmapData(stage.stageWidth, stage.stageHeight, false, 0x000000), "auto", true));
			addChild(new Bitmap(display_bitmapdata, "auto", true));
			addChild(input_text);
			for (var i = 0; i < cells * cells; i++) zeroStr += "0";
		}

var cells:uint = 3;//←ここ変えると文字の形も変わる(2～5くらい)
		var zeroStr = ""; 
		
		private function enterframeHndlr(e:Event) {
			date = new Date();
			var tmpString = String("00" + date.getHours()).substr( -2, 2) + ":" + String("00" + date.getMinutes()).substr( -2, 2) + ":" + String("00" + date.getSeconds()).substr( -2, 2);// + "." + String("000" + date.getMilliseconds()).substr( -3, 1);
			
			tmpString = input_text.text;
			date_text.text = tmpString;
                        date_text.text=tmpString.substr(0,(int(date.getSeconds())%tmpString.length)+1);
			datetext_bitmapdata = new BitmapData(date_text.textWidth+(date_text.textWidth%cells), date_text.textHeight+(date_text.textHeight%cells), true, 0x00000000);
			datetext_bitmapdata.draw(date_text);

var cell_scaleA = datetext_bitmapdata.width / stage.stageWidth;
			var cell_scaleB = stage.stageWidth / datetext_bitmapdata.width;

display_bitmapdata.copyPixels(clear_bmd,new Rectangle(0,0,clear_bmd.width,clear_bmd.height),new Point(0,0));
			display_bitmapdata.lock();

var tmpVV = new Vector.<Point>();
			var tmpShape:Shape = new Shape();

for (var yy = 0; yy < datetext_bitmapdata.height / cells; yy++) {
			for (var xx = 0; xx < datetext_bitmapdata.width / cells; xx++) {
				var tmpcells = 0;
				for (var j = 0; j < cells; j++) for (var i = 0; i < cells; i++) {
					var addvalue=(datetext_bitmapdata.getPixel32(xx * cells + i, yy * cells + j) > 0x55000000)?1:0;
					tmpcells = tmpcells << 1;
					tmpcells += addvalue;

}
				var tmpV = new Vector.<Point>();
				tmpShape.graphics.clear();
				var drawcell:String = String(zeroStr + tmpcells.toString(2)).substr( -cells*cells, cells*cells);
				for (i = 0; i < cells*cells; i++) {
					if (drawcell.substr(i, 1) == "1") {
						for (j = 0; j < 5-((date_text.text.length<3)?date_text.text.length:3); j++) {
							tmpV.push(new Point(Math.random() * cell_scaleB * 1.5 + (i % cells) * cell_scaleB, Math.random() * cell_scaleB * 1.5 + int(i / cells) * cell_scaleB));
						}
					}
				}
				if (tmpV.length > 0) {
					tmpV = shuffle_new(tmpV);
					drawSpline(tmpV,tmpShape)
				}

display_bitmapdata.draw(tmpShape, new Matrix( 1.1, 0, 0, 1.1, xx * (cells * cell_scaleB * .9), yy * (cells * cell_scaleB * .9)-15) );
			}
			}
			
			
			display_bitmapdata.unlock();

}
		
		public function shuffle_new(v:Vector.<Point>):Vector.<Point> {
			for (var j:int, t:Point, i:int = v.length, a:Vector.<Point> = v.slice(); i; j = Math.random() * i, t = a[--i], a[i] = a[j], a[j] = t);return a;
		}

private function drawSpline(v:Vector.<Point>,g):void{
			if(v.length<2) return;
			v.splice(0,0,v[0]);
			v.push(v[v.length-1]);

var numSegments:uint = 5;//曲線分割数（補完する数）
			for(var i:uint=0; i<v.length-3; i++){
				var p0:Point = v[i];
				var p1:Point = v[i+1];
				var p2:Point = v[i+2];
				var p3:Point = v[i+3];
				splineTo(p0, p1, p2, p3, numSegments,g);
			}
		}

private function splineTo(p0:Point, p1:Point, p2:Point,	p3:Point, numSegments:uint, g):void {
			var d:Date = new Date();
			var col = 0xaaaaaa;//d.getTime();
			g.graphics.lineStyle(.5, col,.5);
			g.graphics.moveTo(p1.x, p1.y);
			for(var i:uint=0; i<numSegments; i++){
				var t:Number = (i+1)/numSegments;
				g.graphics.lineTo(
					catmullRom(p0.x, p1.x, p2.x, p3.x, t),catmullRom(p0.y, p1.y, p2.y, p3.y, t)
				);
			}
		}

private function catmullRom(p0:Number,p1:Number,p2:Number,p3:Number,t:Number):Number{
			var v0:Number = (p2 - p0) * 0.5;
			var v1:Number = (p3 - p1) * 0.5;
			return (2*p1 - 2*p2 + v0 + v1)*t*t*t +
			(-3*p1 + 3*p2 - 2*v0 - v1)*t*t + v0*t + p1;
		}

}
}

class Bugfix {
	function Bugfix(){}
}

Code Fullscreen

Preview Fullscreen