Processing.js Graphics in PhoneGap/Cordova – Example for Android

Create simple graphics and animations with Processing.js. You can publish your games and graphics as Android Apps with Cordova.
Cordova (aka PhoneGap) allows you to write Android and IOS apps with HTML5 and Javascript.
Prequisites: Javascript, HTML5, Hello PhoneGap
Step 0: Create and test Hello PhoneGap project
Copy processing-1.4.1.min.js to your projects assets/www/. You might need to refresh (F5) the file pane in Eclipse to see the file.
Add Processing.js code to your assets/www/index.html:

<!DOCTYPE html>
	<title>Hello Processing.js</title>
	<canvas id="tCanvas1"></canvas>
	<p id="tDeviceP">Loading device properties...</p>
	<p>More Cordova / PhoneGap tutorials on</p>
	<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
	<script type="text/javascript" charset="utf-8" src="processing-1.4.1.min.js"></script>
	<script type="text/javascript" charset="utf-8">
		function tDevice() {
			var e = document.getElementById('tDeviceP');
			e.innerHTML = 'If we can see device info, Cordova is working: '' '+device.cordova+' '+' ' + device.platform;
		function sketchProc(processing) {
			processing.draw = function() {
				p.size(300, 300);
				p.background(255, 204, 0);
				p.stroke(0, 0, 0);
				p.line(100, 100, 200, 200);
				p.arc(50, 55, 60, 60, p.PI/2, p.PI);
				p.fill(0, 0, 0);
				p.text("More tutorials on", 50, 240);
				// See
		function onDeviceReady() {
			var tCanvas = document.getElementById("tCanvas1");
			var processingInstance = new Processing(tCanvas, sketchProc);
		// main
		document.addEventListener("deviceready", onDeviceReady, false);


Draw your own graphics. See all commands in Processing.js reference. Practice with Try the page in Firefox and debug with Firebug. Animate. Have fun!

Posted in Uncategorized | Tagged , , , , , , , , , | Comments Off on Processing.js Graphics in PhoneGap/Cordova – Example for Android

Comments are closed.