2008年のめも - あふぉらいと

「 2008年」のめも一覧

Flashで筆圧

2008/12/09 00:00

たまにはプログラマっぽい話題を。
Flashで筆圧とかいう謎技術について。

JavaアプレットだとJTabletとか使ってなんとか筆圧感知できるんですが、
Flashだと現状で筆圧取る手段がないっぽいんです。

そのせいか現状で筆圧使えるお絵かきチャットは
しぃ絵ちゃとかJavaのモノしか無いような感じです。

最近Flashのお絵かきツールが流行ってきてる気配なのに
筆圧が使えないってのはちょっと物足りないかなーって。

しかしJavaで筆圧取れるんなら
それをFlashに渡してやれば筆圧取れるんじゃね？って気づいてですね。

　　※白い枠内にタブレットでなんか描いてみてかだし。

　　※実行にはFlashPlayer9、Java、JTabletが必要だります。

ちょっと試作してみたら筆圧取れた！これでかつる！

とりあえずJavaアプレットで筆圧とれるようにして

FlashからJavaScript経由でJavaアプレットの筆圧読み出し。

実行速度的にちょっと不安ですがなんとかおｋっぽい。

誰かコレ応用して強まったFlashお絵かきツール作らないかなぁ・・・

　　MixiとかPixivとかのツールは微妙すぐる

おまけ / ソースコード

　　※内容とかコンパイル方法とかについては説明まんどくさいのでぐぐれかす

Javaソース / Tablet.java(Tablet.class)

　　※筆圧感知してJavaScriptから値を取れるようにするモノ

　　※コンパイルにはJavaとJTabletのSDKが必要です


import java.applet.*;
import cello.tablet.*;
 
public class Tablet extends java.applet.Applet
{
	private JTablet m_jtablet;
	private boolean m_f_init=false;
 
	public void init()
	{
		try {
			m_jtablet = new JTablet();
			} catch (JTabletException jte) {
			System.err.println(jte.toString());
		}
		m_f_init = true;
	}
 
	public int getPressure() { //現在の筆圧取得するお
		if ( !m_f_init ) return 0;
		try {
			m_jtablet.poll();
			} catch (JTabletException jte) {
			System.err.println(jte.toString());
		}
		return m_jtablet.getPressure();
	}
	public int getPressureMax() { //最大値取得するお
		if ( !m_f_init ) return 0;
		try {
			m_jtablet.poll();
			} catch (JTabletException jte) {
			System.err.println(jte.toString());
		}
		return m_jtablet.getPressureExtent();
	}
}

Flashソース / paint.mxml(paint.swf)

　　※ごく簡単なお絵かき

　　※コンパイルにはFlex3のSDKが必要です

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init();" layout="absolute" frameRate="30">
	<mx:Script>
		<![CDATA[
			import mx.controls.Image;
			import flash.external.ExternalInterface ;
 
			private var m_img:Image;
			private var m_bmpd:BitmapData;
			private var m_bmp:Bitmap;
			private var m_line:Shape;
			private var m_pen_size:Number;
			private var m_pen_alpha:Number;
			private var m_f_mousedown:Boolean;
 
			private function init():void {
				m_pen_size		= 1.0;
				m_pen_alpha	 = 1.0;
				m_f_mousedown	 = false;
 
				m_img = new Image();
				m_img.width	 = 400;
				m_img.height	= 400;
				m_img.x		 = 50;
				m_img.y		 = 50;
				m_canvas.addChild( m_img );
 
				m_bmpd	= new BitmapData(400,400,true,0xffffffff);
				m_bmp	 = new Bitmap(m_bmpd);
				m_img.addChild(m_bmp);
 
				m_line	= new Shape();
				m_img.addChild(m_line);
 
				m_img.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
				m_img.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
				m_img.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
				m_img.addEventListener(MouseEvent.ROLL_OUT, onMouseUp);
			}
 
			private function onMouseDown(evt:MouseEvent):void {
				m_f_mousedown = true;
 
				updatePenState();
				m_line.graphics.clear();
				m_line.graphics.lineStyle(m_pen_size,0,m_pen_alpha,true);
				m_line.graphics.moveTo(m_img.mouseX,m_img.mouseY);
 
			}
			private function onMouseMove(evt:MouseEvent):void {
				if (!m_f_mousedown) return;
 
				updatePenState();
				m_line.graphics.lineStyle(m_pen_size,0,m_pen_alpha,true);
				m_line.graphics.lineTo(m_img.mouseX,m_img.mouseY);
			}
			private function onMouseUp(evt:MouseEvent):void {
				if (!m_f_mousedown) return;
				m_f_mousedown = false;
 
				m_bmpd.draw(m_line);
				m_line.graphics.clear();
			}
 
			private function updatePenState():void {
				// JavaScript経由で筆圧を
				var prs:int	 = parseInt( String( ExternalInterface.call("getPressure") ) );
				var prs_max:int = parseInt( String( ExternalInterface.call("getPressureMax") ) );
 
				m_text.text = "Pressure:"+prs+"/"+prs_max;
 
				if (prs_max==0) return;
 
				m_pen_size	= 20.0*(prs/prs_max);
				m_pen_alpha = prs/prs_max;
			}
 
		]]>
	</mx:Script>
	<mx:Canvas x="0" y="0" width="500" height="500" id="m_canvas" backgroundColor="#cccccc">
	</mx:Canvas>
	<mx:Text x="50" y="450" id="m_text" />
</mx:Application>

HTMLソースの例 / paint.html

　　※上のJavaとFlashを連携させた例

　　※swfobjectとかは自前で用意してかだし

<html>
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
<!--
// JavaAppletから筆圧を
function getPressure() {
	return document.tablet.getPressure();
}
function getPressureMax() {
	return document.tablet.getPressureMax();
}
// -->
</script>
</head>
 
<body>
<applet code="Tablet.class" width=1 height=1 name="tablet"></applet>
<script type="text/javascript">
 var so = new SWFObject("paint.swf", "paint", "500", "500", "9", "#ffffff");
 document.write(so.getSWFHTML());
</script>
</body>
</html>

ぷろぐらむ | Permalink

あいどら的な

2008/07/03 12:22

http://ster.cc/nazo.html

仕事がだるくなってくると謎いものが生産される法則

エディタ的なものも作ってWebサイトとかブログとかに
簡単に貼れるようにできればいいなーとか妄想したりして。

・・・妄想で終わりそうなきも