Another year of iPhone/iPad development but there haven’t been many apps that have caught our eye as there have been in the past. Nevertheless few that stood above the rest, both in their conception and how they make us think about technology. As an increasing number of apps saturate the AppStore, now in their 100s of thousands, we’d like to remain optimistic that this platform will continue to grow and not just by large development studios and those that reiterate but rather as an exciting, creative and above all – “innovative” place to push ideas to.

10. Composite [iPad, openFrameworks]

Inspired by the neo-dadaist collages of Robert Rauschenberg, James Alliban’s Composite allows you to remix your surroundings to create graphic compositions. Users can paint pictures using live video stream by simply pointing their iPad towards your subject drawing over it. Pixels are captured and transfered onto canvas. A different way of looking at painting.

–

9. Photo/Nykto [iPad, openFrameworks, Games]

Photo/Nykto is an experimental game conceived by Annelore Schneider and Douglas Edric Stanley as part of the “Unterplay” project at the Master Media Design —HEAD, Genève. Edric describes at as a game for nyktophobes and photophobes. It is played by switching on and off the lights in order to avoid reaching the edge of the screen. Photo/Nykto is one of the few apps that explores interaction with the device beyond the device itself. We like to think of it as “spatial interface” one that allows iPad to become an aggregator of physical activity.

Soon in the AppStore

–

8. Planetary [Cinder, iPad]

Created by the collective consisting of Ben Cerveny, Tom Carden, Jesper Sparre Andersen and Robert Hodgin, Planetary by Bloom is a way to explore your music collection using planetary system. Application, created using Cinder framework allows you to navigate dynamically created by information about the music on your iPad. Fly thorough the stars that represent your favourite artists, visit planets (albums) or listen to the moons (tracks).

–

7. Windosill [iPad, Games]

Previously available for Mac and Windows, we are glad to see Windosill by Patrick Smith (Vectorpark.com) finally make it’s way to the iOS.  An adventure puzzle game filled with peculiar objects, your task is to resolve abstract but yet logical puzzles to progress from room to room. For fans of the original, this is not just a simple port. The Windosill for the iPad was built as a native iOS app and customized the behavior of every element to the iPad’s touch interface. Bonus features include a sketchbook gallery of concept and development artwork, the option to instantly skip to any room you’ve already completed and two special settings, unlocked when you complete Windosill: Complex Gravity, which allows you to manipulate objects by tipping your iPad, and See-Thru Mode, which makes everything translucent (giving you a sneak-peek into how Windosill is put together). Fantastic addition to the AppStore.

–

6. OscilloScoop [iPhone, iPad, Sound]

Created by Scott Snibbe and Graham McDermott and originally designed by Lukas Girling, “OscilloScoop” is a culmination of about 15 years’ effort trying to create musical creation tools that is more like a video game. The process began back in the 90′s at a research lab when Scott Snibbe and Lukas Girling worked briefly with Brian Eno and Laurie Anderson on some of the concepts. The app, playfully called OscilloScoop, presents a trio of brightly colored stacked spinning crowns. Touching a crown trims or builds up its edge, like a spinning disk of clay. As you carve into this disc, the music changes, and you effortlessly produce hip hop, techno, electro, and other recognisable forms of music. Scott Snibble describes the process much like a DJ spinning records, but you create original music of your own, rather than merely cutting between tracks.

–

5. The Infinite Adventure Machine [MaxMSP, iPad]

The Infinite Adventure Machine by David Benqué is a computer program which generates fairy-tale plots. Based on the work of Vladimir Propp, who reduced the structure of russian folk-tales to 31 basic functions, the project addresses the difficulties of automatic story generation which David explains remain an unsolved problem for computer science.

Not available – Prototype

–

4. field [iPhone, iPad, openFrameworks, Sound]

Created by Rainer Kohlberger with sound by Wilm Thoben, field is an abstract audiovisual app that uses realtime camera feed as input. Brightness, saturation and color are interpreted, and translated into a constructed grid. The realtime image triggers different sounds as you pan around. Included are five different modes which you can switch through by double tapping the screen. Very addictive and playful take on  live video as medium to generate both visual and sound patterns.

–

3. Last Clock [iPad]

Originally created in 2002 by Jussi Ängeslevä and Ross Cooper when at the Royal College of Arts in London and developed for the iOS by NewMediology (Danqing Shi), Last clock is a clock app that uses popular slit scan technique to keep you in factual time, human time and remote time. Just like any other analog clock, the app has three hands: one for seconds, minutes and hours. The hands, however, are made of a slice of live video that gets scanned to the clockface. With different refresh rate for the three hands, the three time circles reflect the rhythms of the space at different temporal resolutions. The app also allows you to stream the last clock camera feed over the internet.

–

2. Sword & Sworcery EP [Games, iPhone, iPad]

The long awaited “21st century interpretation of the archetypical old school videogame adventure” by Superbrothers finally hit the AppStore this year. The response was amazing quickly became one of the most popular games of the year. If you haven’t had a chance to play with it, xmas break seems like a perfect opportunity. Easily the best iOS game this year.

–

1. Björk – Biophilia [iPhone, iPad, Sound]

Having seen many apps over the last few years, I don’t think anyone expected Biophilia. If you don’t know about it, is an iPhone/iPad release of Björk’s latest album created in collaboration with Scott Snibbe and her longtime design collaborators M/M (Paris). Comprising a suite of musical pieces and interactive artworks, Biophilia is a unique experience where different elements are weaved together with both sensitivity and precision. The experience is unified, building on different layers of visuals and sound. It’s a simple must! (Read also our special Making-of Virus)

This is an introduction tutorial in creating photo apps for the iPhone based on the tutorial by Atsushi Tadokoro. If you are already familiar with openFrameworks you can skip right to the “goal” section. If you haven’t used openframeworks before, read on to learn how to download, install and use xcode to get this tutorial on your iPhone.

Before we start, to be able to deploy development applications to the iPhone, ie run them on the device or publish to the AppStore, you will need to be registered with Apple as iPhone developer. This is a somewhat convoluted process but the registration itself does not take a lot of time. The downside that that it will cost you $99/year. You do not necessarily need to be registered as a iPhone developer to experiment with this tutorial as you can always use the iPhone emulator to play with your applications. Considering this is a photo application we are creating, you will not be able to take photos from the emulator, instead the code includes using images from the library when application is run in the emulator.

openFrameworks in an open source c++ creative code framework which runs inside xCode, a development application provided by Apple as a part of Apple SDK (software development kit). To be able to use oF (openFrameworks) you first need to download iPhone SDK (Download). You will need to register on Apple’s site to gain access to the download but this is pretty straight forward. Once you have download and installed xCode, you need to download openFrameworks. oF comes in a number of versions, the one you want is v0061_iPhone. This is the latest official release at the time of writing this tutorial. Should you want to jump ahead, you can always look at the github source, the latest development version. For this tutorial, v0061_iPhone should be good to go. Download oF and unzip the folder. You can put the oF folder anywhere on your computer, what is important is that all the applications you create (xCode Projects) are located inside this folder. The correct location for all your files should be openframeworksfolder/apps/yournameorappname/xcodeprojectsfolders. It’s really important that you have another folder between apps and your xcode projects. oF xCode projects include a bunch of references to the files contained within the oF folder. Regardless of whether you new app is empty or not, for it to compile (build/run), needs to know where the main oF files are.

