Phone Story: A Web Standard version in Processing.js

I started the development of a Processing.js porting (from ActionScript) of PhoneStory that is “an educational game about the dark side of your favorite smart phone. Follow your phone’s journey around the world and fight the market forces in a spiral of planned obsolescence”. Molleindustria designed a iPhone version that was banned by the Apple Store so they developed an Android version. Now I’m developing, with the support of Molleindustria, a version suitable for HTML 5 and Javascript enabled browser.

It’s my first experiment with Processing.JS and I’m using the Processing IDE in its 2.0alpha version. I’m pretty surprised of the results and development is flowing smoothly! :-)

Here you can see a proof of concept of Phone Story Web Standard Libre Edition and if you want to see the technologies behind this experiment you can visit Phone Story development documentation and sources.

Everything is GPLed and the resources are Creative Commons BY-NC-SA!

Happy hacking!

Installing Ubuntu 10.04 for Processing and Java Development using Eclipse

How to have a fully multimedia capable and webcam working PC

Our suggestion to have all codecs and multimedia features needed by digital artists, game developers and web content creator in a GNU/Linux environment:

  • Download and Install Ubuntu 10.04 Lucid Lynx
  • Update your installation using the Ubuntu Update Manager
  • Add Medibuntu repository in order to have latest version of multimedia codecs
  • Install ffmpeg and some proprietary codecs with this Terminal command:
    sudo apt-get install ffmpeg libavcodec-extra-52

How to install Java, Eclipse and Processing on Ubuntu 10.04 Lucid Lynx

We will install Java Development Kit using the Ubuntu package system and the rest of tools inside the /opt/ folder in order to have them system wide available. You may put everything in your HOME folder but in this way only your user will be able to access these tools.

If you change the /opt permission to 777 you’ll have it done but it’s the “dirty way”. In order to grant permissions to just a group you have to understand the *nix File System Permission mechanism

  • We will install the OpenJDK using the Terminal:
    sudo apt-get install openjdk-6-jdk
  • Now we download from the Official Processing.org website the latest version for Linux
  • Uncompress Processing .tar.gz file into your /opt/
  • Set execution permission on the processing binary file:
    chmod 755 /opt/processing/processing
  • Now download your favorite version of Eclipse: Processing team suggest to use the Java version
  • Uncompress Eclipse into your /opt/
  • Don’t forget to add a Applications menu entry manually (right click on the Applications menu and “Edit Menus”…) or learn something about xdg-desktop-menu and hack your own .desktop file for future installations!

Advanced Topics and Suggested readings

Problems with my webcam using Processing with Windows

“No Capture could be found or the VDIG is not installed correctly”

You have to install quicktime and a compatible video digitizer. Here are the links to download the last version of quicktime, and the WinVDIG 1.0.1 (recommended). Restart your computer after installation process and the webcam should work.

Recommended links:

http://processing.disenoudd.cl/tips/conectar-mi-webcam-a-processing-en-windows
http://www.eden.net.nz/7/20071008

(Español) Buscamos gente interesada a crear un RPG online “isometrico” GPL multiplataforma

Vamos a retomar en serio el proyecto Isotopia en los próximos días gracias a los avances alcanzados en poquísimo tiempo con Processing.

Clica para ver donde dejamos el proyecto... y olvidarlo!

El proyecto es y serà GPL y Creative Commons: toda la garantía necesaria para poder trabajar juntos sin paranoias!!!

Si estas interesad@ en participar usa este formulario para enviarme tus experiencias y lo que te gustaría aportar.

Processing workshop for free in Madrid: six persons only

We decided to give a free workshop about Processing in Madrid. Please feel in the form for appliance: only six persons will be admitted. Deadline for submissions is 17 of April.

The first workshop will be the 21 of April 2010 in Madrid.

Topics of the workshop:

  • Processing fundamentals: procedural programming, OOP and Java integration
  • Interactivity: mouse, keyboard, video and webcam input
  • Graphics fundamentals: coordinates system, 2D transformation and 3D renderers

More attention will be dedicated to visual arts or video games prototyping according to the skills of participants.

Discovering Processing

A new programming language came into our lives. Its name is Processing and it’s a wonderful example of applied best practices and design patterns. I had the lucky to meet one of its creator Casey Reas and both, the language and the author, were a big surprise!

Processing IDE

So, welcome Processing into our Temporary Supported Software here at Mondonerd!

How to personalize your Status.Net developing your own theme!

From the Status.Net wiki pages:

How to create your own theme

There are several ways to theme StatusNet. You may choose one of the methods below:

  1. If you just want to change the text, link, background, content, sidebar colours, background image:
    • Do this from the Admin->Design settings (recommended!). You could also create a directory and a file structure like the default theme, search and replace with your own values. This is more work, but, you can do this if you plan to make additional minimal changes.
  2. If you want to change the background images and colours:
    1. Create a directory and a file structure like the default theme. Key files are listed at the end of this page.
    2. Have your stylesheet import base/css/display.css and add your own styles below. It is okay to add minimal changes here.
  3. If you want to create a different layout, typography, background images and colours:
    1. Create your own theme directory (like base or default) with stylesheets and images like.
    2. Enable your theme by selecting it from the Admin->Design interface. You can set site’s logo from here as well.

Location of key paths and files

base/css/
base/css/display.css                #layout, typography rules
base/images/                        #common icons, illustrations
base/images/icons/icons-01.png      #main icons file (combined into a single file)

default/css/
default/css/display.css             #imports the base stylesheet for layout and adds background images and colour rules
default/logo.png                    #default site logo for this theme
default/mobilelogo.png              #default logo for the mobile output
default/default-avatar-mini.png     #24x24 default avatar for minilists
default/default-avatar-stream.png   #48x48 default avatar for notice timelines
default/default-avatar-profile.png  #96x96 default avatar for the profile page