I had the opportunity to make an interactive sketch for a project on the iPhone the other day. I was pressed for time and really wanted the project. So I decided to take a closer look at tools for rapid prototyping for iPhone/iPad.

I have some limited knowledge from the past in making native apps in Xcode, using Objective-C and all the interface builders wonderful capabilities. But being pressed for time and mostly just wanting to show the concept I looked at Gamesalad, Processingjs, openFrameworks & Cinder++ (I picked those based on my own capabilities out of very many options out there).

- Gamesalad – a tool reminding me of how Macromedia Director once was. Easy to work with, powerful with scripting but way too long time and complicated process of getting the app to the client. Very nice features though.

- Processingjs – I know Processing quite well at this time so this was an obvious way to go since the html5 works fine under iPhone and iPad. The Processingjs team has made wonders and it was very smooth to get it up and running with the pre-release of Processing0199. The different modes in Processing – “standard”, “javascript” and “android” is wonderful. (Learn more about the upcoming Processing 2.0 from the talk Fry & Reas held at Eyeo). I know Processing, have done a couple of things in processingjs and the clock was ticking. So I simply gave up on openFrameworks and Cinder++ since they were totally new to me.

So I went with processingjs. The sketch was quite fast assembled and it looked and behaved the way I wanted. The js_applet was however somewhat not so perfect on the iPhone since you have to adjust the screen manually if you don’t get the fullscreen option to work, which I didn’t at that time. The iPad became the perfect viewer though. And the computer screen in an modern browser was also ok. It looks a bit weird on the computer screen since the size is all blown up.

So the client got the sketch. In time. Excellent.

Then one night I couldn’t forget all those wonderful apps out there created with Cinder++ & openFrameworks. Both makes apps for iOS. And both are c++ libraries that you can use under Xcode on the mac (and windows with other IDEs of course). And they are “creative coding” which means that normal designers can handle them with minor difficulties. I downloaded both and started trying out Cinder++. I gave up after realizing how little I had done given the time I had spent and how c++ is NOT for me. The next evening I thought I’d give openFrameworks a quick look. I got hooked very fast. The syntax and structure of the files reminded so much of Processing that I made a port of my simple processingjs sketch in openFrameworks in really no time. It is not as intimidating as the c++ indicates.

So to conclude this I can finally say that Cinder++ is too hardcore for me. The front page of their site is so hard to resist and really inspiring. openFrameworks is really the way to run if the app should run on iOS or MacOSX given my Processing knowledge. For HTML5 and javascript sketches to be run on iPhone or other mobile devices or the web in general, processingjs is an obvious choice. Processing in general is absolutely fantastic with all the libraries and toxiclibs as the lead. Toxis libraries are available as javascript to some extent as well. So the limits to create are once more gone.

I thought I would post my progress on graphs during the summer but things took another direction. At least I got a picture for it. I will write more about that and marrying Jung with Processing later. Picture is NOT ProcessingJS. It sure could have though.

Because tonight I was amazed to see that ProcessingJS came to 1.0. Including the 3D! I cannot express what this means.

13 years ago I bought this book “Teach yourself VRML2.0 in 21 days”. I thought I would rock in three weeks time, but it never happened. The browser plug-ins that rose, crashed and burned finally killed my interest in 3d on the web. Tonight I start to wonder if the dream is about to wake again. By using Javascript, HTML5 the people at ProcessingJS got something amazing going. WebGl is needed however, but this is included in all the major browsers coming releases. So not to worry about that. I look forward to experiment something real out of this as soon as time will let me. Importing 3d models is not really going to happen anytime soon unless someone writes a cool thingy soon. So back to handwriting the models again and using generated basic models in the meantime.

Amazing times we live in.

I did this app (Todo Important & Urgent) a year ago for the iPhone. Trying to wrap my head around Objective-C was quite fun. Different way of thinking, but nice to deal with in general even if it got kind of messy at the end when it came to releasing it with provisioning etc. Gah. I realised quite quickly that I would not be doing Processing kind of things in Objective-C. So trying to make a simple kind of app and give it a twist was the choice for me. I think it worked even if the time spent making it hardly makes up for the result (or the money). Still, its visual and shows todo-items in a different way. And of course, it costs lowest-tier. Why else would I even try it out when I got Processing.  And then I found iProcessing. Not Objective-C but a great feeling to see Processing code in Xcode

