Please disable AdBlock. CAN is an ad-supported site that takes hundreds of hours and thousands of dollars to sustain. Read More.
HOLO is a biannual magazine about emerging trajectories in art, science, and technology brought to you by the people behind CAN. Learn more!

PRTCL [iPhone, openFrameworks]

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.

//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.

//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.

//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.

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

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

//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

    • http://www.adornomedia.com David Hilowitz

      Very, very cool. Nice work!

    • http://kylemcdonald.net/ Kyle McDonald

      So good, I love the examples that came out of this group.

    • http://twitter.com/coffeeshopped Coffeeshopped LLC

      Very pretty and inspiring! I'm definitely going to consider using oF for the next piece in the Glory Math series (although I wish it had an Objective-C API).

    • mdub

      For the iphone app 3.1.3 update is needed…. cant update till now… is there any reason for that?

      Site rocks!
      desktop app rock!

    • http://www.creativeapplications.net Filip

      Hey, Thanks!
      Re the 3.1.3 required, no there is no reason =[. It's all part of the learning process. I have already added this to feature req. for ver 1.1 (http://nokahuna.com/projects/10961/tasks?catego…)

    • mdub

      yeah , thats cool – i can give u some ideas for improvements/features… (on the user side)… actually i am not a coder, i am more a user.

    • Nicholas Locascio

      Has anyone been able to get the source working for this? I downloaded the source for the iPhone version. I tried to run it in Xcode and I’m getting an error about a missing SDK. I checked the folders and anything not in the src folder (i.e. all of the GL and openFrameworks libraries) is missing. The files show up as red as they are not in the project. I know its been 2 years, but I’d really like to have this up and running in order to toy with it. I’m learning openFrameworks at the moment for my next iPhone project and it’ll be very useful if I could get this running. Thanks!

    • http://www.creativeapplications.net Filip

      @google-7d28159cbebe6c2510a0aa966accb30e:disqus here is version 2.0 for iPhone. Should work with 0.7 oF, otherwise let me know and I’ll make it work.

    • Nicholas Locascio

      Thanks, @filip:disqus  got it working now.