To start a new project, duplicate “emptyExample” folder located inside /apps/iPhoneExamples folder and put it in the appropriate new folder inside /apps folder (see above). This is your starting file and should contain all the link and references to get going.

NOTE: The making of this original tutorial happened before the latest version of Apple SDK (the one you just downloaded) was available. To make your tutorial files run, you will need to change BASE SDK configuration. To do this, inside xcode, go to the left menu, expand “targets” folder and double click on the application. Change “Base SDK” to “iOS Device 4.1″. Alternatively, download the working (oFv0061_iPhone) emptyExample here. If you are downloading files below, you will need to do the same to them.

When you open the example project, you will find many folders on the left and link to other files. You should be concerned (for the time being) only with the files located inside the “src” folder, the the source folder. There you will find main.mm, testApp.h and testApp.mm files. main.mm file you will hardly ever need to touch, this just defines global settings, testApp.h is where your definitions go, ie for example the variables and testApp.mm is where your code sits. In the following examples will be dealing with testApp.h and testApp.mm files.

To test whether your example project works, click on the “Build and Run” button in the top of the xCode window. To ensure you are deploying to the emulator and not device, make sure that on the left pull down menu “simulator” is selected. Alternatively if you would like to deploy straight to your device, choose “device”. If you code is good, you should now see emulator open running your empty application or do the same on the device.

The basic setup of oF files is very similar to Processing if you used it before. If not, basically there are a number of events that take place when your iphone goes through your code. First one is setup, this is where you predefine all the things that run only once. Update is where things happen each frame, say for example you want the object to move from left to right, well you’d do that in the update, telling in the code to move the object by 1 pixel with each progressing frame. Draw is where you say what to draw on the screen. touchDown is what happens when you tap on the screen, touchMoved when you move your finger along the screen, touchup is when your release and the one we are going to be using here is touchDoubleTap, what happens when you tap twice on the screen. For the sake of keeping this example simple, we’ll just use double tap as a button to open camera.

Now we are ready to jump into the code.

Take a Picture

We are going to first learn how to take a simple picture. Once we know that, we’ll learn how to apply effects or alter pixel data we obtain from the camera.

- Built-in camera to take pictures, images of photographs (ofImage) to copy and display
- The underlying features of the camera application and later

Your testApp.h

[sourcecode language="c"]
#pragma once

#include "ofMain.h"
#include "ofxiPhone.h"
#include "ofxiPhoneExtras.h"

class testApp : public ofxiPhoneApp {

public:
void setup();
void update();
void draw();
void exit();

void touchDown(ofTouchEventArgs &touch);
void touchMoved(ofTouchEventArgs &touch);
void touchUp(ofTouchEventArgs &touch);
void touchDoubleTap(ofTouchEventArgs &touch);

void lostFocus();
void gotFocus();
void gotMemoryWarning();
void deviceOrientationChanged(int newOrientation);

unsigned char * cameraPixels;
ofxiPhoneImagePicker * camera;
ofImage photo;
int status;

};
[/sourcecode]

Your testApp.mm

[sourcecode language="c"]
#include "testApp.h"

//————————————————————–
void testApp::setup(){
// register touch events
ofRegisterTouchEvents(this);

// initialize the accelerometer
ofxAccelerometer.setup();

//iPhoneAlerts will be sent to this.
ofxiPhoneAlerts.addListener(this);

//If you want a landscape oreintation
//iPhoneSetOrientation(OFXIPHONE_ORIENTATION_LANDSCAPE_RIGHT);

ofBackground(127,127,127);

cameraPixels = NULL;
camera = new ofxiPhoneImagePicker();
camera->setMaxDimension(480);

status = 0;
}

//————————————————————–
void testApp::update(){

#ifndef _USE_SIMULATOR
//condition to use simulator for testing
if(camera->imageUpdated){
//Camera’s memory space
if (cameraPixels == NULL){
cameraPixels = new unsigned char [camera->width * camera->height*4];
}

//Now that I’m still upside down camera images, the image upside down
for (int i = 0; i < camera->height; i++){
memcpy(cameraPixels+(camera->height-i-1)*camera->width*4, camera->pixels+i*camera->width*4, camera->width*4);
}

// The captured image from the camera for processing ofImage (photo) Copy
photo.setFromPixels(cameraPixels, camera->width, camera->height, OF_IMAGE_COLOR_ALPHA);
camera->imageUpdated = false;
status = 1;
}
#endif

}

//————————————————————–
void testApp::draw(){

if (status == 0) {
//Display the screen to shoot
ofSetColor(255, 255, 255);
ofDrawBitmapString("Double tap on the screen!!", 40, ofGetHeight()/2-5);
}

if(status == 1){
//Display the captured image
photo.draw(0, 0);
}

}

//————————————————————–
void testApp::exit(){

}

