TitaniumのWebViewでProcessing.jsを使ってみる。
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なのはお許しをば。
テキトーに書き換えて実行しましょ。
Categories: プログラミング
| 
Tags: processing, titanium, アプリ, プログラミング
