Processing 2.0 + Firefox OS Tutorial

Using Processing 2.0 (beta or now official release) Processing.js is included so we are able to write processing code and conveniently run it in a web browser. So I thought, what about writing Firefox OS apps using Processing.js?

So firstly in Processing lets create a simple sketch which draws a random shape (circle or square) at a random position with a random size.

image

Using Javascript Mode, this can then be easily ran and tested in a browser by pressing the run button.

image

Now lets create a Firefox OS app. All Firefox apps can be tested in a simulator (which can be downloaded here) in the Firefox web browser. After installation, go to Tools -> Web Developer -> Firefox OS Simulator and you should be greeted with the following screen

image

Toggle ‘stopped’ to run the simulator and have a play. Once you’re ready, export our Processing.js app from Processing using the ‘export’ button. This will create a web-export folder inside your sketch folder. Personally I copy the contents (index.html, processing.js, processingjstest.pde) to a folder inside /Developer/FirefoxOS but it doesn’t matter where you store the files, as long as you know where!

Next we need to create the manifest.webapp file

{
  "name": "Processing js Test",
  "description": "Processing js Test",
  "launch_path": "index.html",
  "developer": {
    "name": "ma101jl",
    "url": "https://ma101jl.tumblr.com"
  },
  "icons": {
    "128": "/style/icons/pjs2.png",
    "64": "/style/icons/pjs.png"
  },
  "orientation": "portrait-primary"
}

which tells Firefox OS how to install the application. Save this file to the same folder as index.html etc. and add some icons if you like to styles/icons. This can then be installed by clicking ‘Add Directory’ and locating the manifest.webapp file. This should then automatically run on the device simulator

image

Wow, wasn’t that easy?! Lastly, lets change the sketch’s size such that it fills the entire window. Firstly add size(0.95*screen.width, 0.925*screen.height) to setup() of processingjstest.pde. Next, index.html contains a lot of code which is overkill for this simple example, thus change it to

image

and then the app will be ‘fullscreen’

image

This is an ugly hack, and is included here on what not to do (open index.html in a web browser and you’ll see that it isn’t sized correctly). Never fear, the correct method using jQuery will be discussed in a future tutorial! For the mean time, the final source code may be found here.

  1. proce5o reblogged this from ma101jl
  2. techinsp reblogged this from fyprocessing
  3. zabotage reblogged this from fyprocessing
  4. fyprocessing reblogged this from ma101jl
  5. ma101jl posted this

James Leahy is a London based Irish Artist and Composer. This blog acts as a journal documenting his MFA in Computational Studio Arts at Goldsmiths, University of London.

view archive



How To Navigate This Blog

Exhibition

Self Evaluation

Technical Studio Report

Critical Essay