//————————————————————–
void testApp::touchDown(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchMoved(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchUp(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchDoubleTap(ofTouchEventArgs &touch){

////UNCOMMENT/COMMENT AS NEEDED

////If using Simulator: loading images

// photo.loadImage("images/photo.png");
// photo.setImageType(OF_IMAGE_COLOR_ALPHA);
// status = 1;

////or to open Photo library in the simulator or actual device

//camera->openLibrary();

//When using real: a new photo shoot

camera->openCamera();

}

//————————————————————–
void testApp::lostFocus(){

}

//————————————————————–
void testApp::gotFocus(){

}

//————————————————————–
void testApp::gotMemoryWarning(){

}

//————————————————————–
void testApp::deviceOrientationChanged(int newOrientation){

}
[/sourcecode]

Camera Mosaic

- Processed into a mosaic of photographs
- Picked up at regular intervals of pixel information photographs, drawing a rectangle RGB obtained based on information
- Pixel information of the photographic image, getPixel () function is used to remove
- Photographic image, every pixel 1 RGBA (Red, Green, Blue, Alpha) that contains information on four
- When we scan the pixel is treated as one unit to keep in mind four pixels

Your testApp.h

[sourcecode language="c"]
#pragma once

#include "ofMain.h"
#include "ofxiPhone.h"
#include "ofxiPhoneExtras.h"

class testApp : public ofxiPhoneApp {

public:
void setup();
void update();
void draw();
void exit();

void touchDown(ofTouchEventArgs &touch);
void touchMoved(ofTouchEventArgs &touch);
void touchUp(ofTouchEventArgs &touch);
void touchDoubleTap(ofTouchEventArgs &touch);

void lostFocus();
void gotFocus();
void gotMemoryWarning();
void deviceOrientationChanged(int newOrientation);

unsigned char * cameraPixels;
ofxiPhoneImagePicker * camera;
ofImage photo;
int status;

};
[/sourcecode]

Your testApp.mm

[sourcecode language="c"]

#include "testApp.h"

//————————————————————–
void testApp::setup(){
// register touch events
ofRegisterTouchEvents(this);

// initialize the accelerometer
ofxAccelerometer.setup();

//iPhoneAlerts will be sent to this.
ofxiPhoneAlerts.addListener(this);

//If you want a landscape oreintation
//iPhoneSetOrientation(OFXIPHONE_ORIENTATION_LANDSCAPE_RIGHT);

ofBackground(127,127,127);

cameraPixels = NULL;
camera = new ofxiPhoneImagePicker();
camera->setMaxDimension(480);

status = 0;
}

//————————————————————–
void testApp::update(){

#ifndef _USE_SIMULATOR
//When using real
if(camera->imageUpdated){
//Camera’s memory space
if (cameraPixels == NULL){
cameraPixels = new unsigned char [camera->width * camera->height*4];
}

// Now that I’m still upside down camera images, the image upside down
for (int i = 0; i < camera->height; i++){
memcpy(cameraPixels+(camera->height-i-1)*camera->width*4, camera->pixels+i*camera->width*4, camera->width*4);
}

// The captured image from the camera for processing ofImage (photo) Copy
photo.setFromPixels(cameraPixels, camera->width, camera->height, OF_IMAGE_COLOR_ALPHA);
camera->imageUpdated = false;
status = 1;
}
#endif

}

//————————————————————–
void testApp::draw(){

if (status == 0) {
//Display the screen to shoot
ofSetColor(255, 255, 255);
ofDrawBitmapString("Double tap on the screen!!", 40, ofGetHeight()/2-5);
}

if(status == 1){
//Display the captured image
photo.draw(0, 0);

//Bitmap information stored in the array of image data
unsigned char * pixels = photo.getPixels();

//Image width and height of income
int w = photo.width;
int h = photo.height;

//スキャンする間隔
int skip = 20;

//Of a mosaic: the pixel color at regular intervals to detect and draw
for (int j = 0; j < h; j+=skip){
for (int i = 0; i < w; i+=skip){
int valueR = pixels[j*4*w + i*4];
int valueG = pixels[j*4*w + i*4+1];
int valueB = pixels[j*4*w + i*4+2];
ofSetColor(valueR,valueG,valueB);
ofRect(i, j, skip, skip);
}
}
}
}

//————————————————————–
void testApp::exit(){

}

//————————————————————–
void testApp::touchDown(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchMoved(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchUp(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchDoubleTap(ofTouchEventArgs &touch){

////UNCOMMENT/COMMENT AS NEEDED

////If using Simulator: loading images

// photo.loadImage("images/photo.png");
// photo.setImageType(OF_IMAGE_COLOR_ALPHA);
// status = 1;

////or to open Photo library in the simulator or actual device

//camera->openLibrary();

//When using real: a new photo shoot

camera->openCamera();

}

//————————————————————–
void testApp::lostFocus(){

}

//————————————————————–
void testApp::gotFocus(){

}

//————————————————————–
void testApp::gotMemoryWarning(){

}

//————————————————————–
void testApp::deviceOrientationChanged(int newOrientation){

}
[/sourcecode]

Scan Camera

- Using the application of Mosaic
- A certain height (Y coordinate) of the pixel information
- All X coordinate to obtain RGBA values, like displaying a vertical bar to expand
- To get height, which can be changed by touching the screen
- Effects can be obtained at the specified line to scan photos

Your testApp.h

[sourcecode language="c"]

#pragma once

#include "ofMain.h"
#include "ofxiPhone.h"
#include "ofxiPhoneExtras.h"

class testApp : public ofxiPhoneApp {

public:
void setup();
void update();
void draw();
void exit();

void touchDown(ofTouchEventArgs &touch);
void touchMoved(ofTouchEventArgs &touch);
void touchUp(ofTouchEventArgs &touch);
void touchDoubleTap(ofTouchEventArgs &touch);

void lostFocus();
void gotFocus();
void gotMemoryWarning();
void deviceOrientationChanged(int newOrientation);

unsigned char * cameraPixels;
ofxiPhoneImagePicker * camera;
ofImage photo;
int status;
int scanHeight;
};
[/sourcecode]

Your testApp.mm

[sourcecode language="c"]
#include "testApp.h"

//————————————————————–
void testApp::setup(){
// register touch events
ofRegisterTouchEvents(this);

// initialize the accelerometer
ofxAccelerometer.setup();

//iPhoneAlerts will be sent to this.
ofxiPhoneAlerts.addListener(this);

//If you want a landscape oreintation
//iPhoneSetOrientation(OFXIPHONE_ORIENTATION_LANDSCAPE_RIGHT);

ofBackground(127,127,127);

cameraPixels = NULL;
camera = new ofxiPhoneImagePicker();
camera->setMaxDimension(480);

status = 0;
}

//————————————————————–
void testApp::update(){

#ifndef _USE_SIMULATOR
//When using real
if(camera->imageUpdated){
//Camera’s memory space
if (cameraPixels == NULL){
cameraPixels = new unsigned char [camera->width * camera->height*4];
}

// Now that I’m still upside down camera images, the image upside down
for (int i = 0; i < camera->height; i++){
memcpy(cameraPixels+(camera->height-i-1)*camera->width*4, camera->pixels+i*camera->width*4, camera->width*4);
}

// The captured image from the camera for processing ofImage (photo) Copy
photo.setFromPixels(cameraPixels, camera->width, camera->height, OF_IMAGE_COLOR_ALPHA);
camera->imageUpdated = false;
status = 1;
}
#endif

}

//————————————————————–
void testApp::draw(){

if (status == 0) {
//Display the screen to shoot
ofSetColor(255, 255, 255);
ofDrawBitmapString("Double tap on the screen!!", 40, ofGetHeight()/2-5);
}

if(status == 1){
//Display the captured image
photo.draw(0, 0);

//Bitmap information stored in the array of image data
unsigned char * pixels = photo.getPixels();

//Image width and height of income
int w = photo.width;
int h = photo.height;

//Of a mosaic: the pixel color at regular intervals to detect and draw
for (int i = 0; i < w; i++){
int valueR = pixels[scanHeight*4*w + i*4];
int valueG = pixels[scanHeight*4*w + i*4+1];
int valueB = pixels[scanHeight*4*w + i*4+2];
ofSetColor(valueR,valueG,valueB);
ofRect(i, 0, 1, h);
}

//Display it where to scan
ofSetColor(255, 255, 255);
ofLine(0, scanHeight, ofGetWidth(), scanHeight);
}
}

//————————————————————–
void testApp::exit(){

}

//————————————————————–
void testApp::touchDown(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchMoved(ofTouchEventArgs &touch){
//Where you drag the screen to determine the height scan
scanHeight = touch.y;

}

//————————————————————–
void testApp::touchUp(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchDoubleTap(ofTouchEventArgs &touch){

////UNCOMMENT/COMMENT AS NEEDED

////If using Simulator: loading images

// photo.loadImage("images/photo.png");
// photo.setImageType(OF_IMAGE_COLOR_ALPHA);
// status = 1;

////or to open Photo library in the simulator or actual device

//camera->openLibrary();

//When using real: a new photo shoot

camera->openCamera();

}

//————————————————————–
void testApp::lostFocus(){

}

//————————————————————–
void testApp::gotFocus(){

}

//————————————————————–
void testApp::gotMemoryWarning(){

}

//————————————————————–
void testApp::deviceOrientationChanged(int newOrientation){

}
[/sourcecode]

Pixelate Camera (Greyscale)

- Analysis of photographic images pixel information
- RGB images at a constant interval to another level (brightness) to get, taking the average value
- Going in circles while changing the radius value
- As gray dots represent the photo that was printed in black and white

Your testApp.h

[sourcecode language="c"]
#pragma once

#include "ofMain.h"
#include "ofxiPhone.h"
#include "ofxiPhoneExtras.h"

class testApp : public ofxiPhoneApp {

public:
void setup();
void update();
void draw();
void exit();

void touchDown(ofTouchEventArgs &touch);
void touchMoved(ofTouchEventArgs &touch);
void touchUp(ofTouchEventArgs &touch);
void touchDoubleTap(ofTouchEventArgs &touch);

void lostFocus();
void gotFocus();
void gotMemoryWarning();
void deviceOrientationChanged(int newOrientation);

unsigned char * cameraPixels;
ofxiPhoneImagePicker * camera;
ofImage photo;
int status;

};
[/sourcecode]

Your testApp.mm

[sourcecode language="c"]
#include "testApp.h"

//————————————————————–
void testApp::setup(){
// register touch events
ofRegisterTouchEvents(this);

// initialize the accelerometer
ofxAccelerometer.setup();

//iPhoneAlerts will be sent to this.
ofxiPhoneAlerts.addListener(this);

//If you want a landscape oreintation
//iPhoneSetOrientation(OFXIPHONE_ORIENTATION_LANDSCAPE_RIGHT);

ofBackground(127,127,127);
ofEnableSmoothing();
ofSetCircleResolution(64);
ofEnableAlphaBlending();

cameraPixels = NULL;
camera = new ofxiPhoneImagePicker();
camera->setMaxDimension(480);

status = 0;
}

//————————————————————–
void testApp::update(){

#ifndef _USE_SIMULATOR
//When using real
if(camera->imageUpdated){
//Camera’s memory space
if (cameraPixels == NULL){
cameraPixels = new unsigned char [camera->width * camera->height*4];
}

// Now that I’m still upside down camera images, the image upside down
for (int i = 0; i < camera->height; i++){
memcpy(cameraPixels+(camera->height-i-1)*camera->width*4, camera->pixels+i*camera->width*4, camera->width*4);
}

// The captured image from the camera for processing ofImage (photo) Copy
photo.setFromPixels(cameraPixels, camera->width, camera->height, OF_IMAGE_COLOR_ALPHA);
camera->imageUpdated = false;
status = 1;
}
#endif

}

//————————————————————–
void testApp::draw(){

if (status == 0) {
//Display the screen to shoot
ofSetColor(255, 255, 255);
ofDrawBitmapString("Double tap on the screen!!", 40, ofGetHeight()/2-5);
}

if(status == 1){
//Display the captured image
photo.draw(0, 0);

//Bitmap information stored in the array of image data
unsigned char * pixels = photo.getPixels();

//Image width and height of income
int w = photo.width;
int h = photo.height;

//Set the radius of the pixelate
int r = 12;

//Scan the image at regular intervals
for (int j = 0; j < h; j+=r){
for (int i = 0; i < w; i+=r){
//Get the value of RGB pixel
//RGBA so arranged in the order of 4 per pixel
int valueR = pixels[j*4*w + i*4];
int valueG = pixels[j*4*w + i*4+1];
int valueB = pixels[j*4*w + i*4+2];

//RGB values for calculating the average value of
float value = r*(valueR+valueG+valueB)/2.0/255.0;

//Get the RGB values based on drawing a circle
//Get the brightness of the pixels, which will correspond to the radius
ofSetColor(255,255,255,100);
ofCircle(i, j, value);
}
}

}
}

//————————————————————–
void testApp::exit(){

}

//————————————————————–
void testApp::touchDown(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchMoved(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchUp(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchDoubleTap(ofTouchEventArgs &touch){

////UNCOMMENT/COMMENT AS NEEDED

////If using Simulator: loading images

// photo.loadImage("images/photo.png");
// photo.setImageType(OF_IMAGE_COLOR_ALPHA);
// status = 1;

////or to open Photo library in the simulator or actual device

//camera->openLibrary();

//When using real: a new photo shoot

camera->openCamera();

}

//————————————————————–
void testApp::lostFocus(){

}

//————————————————————–
void testApp::gotFocus(){

}

//————————————————————–
void testApp::gotMemoryWarning(){

}

//————————————————————–
void testApp::deviceOrientationChanged(int newOrientation){

}
[/sourcecode]

Pixelate Camera (Colour)

- The color version of Pixelate
- RGB separate circles, we repeatedly
- The synthesis of color when drawing the point where the change is additive synthesis
- Use OpenGL commands directly – glEnable (GL_BLEND); and glBlendFunc (GL_SRC_ALPHA, GL_ONE); feasible
- As gray dots represent a color photograph printed as

Your testApp.h

[sourcecode language="c"]
#pragma once

#include "ofMain.h"
#include "ofxiPhone.h"
#include "ofxiPhoneExtras.h"

class testApp : public ofxiPhoneApp {

public:
void setup();
void update();
void draw();
void exit();

void touchDown(ofTouchEventArgs &touch);
void touchMoved(ofTouchEventArgs &touch);
void touchUp(ofTouchEventArgs &touch);
void touchDoubleTap(ofTouchEventArgs &touch);

void lostFocus();
void gotFocus();
void gotMemoryWarning();
void deviceOrientationChanged(int newOrientation);

unsigned char * cameraPixels;
ofxiPhoneImagePicker * camera;
ofImage photo;
int status;

};
[/sourcecode]

Your testApp.mm

[sourcecode language="c"]
#include "testApp.h"

//————————————————————–
void testApp::setup(){
// register touch events
ofRegisterTouchEvents(this);

// initialize the accelerometer
ofxAccelerometer.setup();

//iPhoneAlerts will be sent to this.
ofxiPhoneAlerts.addListener(this);

//If you want a landscape oreintation
//iPhoneSetOrientation(OFXIPHONE_ORIENTATION_LANDSCAPE_RIGHT);

ofBackground(127,127,127);
ofEnableSmoothing();
ofSetCircleResolution(64);
ofEnableAlphaBlending();

cameraPixels = NULL;
camera = new ofxiPhoneImagePicker();
camera->setMaxDimension(480);

status = 0;
}

//————————————————————–
void testApp::update(){

#ifndef _USE_SIMULATOR
//When using real
if(camera->imageUpdated){
//Camera’s memory space
if (cameraPixels == NULL){
cameraPixels = new unsigned char [camera->width * camera->height*4];
}

// Now that I’m still upside down camera images, the image upside down
for (int i = 0; i < camera->height; i++){
memcpy(cameraPixels+(camera->height-i-1)*camera->width*4, camera->pixels+i*camera->width*4, camera->width*4);
}

// The captured image from the camera for processing ofImage (photo) Copy
photo.setFromPixels(cameraPixels, camera->width, camera->height, OF_IMAGE_COLOR_ALPHA);
camera->imageUpdated = false;
status = 1;
}
#endif

}

//————————————————————–
void testApp::draw(){

if (status == 0) {
//Display the screen to shoot
ofSetColor(255, 255, 255);
ofDrawBitmapString("Double tap on the screen!!", 40, ofGetHeight()/2-5);
}

if(status == 1){
//Display the captured image
photo.draw(0, 0);

//Bitmap information stored in the array of image data
unsigned char * pixels = photo.getPixels();

//Image width and height of income
int w = photo.width;
int h = photo.height;

//Set the radius of the pixelate
int r = 12;

//Scan the image at regular intervals
for (int j = 0; j < h; j+=r){
for (int i = 0; i < w; i+=r){
//Get the value of RGB pixel
//RGBA so arranged in the order of 4 per pixel
int valueR = pixels[j*4*w + i*4];
int valueG = pixels[j*4*w + i*4+1];
int valueB = pixels[j*4*w + i*4+2];

// Get the RGB values based on drawing a circle
// Get the brightness of the pixels, which will correspond to the radius of the circle
ofSetColor(255, 0, 0, 63);
ofCircle(i, j, r*valueR/255.0*2.0);
ofSetColor(0, 255, 0, 63);
ofCircle(i, j, r*valueG/255.0*2.0);
ofSetColor(0, 0, 255, 63);
ofCircle(i, j, r*valueB/255.0*2.0);
}
}

}
}

//————————————————————–
void testApp::exit(){

}

//————————————————————–
void testApp::touchDown(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchMoved(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchUp(ofTouchEventArgs &touch){

}

//————————————————————–
void testApp::touchDoubleTap(ofTouchEventArgs &touch){

////UNCOMMENT/COMMENT AS NEEDED

////If using Simulator: loading images

// photo.loadImage("images/photo.png");
// photo.setImageType(OF_IMAGE_COLOR_ALPHA);
// status = 1;

////or to open Photo library in the simulator or actual device

//camera->openLibrary();

//When using real: a new photo shoot

camera->openCamera();

}

//————————————————————–
void testApp::lostFocus(){

}

//————————————————————–
void testApp::gotFocus(){

}

//————————————————————–
void testApp::gotMemoryWarning(){

}

//————————————————————–
void testApp::deviceOrientationChanged(int newOrientation){

}
[/sourcecode]

Conclusion

As you can see, you can produce quite a lot with very little code indeed. Of course, this is just the beginning and if you were interested in building a real app out of any of the above examples you would also build an UI, buttons, help, etc. The ‘draw’ method is your friend, from simple rectangles to make buttons to code in the touchdown such as:

if(touch.x>70 && touch.x<90 && touch.y>325 && touch.y<355) {

//somethings happens here

}

to define the click are where something might happen, such as opening the library of photos (camera-> openLibrary (); instead of camera-> openCamera ();)

To see the full reference of commands, see openFrameworks website.

We hope this has been useful and provided a nice + quick introduction into openFrameworks on the iPhone. Any other tutorials you would like to see or if you have any questions please leave a comment below.

DOWNLOAD TUTORIAL FILES

Credits

This tutorial first appeared on http://yoppa.org, created by Atsushi Tadokoro. Introduction and translation by Filip Visnjic with the help of google translate, together with few changes to make it easier for beginners (i hope).

Process Compendium 2004-2010 is a collection of work and record of process by Casey Reas, co-founder of Processing, presented and created entirely in Processing. If you have seen Casey speak, this is another opportunity to examine and explore generative art Casey has been creating in the past few years. If you haven’t, (must) download links below.

Spoken by computer voice, you are taken on a journey by Casey through conditions, rules and elements that play a part in the creation of prints, sculptures Casey exhibited worldwide. From early examples of attributed behaviour to simple objects such as lines and circles to complex traces and colour trails these objects create, all resulting in beautiful compositions, captured as fragments of time.

An Element is a simple machine that is comprised of a Form and one or more Behaviors. A Process defines an environment for Elements and determines how the relationships between the Elements are visualized. For instance, Element 1 takes the form of a circle and one of its behaviors moves it along a straight line at a constant speed. Process 4 fills a surface with Element 1 and draws a line between elements while they overlap. Each Process is a short text that defines a space to explore through multiple interpretations. More..

Download: Mac | Windows

For more work, see reas.com

The recent weeks have been hectic for Spaces of Play. In september Spirits was presented at the Sense of Wonder Night Event at the Tokyo Game Show, and recently at the IndieCade in LA Spirits won the award for “Best Aesthetics”. In case you missed our post from few weeks back, Spirits is the new game from Spaces of Play, a game studio based in Berlin. With the Mr. Bounce behind them (we loved it), the team is set to release their new beautiful wonder within 2 weeks. The development kicked off around March this year, a number of months have passed and the team has been hard at work to get their new game out of the door. It’s very exciting as I have been closely following the development and have finally had a chance to play with the “almost” final version due for release in the next few weeks. So, what is Spirits?

Spirits is a Lemmings (wiki) inspired action-puzzle game for the iPad, iPhone and iPod touch, in which you manipulate wind and ground elements to guide the Spirits towards the goal. This is done with four different actions: Blow or block wind, dig tunnels and grow bridges of leaves. Besides the sound and music which are completely done with orchestral musical instruments, Spirits includes beautifully hand-drawn graphics which give the game a unique poetic feel. If you have seen Limbo, you will know exactly what this means. Foreground and background are played against one another, ie as you pan across your level they move in different speeds giving a sense of depth. Wind is represented using wonderfully light particles emitted both from the environment and spirits you assign this action to, all of this contributing to the beautiful environment to indulge and kill even most precious hours.

The game kicks off with simple few levels introducing you to different actions. Presented one at the time you go through each early levels learning one action after the other. This helps getting to know which action to use to achieve the goal. As you reach level 20 or so, you’ll find that having all the actions available to you just makes it harder to pick which action to use. You tap on a spirit to assign action. The spirit is paused while other spirits continue to do their thing. In some situations you’ll have to act quickly, assigning actions to multiple spirits one after the other. Failure to do it correctly will cost your some lives hoping that you have enough left to complete the level. There is a minimum number of spirits you have to get to the vortex (doors) and should you waste more spirits than you are allowed you’ll not be able to pass the level. The game continues nevertheless allowing you to practice and try new things knowing that next time you play you’ll know where to be more careful. Early levels require maybe 4-5 goes to get it right. Level 29, the one I am currently playing, I think I played over 10 times and still no clue how to complete. The game is getting increasingly more difficult past level 20. Where ways to get to the vortex may have been somewhat easy to resolve in the earlier levels, this is now way more tricky. Too much wind will plummet spirits into their deaths, wrong turn will point them in the wrong direction or hole dug in the wrong place will get your spirits stuck having to use addition spirits to get them out of the problem. There is plenty of variety between the levels to keep you wondering about how to complete it. I am yet to arrive to a level where I may use similar technique. Each one is unique and although I haven’t played them all, I find them all challenging enough and at times somewhat a relief when the solution is easy to find.

The “light” music, together with carefully illustrated environment and beautiful details give Spirits an elegant and light touch feel. Touching ghosts is like dipping you finger in warm milk, careful to each and every one. Spirits are no angry birds and although some of your gosts will die, you will feel sad and emotional wanting to save each and every one. There is so much attention to detail in this game that once you have finished it you will want to play it all over again – just for the looks. Considering there is also a score board, meaning each and every spirit counts towards your overall score (I am currently ranked 4 which I am sure this won’t last once the game is out) this should give you enough info to know how well you are doing. Also counting against your score are the plants you collected. In a lot of situations you’ll be able to complete the level without collecting all the plants so going back and going further will be something you want to do. I have been playing it for few days now, using every occasion I can regardless of whether it is 5 or 30 mins. Because the game is much about strategy as well correct play, every 5 minutes in the game is a step forward. Regardless of whether you are waiting for a bus or on a long journey, Spirits will definitely keep you entertained. If not completing the levels then trying out new strategies.

The game is schedules for submission tomorrow, meaning it will most probably be available in the AppStore within 2 weeks. Spirits will first appear on the iPad, followed by a release for the iPhone with support for iPhone 4 high res screen. We played with the iPhone version and although very similar to the iPad we expect to this be even more awesome on a retina display.

Made with Objective-C and C++.

Spaces of Play is a game studio based in Berlin. We are a group of independent game designers, visual artists and musicians that come together with the goal of creating great games. Our focus is on original ideas, gameplay and polish. We put our heart and soul into what we do, every pixel and sound bit has been hand-picked for your optimal experience. In short, we provide handcrafted independent games for the iPhone, iPod touch and iPad.

For latest updates become a fan on Facebook, or follow on Twitter and of course team’s development blog.

spacesofplay.com/spirits/

Platform: iPad
Version: 1.0
Cost: $4.99
Developer: spacesofplay

We are pleased to announce that the first official CreativeApplications.Net app is now available in the AppStore. SKTCH is a generative drawing application for the iPhone/iPod Touch featuring digital artists we got to know in the past few months, contributing their code to the initiative. SKTCH brings together a very talented group of people, some that have been working with the code for a long time and others just getting to know it. The app was created using the wonderful openFrameworks, organised in a way to allow different artists to contribute by providing “classes” which are then incorporated into the app by mainly drag and drop. Every class or what we like to call “preset” uses 6 variables. First three are simple RGB colours, having control over how the colours change in their preset. The other variables include “n” which we like to refer to as multiplier, “t” for transparency and “scl” for scale. Besides these 6 variables, it was totally up to the artists to explore possibilities. The only rule was that the preset could not be animated apart from when it is being drawn. It would have to come to a still eventually, examples being “TRIANGLE” and “FIREFLY”. The variables can be modified from the settings panel, allowing endless possibilities for each preset. If the values were not sufficient, ie too low, this was multiplied, ie “n*2″ within their class. Once all the presets were all in place, it was then a matter of organising them in the “draw” method so they all overlay the best way possible.

You can combine presets you choose or explore each one individually by modifying the properties in the settings panel. Here is what is included:

SQUARE – Simple square to get you started. Drag around the screen to see them multiply or adjust transparency to create fade effect.

CIRCLE – Another simple object (similar to square).

MESH – Generative mesh that connects line to previously drawn points creating a mesh style effect. Adjust the parameter to connect older points to reduce mesh extent.

DEPTH AND WIDTH – Parameter created by Andres Müller, play or words, use options to set width between the letters.

NETWORK – draw circles connected by centre points, size of the circle is defined by it’s distance to previous point. Great preset for multitouch, creating some very unexpected but beautiful results.

TRIANGLE draws beautiful generative triangles by connecting points emitted using particles.

Thanks to Kim Asendorf for both ASENDORF and SIX POINTS unique presets to Kim’s work. Adjust scale, span between the points and direction of pattern.

JOCABOLA is a simple but beautiful preset playing with the circle resolution. Create triangles/squares/pentagons and much more. Brought to you by Eduard Prats Molner.

FIREFLY also by Eduard, a particle driven preset using jocabola as the primary element.

CROSS is a preset by Martin Fuchs (deffekt) allowing you to create crosses and alter their size and look. Wonderful blend of color as you draw them.

KIEBITZ by Philip Whitfield (underdoeg), inspired by footprint of a bird draws amazing lines almost feeling three dimensional and last but not least;

Two wonderful presets from Mike Tucker; PHASE a simple weave of lines and ORBIT galaxy like swarm effect.

Some Tips & Tricks:

# Each preset works in a unique way. Explore each one seeing how settings change them. Don’t forget to try multitouch, works great on presets like Network, Jocabola or Kibbits.
# Use random button to generate variations on your current sketch.
# Mix and match different presets together, see them change in realtime as you modify the parameters.
# Take photos and make them background for your sketches.
# Try layering compositions by capturing screen of your current sketch and importing it as a background from your photo library.

We would like to think of this just as the beginning. We already have a number of other artists lined up to create presets for future versions. We thought 14 was a great number to start with but we hope this number will grow, doubling and tripling over the next few months. We also have other plans for SKTCH and these include a desktop app and of course an iPad app. Rather than just porting what we already have, we would like to explore opportunities that each platform provides so expect something special from each version. We would not like to discuss details just yet, but be sure that it’s going to be awesome.

Why purchase? SKTCH is one of many apps we hope to publish in the future. We are already talking to a few artists about publishing apps for them. We believe CAN is a great place to gather both those interested in creative app development and those that love making things. By purchasing SKTCH and future apps that come from CAN you are not only supporting this blog but also helping promote creative app development. So please, if you haven’t already, head over to the AppStore and purchase SKTCH. For only $1.99 we hope it will bring you as much enjoyment as it has to us developing it.

If you are interested in CreativeApplications.Net helping bring YOUR apps to the right audience or if you would like to contributre code to future version of SKTCH, please drop us a message at info[at]creativeapplications.net.

If you would like to suggest features or artists for future version of SKTCH, please head over to our GetSatisfaction page and leave a comment.

Please also if you like SKTCH then why not help us with a TWEET to get it onto as many iPhones and iPod Touches as possible!

Andreas Zecher of pixelate.de and our new guest writer has provided us with few details about the upcoming game Spirits he is working on together with Mattias Ljungström, the programmer and lead game designer who also did the iPhone version of Mr. Bounce. Marek Plichta is also with the team who did the hand-drawn pixel graphics for The Black Forest is responsible for the art (http://marek.monoid.net). Martin Straka (http://www.martinstraka.de) is doing the sound design who also did the music for Mr. Bounce and The Black Forest.

Andreas writes:
The game lends some basic gameplay mechanics from Lemmings-style games, but has a very different graphical style and atmosphere. Players can manipulate the wind in the game world and guide the spirits towards the exit of each level using four different actions: Blow wind, suck in wind, dig tunnels and build bridges.

Spirits will be released under the Spaces Of Play label and we will post updates about the development progress. To follow the development, see also http://www.spacesofplay.com and on Twitter under @spacesofplay.

In case you missed it, Andreas has done a fantastic post on CAN about Flixel, an open source game library for Flash. An in depth tutorial on how to create a defender style game with code examples and source download. If you are interested in creating games Flixel is a great start.

Last weekend I took part in the openFrameworks Lab organised as a part of Decode exhibition at the Victoria and Albert Museum in London. With about 30 people taking part, we were devided in 6 groups where I joined the Drawing Tool Jam group with Zach Lieberman – inspired by Rhonda. Other groups included Homemade 3D Scanner with Kyle McDonald, Scaletrix Hacking with Gavin Morris, Human Pong by Benjamin Knofe, Reactickles / iPhone Reactickles by Dimitrios Zampelis with Joel Gethin Lewis and People on Pop, Kikko (Diagne Cyril) with Andreas Müller. First day included an introduction to oF and followed with another 2 days of coding + experiments and tutorials. You can find out more information on this Wiki page.

Our group started from a simple example where by moving the mouse on screen a number of points were created and connected (download XCode example file). My intention was to add circles to these so as you paned across the screen the circles would be generated. The next step was to play with some values. For example when the mouse position was at the top of the screen, ie y value being low the circle radius would small and when the circles were at the bottom the of the screen they would appear much larger. The similar was applied to the circle colour. RGB values were changing as the circles were moving position. This is something that was kept throughout the app dev and you can see in the “final” version.

[/text]"]//testapp.cpp //draw

// example for different circle properties changing acording to circle position
for (int i = 0; i < pts.size(); i++){
//        ofCircle(pts[i].x, pts[i].y, (pts[i].y)*0.2);
ofCircle(pts[i].x, pts[i].y, q*200);
ofSetColor(((pts[i].y)*1), ((pts[i].y)*0.25), 0);
ofFill();

Next step was to extend the edges of the app, ie when you moved the mouse beyond the edges the drawing would continue. This was done with the simple 2 lines of code. The amount could be increased or decreased to create desired effect.

[/text]"]//testapp.cpp //update // same was done for particles[i].pos
pts[i].y += sin(ofGetElapsedTimef()) * 1.25;
pts[i].x += cos(ofGetElapsedTimef()) * 1.25;

Because the group was generally exploring alternative ways of controlling the drawing (other than mouse), I decided to implement OSC control and try to control the particles from the iPhone. The OSC example located in oF ad-on examples folder contained all the information/code needed to make this happen. It was a matter of copying and pasting the code and seeing the values generated using Memo Akten‘s MSARemote application for the iPhone. With the bare copy and paste and accelerometer turned on, we could observe values that were being parsed. With the help of Zach Lieberman, we managed to isolate only the values we needed and map these onto the mouse movement. The accelerometer data was mapped the same way allowing this value to be assigned to the screen movement. Interestingly, something we didn’t expect was that you could now control the particles using more than one iPhone. Of course, accelerometer needed to be switched on on a single iPhone only as if it was controlled by multiple the conflict would occur, ie two people or move moving the scene in opposite directions.

[/text]"]//testapp.cpp //update // code for the OSC messages - mapping to mouse controls

if (m.getNumArgs() > 3){
// both the arguments are int32's
//int nothing = m.getArgAsInt32( 0 );
int id  = m.getArgAsInt32( 1 );
float x = m.getArgAsFloat( 2 );
float y = m.getArgAsFloat( 3 );
cout << id << " " << x << " " << y << endl;
mouseDragged( x * ofGetWidth(), y * ofGetHeight(), 0);
}

Porting the code to iPhone worked in about 10 minutes. It was as easy as drag and drop particle class .h and .cpp files, copy an paste code from the main .cpp and .h files and compile and run in emulator. Deploying it to the iPhone would have also worked great first time but because I haven’t done it for a while I realised that my iPhone OS was newer than the Xcode version. I had to download the latest version of Xcode (all 2.7gigs), install it and then deploy to device worked perfect.
Once I was able to test it on the iPhone I found that screen space and orientation made the circular motion slightly too slow. Multiplying these values fixed this. Another issue was performance which to this day is probably still a bit of a problem. Because on the desktop the particles never die, I knew that on the iPhone this would be an issue. With the help of Zach Gage over iChat, we added a code which made old particles disappear when amount of the would go over a certain number. What you see now in the iPhone app is about 200 particles generated from points which over time disappear. Using multitouch, ie more than one finger at the time makes this happen faster as a double or triple amount of particles are created on a single swipe. Things do go a little hectic if you use four fingers but there is something quite nice about complexity that occurs.

[/text]"]//App.cpp // update / making particle lifespan

for(int i=particles.size()-1;i>=0;i--)
{
if(particles[i].life > 60*2)
{
particles.erase(particles.begin()+i);
}

While it was my intention to replace automated circular motion with accelerometer data, ie as you tilt your iPhone the screen would pan, allowing you to draw endlessly in screen space (like the desktop app), the accelerometer effect creates confusion, ie when you tilt your iPhone it’s hard to keep an eye on what is happening. In addition, because your fingers cover the large area of the screen you would miss particle events.

The last touches to the iPhone app included a separate clear button at the bottom right of the screen and little instruction about double tap. The clear button is a simple instruction if the mouse is pressed and is in this location of the screen them clear:

[/text]"]//App.cpp // touchDown / clearing the screen
if(x>290 && x<290+30 && y>450 && y<450+30)
{
pts.clear();
particles.clear();
}

<pre>//App.cpp // touchDoubleTap / unhiding the info panel
hello.bVisible = !hello.bVisible;

Posting to the AppStore took some time, probably more time than adding some of the UI. Luckily, Zach Gage was on iChat to help out although managing to apply right distribution certificates needed some effort. While until now I have been using development certificate, I needed to add the app to distribution profile and download new distribution certificate. Double tapping on the executable on Xcode would bring up info panel where the now new distribution certificate needed to be assigned. Once that was done, the upload of the binary to iTunes Connect worked just fine. Another small weirdness was the large icon. Apple asks for 512×512 image, where my icon was generated from the desktop app the detail and quality was much lower. The question was whether to recreate the icon from scratch or just blow up (increase the res) suffering the poor quality of image if viewed at full res. I went with blow up even though the image looked pretty bad at full res. Considering that apple would never use that image at it’s full resolution I thought that would be fine.

You can download the full source for the desktop app here (note you will need MSARemote to control the screen panning – without you will only see the partices)

Download the Mac OSX Only Desktop app here

You can download the iPhone source or the version currently in the AppStore.The app is free and you can download it here:

If you have any comments or questions, please leave a comment below.
If there are additional features you would like to see, please add a task here on NoKahuna for consideration.

Thanks to Joel Gethin Lewis, Zach Lieberman, Kyle McDonald, Arturo Castro, Andreas Müller, Eduard Prats Molner, Zach Gage, onedotzero and Victoria and Albert Museum.

Created with openFrameworks.
For information on openFrameworks see http://openframeworks.cc
For information on past and future workshops see http://wiki.openframeworks.cc

Tom Hulbert and Luckybite have just released details including the download of long awaited port of Processing.js library to iPhone SDK. The new iProcessing is an open programming framework to help people develop native iPhone applications using the Processing language.

The iProcessing download consists of a set of example XCode projects that demonstrate many of the Basic Examples from the Processing web site (originally written by Casey Reas and Ben Fry) as well a number that demonstrate the use of various iPhone features such as multitouch, accelerometer, orientation, location, sound play/record, app state saving and so on. Processing.js is a port of the Processing langauge to Javascript by John Resig and is intended for people who want to program images, animation, and interactions for the web in Processing without the use of Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element.

To get started with iProcessing, follow the link here to download various examples. Each example has a .xcodeproj XCode project file.
Open this file in XCode and once open you’ll see a folder called “main” in “Groups & Files” on the left side of XCode. Drop down the “main” folder and here you’ll see a file called “main.pde”. This is where you write your Processing code. To run in iPhone simulator you just need to click build and you’re off. If you would like to deploy this to your phone, the process is the same as with other iPhone xcode projects. With the examples, first make sure you code is signed by going into “Targets”, openning the folder and double clicking on the executable to be. Under the code signing idenity you will need to specify the correct certificate. Once you have done this, you will be able to deploy to your device (note, you will have to be registered as iPhone developer with Apple to be able to obtain a correct certificate and deploy apps to your iPhone).

Unfortunately, I had problems with the apps deployed to device – they do not seem to go beyond the splash screen where in emulator they work fine. Maybe you’ll have more luck + please report in the comments below.

BirdBox is a free app by Luckybite that was prototyped using iProcessing. BirdBox turns your iPhone or iPod Touch into a physical nesting box alarm clock. Tap the screen anytime to see the nesting birds inside and charge your iPhone while you sleep to wake up with the birds.

To find out more info about iProcessing and download the examples see luckybite.com/iprocessing/

Luckybyte is a LOndon based product design and innovation company owned and managed by Durell Bishop and Tom Hulbert.

iPhone development is red hot right now, with thousands of individual developers and big brands trying to carve out a miniscule piece of the Apple’s rather large pie for themselves. Aside from the profit aspect, there are many creative programmers looking to experiment with a powerful, hand-held, multitouch multitouch device. With it’s advanced features, such as audio input / output, accelerometer, wifi, bluetooth, and location awareness, the iPhone really is a device that many people have been dreaming about for years. To program for the iPhone, a developer typically has to learn ObjectiveC and it doesn’t hurt to know some C / C++ since a lot of iPhone libraries are written in that.

ObjectiveC is an object oriented language like any other, and takes a little time to become familiar with it, due to it’s specific brand of memory management and unique syntax.

The interface framework (UIKit) is good and very well suited to touch devices, though it’s clear that Apple doesn’t really want people to mess with it. Trying to change the look and feel of built in components can be a real challenge (or be downright impossible) sometimes, since the source code to those components is not available.

People looking to get the best possible performance or write cross-platform code will find that plain ObjectiveC has trouble meeting those goals.

For these reasons, I chose to look for an alternative that would let me work mostly in C++ which I am already very familiar with. The one I decided on was the libNUI framework. Having worked extensively with Juce, I’ve come to appreciate the value of a comprehensive cross-platform framework that compiles under Mac, Linux and PC and provides abstracted access to low-level hardware such as audio, networking and graphics. LibNUI offers the same thing – a set of code that handles all the OS specific stuff for you, and provides you with a set of GUI widgets that can be easily extended or modified to meet your needs. It also provides you with the full source code so you can see how everything works and make your own changes. Since it’s 99% written in C++, performance for stuff like audio is very good. Plus, I can compile the same application on my Mac desktop, my PC or my Linux box and it works with minimal changes. I’ve currently written two iPhone apps using libNUI – bleep!BOX and bleep!Synth. I am currently exploring a Mac/PC VST version of bleep!BOX as well, and was able to get it compiled and running in only a couple hours.

Some caveats about libNUI – it’s still very heavily under  development and things are being added and fixed all the time. Documentation is a little sparse but it’s getting better. There are tutorial applications you can build to learn your way around. But if you are not comfortable digging into code and figuring out how it works, libNUI may not be for you. Expect to spend several days just learning how things work.

For those looking to experiment with graphics and sound, there is also Open Frameworks which was used in the Thump app. It’s a very basic framework around OpenGL and audio/networking protocols. It’s nowhere near as exhaustive as libNUI, but if you want something basic that you can pick up quickly, OF is a good option. Like libNUI, it’s also cross platform and open source (and C++).

If games are what you’d like to get into, a couple of the major open source 3d engines, Ogre3D and Irrlicht now compile on the iPhone. No doubt they can be used for creative coding too.

Have another iPhone framework that we missed? Post it in the comments.

AppStore now counts about 500-800 daily releases/updates and with the recent news about Flash developers joining the ride, finding exciting new releases in the AppStore is going to become increasingly difficult. This is why rely on other blogs to get information directly from the developers and hopefully find jewels amongst the thousands of apps being released in the appstore.

We recently mentioned Polytron’s Power Pill, currently in development and soon to be released one of the games we really are looking forward to. Another title that deservers special attention is Noby Noby Boy from Keita Takahashi.

Keita first revealed his intentions to create an iPhone version of the PS3 downloadable at this year’s Game Developers Conference. More of a virtual playground than a game (fingergaming), Noby Noby Boy puts players in control of a stretchable, snake-like creature that can devour objects in the world around him. Most recently, Keita has been posting updates on the facebook page about the progress of development. These include two screenshots of the game which don’t really describe much but do give some idea that players will be able to scrawl messages across the body of a stretched Noby Noby Boy as well as picking up on the swipe screen interface and custom designed menu bar (great idea not many other developers are exploring). What purpose all this serves, we don’t know.

No release date has yet been announced for the iPhone port of Noby Noby Boy, but you can track the development with some pretty cool insights on the facebook page. The video below shows the PS3 version of the game.