The transparent window or shaped window was supposedly not easy to do. I found that by tweaking in the awt of Java it worked kind of as I would like it to do. On Windows XP. NOT on MacOSX. Also the shaped window which is demonstrated here. If labbed with some more you should find that you could do pretty much all you want to do, by tweaking the shaped window or tweaking the setOpaque or setOpacity which is two different things. Depending on what you want to do and depending on platform.

Note! This code does not work on MacOSX. Due to different Java implementations I guess. AND it’s hackish. No exception handling and there is alot of stuff that can go wrong I guess.

UPDATE! December 10 209, the java implementation was updated on MacOSX 10.6, to the current version available on windows. Nice and all, but the problem persists. Hmm. AWT? Workaround on the mac?

Read more on the subject right here:
http://java.sun.com/developer/technicalArticles/GUI/translucent_shaped_windows/#…

http://java.sun.com/docs/books/tutorial/uiswing/misc/trans_shaped_windows.html

Heres the code I got working on Windows XP:

import com.sun.awt.AWTUtilities;
import  java.awt.GraphicsDevice.*; // PC only
import java.awt.Shape;
import java.awt.geom.*;
import javax.swing.*;

public void init(){
// to make a frame not displayable, you can
// use frame.removeNotify()

frame.removeNotify();
frame.setUndecorated(true);

// addNotify, here i am not sure if you have
// to add notify again.
//  frame.addNotify();
// frame.removeNotify();
super.init();
}

void setup() {
size(200, 200);
noStroke();
frame.setAlwaysOnTop(true); // Alltid på topp
frame.setLocation(0,0);
AWTUtilities.setWindowOpaque(frame, false);
AWTUtilities.setWindowOpacity(frame, 0.9f);

Shape shape = null;
//shape = new Ellipse2D.Float(0, 0, frame.getWidth(), frame.getHeight());
//shape = new Ellipse2D.Float(0, 0, 200, 200);
//  shape = new RoundRectangle2D.Float(0, 0, 200, 200, 20, 20);
//shape = new Polygon(int[] xpoints, int[] ypoints, int npoints) ;
int[] myXes = new int[4];
myXes[0]=0;
myXes[1]=150;
myXes[2]=150;
myXes[3]=0;
int[] myYs = new int[4];
myYs[0]=0;
myYs[1]=20;
myYs[2]=180;
myYs[3]=0;
shape = new Polygon(myXes, myYs, 4) ;
AWTUtilities.setWindowShape(frame, shape);

}

void draw() {
setBackground(new Color(0,0,0,255)); // should work with normal background(255) command
//  frame.setVisible(true);

fill(255, 0, 0, 255); // the alpha is not in play at this point – but it come into play when doing per-pixel translucency
rect(23, 23, 54, 54);
}

Yes, Flash on the Beach 2009, and no its not just Flash developers. It was problably awesome. Sheesh, why can’t people tell me about these kinds of events a little bit sooner

Thought I’d post this little hack. I picked up the Terzidis book Algorithms for Visual Design (using Processing) and found a version of my own little 3D picking hack and thought that my hack might be ok. I never saw this as anything but a quick hack, but it has helped me alot, still does. I thought that it hopefully could help some people having difficulties solving the picking problem the “real” (and hard) way. It would have helped me.
Heres the code:

Originally posted December 5 2008

Today I moved from the Processing IDE to Eclipse as an environment for the 3D demo development. Hopefully this will mean a bit leaner development with better support from the IDE. There should be no apparent difference for the user.
I do this primarily because the processing IDE is nice for small sketches, but becomes cumbersome when the classes grow in numbers. But another important reason is that since I don’t see any real start for the ”real” java-demo in the Evolver-project I might as well take the demo seriously.

Very cool library for processing.
http://www.hardcorepawn.com/SuperPoint/