TitaniumのWebViewでProcessing.jsを使ってみる。

Calendar 1月 30, 2012

タイトルの通りTitaniumのWebView内でprocessing.jsを動かしてみました。
Titanium側からevalJSを使ってprocessingのloopを操作 しています。
それだけですが、思ってたより全然簡単で驚きました。簡単なリズムゲームとか作ったら楽しそう。
webViewでやった方が簡単だから…的記事時々見かけるのなんでかなんとなくわかった気がする。

processingに慣れてないなら普通にjavascriptでやった方がいい気もします。僕は慣れてない方の人です。おいおい！って。

雑なコードは以下。

app.js

Ti.UI.setBackgroundColor('#000');
var tt = {}
tt.ui = {};
tt.ui.createProcessingView = function() {
	var win = Ti.UI.createWindow();
	var web = Ti.UI.createWebView({top:0,right:0,bottom:0,left:0});
	web.url = '/src/processing.html';
	win.add(web);

	var controller = Ti.UI.createView({
		bottom: 0,
		width: Ti.Platform.displayCaps.platformWidth,
		height: 50,
		layout: "horizontal"
	});
	var labelSetting = {
		width: controller.width/2,
		textAlign: "center",
		backgroundColor: "#FFF",
		font: {fontSize:16, fontWeight:'bold', fontFamily:'Helvetica'},
		height: controller.height,
		text: "start"
	};
	var startLabel = Ti.UI.createLabel(labelSetting);
	startLabel.text = "start";
	controller.add(startLabel);
	var stopLabel = Ti.UI.createLabel(labelSetting);
	stopLabel.text = "stop";
	controller.add(stopLabel);
	win.add(controller);

	startLabel.addEventListener("click", function() {
		web.evalJS("startSketch()");
	});
	stopLabel.addEventListener("click", function() {
		web.evalJS("stopSketch()");
	});

	return win;
}

var wwin = tt.ui.createProcessingView();
wwin.open();

processing.html

<!DOCTYPE html>
<html>
<head>
	<title>Hello Web</title>
 	<script src="processing-1.3.6.min.js"></script>
 	<style>
 		* { margin:0; padding:0; }
		html, body { width:100%; height:100%; }
		canvas { display:block; }
 	</style>
</head>
<body>
<canvas id="sketch"></canvas>
<script type="application/javascript">
	function sketchProc(processing) {
		var Ps = processing;
		var width = window.innerWidth;
		var height = window.innerHeight;
		Ps.setup = function(){
			Ps.size(width, height);
			Ps.smooth();
		};
		Ps.draw = function() {
			Ps.background(100);
			Ps.fill(200);
			Ps.noStroke();
			for(var i=0; i<100; i++){
				var c = Ps.random(10, 15);
				Ps.ellipse(Ps.random(width), Ps.random(height), c, c);
			}
		};
	}

	var canvas = document.getElementById("sketch");
	var processingInstance = new Processing(canvas, sketchProc);

	function startSketch() {
		processingInstance.loop();
	}

	function stopSketch() {
		processingInstance.noLoop();
	}
</script>
</body>
</html>

目が悪くなりそうなcanvasなのはお許しをば。
テキトーに書き換えて実行しましょ。 

Category Categories: プログラミング  |  Tag Tags: , , ,

safariでWebGLを有効にするのはまだ面倒。2012/01

Calendar 1月 28, 2012

面倒っていうほどじゃないんだけど。

processing.jsで3dを描く、ちょっとだけ。 | 脱兎.dat

先日、WebGL使った記事書いてみたんだけど、対応してないブラウザに配慮が足りてなかった。

そもそもcanvasタグに対応してないブラウザのためにcanvasタグを飾ってメッセージを入れてあげなきゃなんない。
以下の記事が参考になる。

HTML5 Canvas & Processing JS
http://joeycadle.com/blog/article/1/2012/22/01/html5-canvas-and-processing-js#comments 

Chromeに誘導しちゃうのね。

それでもなんなのこの記事わけわかんない！って言われたから
うちのSafari見てみたらcanvasタグが空き地になってた。
canvasタグには対応しているけどWebGLが有効になってないの原因?

safariでWebGLを有効にする方法。(2012/01現在)

1.メニュー「環境設定 > 詳細」より「メニューバーに”開発”メニューを表示」をオンに。
2.メニュー「開発」より「WebGLを有効にする」をオンに。

以上。
いちいち、有効にしてくださいね。ってcanvas外に書くのもcoolじゃないし
設定取得する方法とかないのかな。ま、早めにデフォルト有効になることを願ってます。

Category Categories: インターネット  |  Tag Tags: , ,

processing.jsで3dを描く、ちょっとだけ。

Calendar 1月 21, 2012

ちょっと確認したいことあって書いてみたのだけど、当初の目的には使えなそう。残念。

chromeでしか確認してませんぜ。


Please upgrade your browser to something newer, like Google Chrome

ソースは以下。

<script type="text/javascript" src="processing-1.3.6.min.js"></script>
<script type="text/processing" data-processing-target="pjs">
void setup() {
	size(540, 200, OPENGL);
	frameRate(50);
	noStroke();
	fill(153, 0, 0);
	smooth();
}
void draw() {
	background(0);
	ambientLight(63, 31, 31);
	lights();
	for(int i = 1; i < 5;  i++){
		pushMatrix();
		translate(i * width/5, height/2, 0);
		rotateX(mouseX * 0.05);
		rotateY(mouseY * 0.05);
		box(45);
		popMatrix();
	}
}
</script>
<canvas id="pjs"></canvas>

今年はprocessingもちゃんと使ってみよう。

Category Categories: プログラミング  |  Tag Tags: ,