Kategoriarkiv: Programming

collage
iOS (xcode, iPhone & iPad), ProcessingJS, Programming

Prototyping for iPhone

Lämna en kommentar

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.

UPDATE 2013-01-11: I went Cinder finally anyway. Better performance and better tutorials to get me up and running.

Screen-shot-2010-08-15-at-20.02.04
Processing, ProcessingJS, Programming, Visualisation

Processing JS – 1.0 arrived – including 3D

1 kommentar

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.

todo-imagery.001
Programming, Thoughts and ideas

An App

Lämna en kommentar

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 :-)

windowProcessing
Processing, Programming

Transparent application window in Processing

3 kommentarer

windowProcessing

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);
}

bild-3
Programming

Simple picking in 3D

2 kommentarer

bild-3

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:

/**
* Selecting_objects_3D – easy way
* by Johan Wastring
*
* Quick and dirty way f picking in 3D if you have less
* than 200 objects in a list. It’s not fancy,
* but it works on small numbers of objects.
* Run sketch and pick with mouse to change the color.
*
*/
import processing.opengl.*;
int numOfShapes = 5;
Shape[] myShapes = new Shape[numOfShapes];
void setup() {
noStroke ();
size (400, 400, OPENGL);
// create your shapes in a list
for (int i = 0; i < numOfShapes; i ++) {
myShapes[i] = new Shape(i*20, 0, 0);
}
}
void draw() {
background(255);
// Call theSelector before you draw your shapes
theSelector();
// draw your shapes
for (int i = 0; i < numOfShapes; i ++) {
myShapes[i].display();
}
// a Camera well placed after all above
camera(
40, 0, -120,
40, 0, 0,
0, 1, 0 );
}
// the nice Selector
void theSelector() {
// SELECTION BY MOUSE
int tolerance = 10; // to make it easy to pick the shape
for ( int i = 0; i < numOfShapes; i ++) {
// get objects screenX coords
float checkX = myShapes[i].getScreenX();
// if it matches the mouseX decently proceed to get Y
if (checkX >= (mouseX-tolerance) && checkX <= (mouseX+tolerance)) {
boolean yes = true;
if (yes == true) {
// get the Y one
float checkY = myShapes[i].getScreenY();
// if that one matches decently with the mouseY do something with that shape
if (checkY >= (mouseY-tolerance) && checkY <= (mouseY+tolerance)) {
// make new cursor indicating selection is possible
cursor(MOVE);
if (mousePressed == true && mouseButton == LEFT) {
// here the action happens if it gets this far
myShapes[i].setSelected(i);
}
}
}
}
}
}
class Shape {
float x, y, z;
boolean isSelected = false;
Shape(float inX, float inY, float inZ) {
x = inX;
y = inY;
z = inZ;
}
void display(){
pushMatrix();
translate(x, y, z);
rotateX(HALF_PI/2);
stroke(255);
if (isSelected == true) {
fill(255, 0, 0);
}
else {
fill(0, 0, 255);
}
box(10);
popMatrix();
}
void setSelected(int i) {
this.isSelected = true;
println(”Got it ” + i);
}
float getScreenX() {
float f = screenX(x, y, z);
return f;
}
float getScreenY() {
float f = screenY(x, y, z);
return f;
}
}
bild-3
Programming

Move from Processing to Eclipse

Lämna en kommentar

bild-3

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.