Here is a portfolio of a french web designer named Gildas Paubert experimenting with processing js. (go in the « play mode ! » section).

Continue reading.... Playing with Pixels [Javascript, Processing]

We are happy to announce that after months of hard work, and even more to come, Resonate Festival has launched it’s full site and tickets are now available for purchase.

‘Resonate’ is an initiative by “Magnetic Field B” in collaboration with CreativeApplications.Net and Dom Omladine in Belgrade. It’s core aim is to set a new standard in the arts industry by creating a new event platform for inspiration, networking, information, knowledge sharing and education. It brings together distinguished, world class artists, with an opportunity of participating in a forward-looking debate on the position of technology in art and culture. But Resonate is also much more than just a festival, expert seminar or exhibition of visual arts. It is a project broad enough to encompass areas ranging from software engineering to visual arts theory, but also to create a bridge between culturally separated segments of the artistic and intellectual scene through a comprehensive, multidisciplinary approach.

Taking place in Belgrade, Serbia from 16th – 17th March 2012, the event will give visitors an overview of current situation in the fields of music, visual arts and digital culture. Guest artists, lecturers and other participants have been chosen to represent the cutting edge of the contemporary creative industry in Europe. Interactivity is the key feature of contemporary communications and as a festival of new media, Resonate will be structured in such a way to reflect this fact on several levels. First of all, that means the interaction between audience and authors, or audience and art forms, as visitors of the festival will be active participants and will have contact with the authors through workshops, lectures, multimedia installations and the music program.

- 20 speakers from Europe, Asia and North America
- Collaborations with both national and international educational institutions
- Talks, workshops, panel discussions, performances and concerts
- Day and night programme (DJ Sets, Live Audio/Visual Performances and Concerts)
- In the heart of europe, city of history and culture – Belgrade

Featuring Nicholas Felton, Josh Nimoy, Jer Thorp, Greg J. Smith, Regine Debatty, Champagne Valentine, Niklas Roy, Benjamin Gaulon, Martial Geoffre-Rouland, Karsten Schmidt, FIELD, LAb[au], Rafaël Rozendaal, United Visual Artists, Written Images, Jürg Lehni, WARP, onedotzero and many more.

…and this is just the beginning. Yet to announce are night event details including 2 headlining acts, audio-visual performances, DJs, workshops, screenings, panels and more. You will not be disappointed!

Tickets are now on sale (Only €40.00). Book now and save 50% on the door price. Only available for few weeks and in limited numbers.

Dates: 16th – 17th March 2012
Location: Belgrade, Serbia 

Stay up to date with developments by following us on Facebook | Twitter or Subscribe to Newsletter.

Upverter is a web service, similar to GitHub that allows you to discover, share and work on hardware.

Taking full advantage of HTML5, the included editor has all the basics you have come to expect such as undo, redo, rotating, versioning, and sharing designs. Create your schematics on an infinitely large canvas and organize your designs how you want to. Also included is their crowd-sourced part library to choose your parts, or add your own. Get insight into what parts are the most popular and cost efficient.

Here is an embeded drawing of Arduino-Uno:

Continue reading.... Upverter [News]

SpellTower is a new iPad game by Zach Gage, the name behind the titles such as Halcyon, Bit Pilot, and Unify. SpellTower is a word puzzle game that combines the traditional word making with Tetris style block physics. In the game, the task is to make long words or use bonus tiles to clear extra letters from the screen. As you work, more word tiles rise from the bottom of the screen, and it’ll take all of your word wits and tactical know-how to keep them down. If any of the letters make it to the top row, it’s game over. After playing the game for few days now, I asked Zach what was the inspiration and the reasons for making SpellTower..

Continue reading.... SpellTower [iPad, Games, openFrameworks]

Created by a newly formed sister company of Aircord.jp: PPP, TSUMIKI is a new series of toys that incorporate computer vision to both recognise physical blocks and project content onto them.

The idea behind PPP (Permanent Play Project) is to explore new ways of “playing” for the next generation.  They rearrange longtime beloved toys such as blocks to bring a whole new value to them. In TSUMIKI, various forest animals appear on the blocks according to the ways you stack them. When two sets of blocks are placed close to each other, it would be in the communication mode, where the animals greet to each other or play together. You can also play with numbers using the toy blocks. When you place the blocks in an order, a number would appear each time at random and their equation is projected on the blocks.

Continue reading.... TSUMIKI [c++, Objects]

Generative Art: A Practical Guide using Processing is a book by Matt Pearson, published by Manning. The book offers a guide to creating generative graphics for print, video and the web whilst at the same time addressing the philosophy and practice of using a programming language as an artistic tool. Included is a beginners guide to Processing, and applied tutorials on subjects such as Perlin Noise, Randomness, Fractals, Emergence, Agent Oriented Programming, Three Dimensional Drawing and Cellular Automata. The book also features the work of Robert Hodgin, Jared Tarbell, Aaron Koblin, Casey Reas and many more of the finest contemporary generative artists.

The book starts with foreword by Marius Watz giving a very good overall introduction to computers in the arts especially the history of processing Processing. This is followed by Matt setting context for the reader, giving his background and how his interest in generative art developed. My favorite “about this book” section, positions the book in terms of how it should be read and making clear that by no means the book attempts to teach you how to be an artist, but rather how to think about the process:

If this book were to be just a collection of recipes for you to follow, to produce certain aesthetically pleasing results, it would be missing the point—not to mention hugely arrogant. The appreciation of art is entirely subjective, so if I were to declare that there is a right way to go about creating art, I would be in need of a slap. 

Following chapters are about methods and algorithms, both existing and about creating your own. Very much about building a generative machine, Matt has a great skill in making it all sound very easy. This leaves you wanting to launch Processing and begin playing right away. Whether this is related to Matt just being British but the book is filled with small fragments of humor, inserted at places where things are just about to get serious and complicated. Matt’s tone makes it an easy and fun read and where other books of this nature tend to be either slightly too technical or conceptual, Matt seems to have found the perfect middle ground, being both practical but also pointing out the technical and conceptual issues that should be addressed. This book will by no means provide you with great technical knowledge or set a conceptual ground for your work. Instead, you will quickly become accustomed with the basic principles and algorithms used in the making of generative art together with most certain desire to learn more.

If you are new to creative code and have always been interested in how some of these images have been created, Generative Art: A Practical Guide is a fantastic start. Also those that have some programming skills may uncover some techniques that have not been apparent before.

There is no right or wrong way to be a generative artist. There are no rules or recipes. Generative art is about the organic, the emergent, the beautiful, the imprecise, and the unexpected. It’s about exploring these within a world of logic and precise mechanics. This delightful paradoxicality makes it an almost Zen approach to computing: playful and organic, free of restraint, and inviting a natural flow. 

Contents:

• Introduction to the principles of algorithmic art
• Brief Processing language tutorial
• Establishing artistic “ground rules” for a new work
• Using random, semi-random, emergent and fractal processes
• Finding fresh approaches to the discipline of programming
• 32-page full-color section of beautiful artwork

Generative Art: A Practical Guide using Processing is available from:  amazon.com, amazon.co.uk, amazon.ca, amazon.cn, amazon.fr,amazon.de, amazon.co.jp, Manning (eBook), bulkbuy discounts

+ Every print copy includes the offer of a free eBook (PDF) upon registering your book with Manning – great for having it on your iPhone/iPad/Android device for on the go.

Free content + source code of the examples featured in the book is available on Matt’s website.

Giveaway

People at Manning were kind to send us an additional copy to give away to our readers. All you have to do is tweet this post with comment by clicking on the link below. Best comment will be selected by Matt and myself and one lucky winner will receive the book (P&P included). Contest now closed.

Winner is Richard from Birmingham.

(Make sure you follow @creativeapps so we can DM you if you are chosen)

1 Winner will be chosen by Matt and Filip on Thursday 25th August.

Conditions:

1. Postage and Packing is included. We just need your address.

2. Competition is open to everyone and anyone but you must be over 18 years of age. There will be a total of ONE winner for this competition.

3. Winner will be selected by Matt and Filip.

4. Winner will be contacted on twitter to provide their full name and postal address. If they wish to pass on the book to another person, we will need their name and postal address. If the winner does not respond by the following week we will pick another winner.

5. You can post as many entries (tweets) as you like.

SMS to Paper Airplanes is a project by Christian Groß realised within a class called „program development“ at the university of applied science in Potsdam. The task was to translate an existing data set into a new audio/visual medium, using Processing. Christian visualized sms messages using physical airplanes as an analogy. The properties of airplanes are defined by the direction of message, the length, its size and the amount of positive emotional words are represented within the amounts of folds.

Continue reading.... SMS to Paper Airplanes [Processing]

Written by Joshua Noble, with images by Robert Hodgin

This article is going to cover two things in great detail: vertices and meshes and how they are handled in Cinder. There are a few different names for things that may be new to you in this tutorial which I’ll lay out for you right at the beginning: vertices, mesh, TriMesh, VboMesh, and VBOs. If any of those are already familiar to you and you simply want implementation details on how they work, feel free to skip ahead or around, I won’t be offended. For those of you who want more background, we’ll proceed in an orderly fashion.
So, let’s begin at the beginning: the vertex. In Cinder we use the OpenGL coordinate system which is a right-handed system. Initially the world is oriented at the upper left hand corner of your screen, so the x Axis points right, y Axis points downward, z Axis points into the screen (away from the user). A vertex is a point in geometrical shape, or, a vertex is a point in 3D space that has x, y, and z properties that determine where it is in relation to the 0, 0, 0 point (you can think of this as the center) of the world. For instance, a vertex with the values 100, 100, 100, describes a location 100 pixels to the right on the x axis, down on the y axis, and back on the z axis from the origin of the world in which it is located. In your Cinder application, unless you change it, the world is oriented at the upper left hand corner of your screen. All shapes are the result of the connections between vertices. So, a line is made up of the connections between two vertices, a pyramid is a construction made of the connections between five vertices, a cube is made up of the connections between eight vertices.

What do these vertices look like in code? Something like this:


gl::vertex( Vec3f(300, 100, 0) ); // creates an OpenGL vertex from a Vec3f


Those vertices are passed to your graphics card and your graphics card fill in the spaces in between them in a processing usually called “the rendering pipeline”. The rendering pipeline goes more or less like this:
1. Say how you’re going to connect all the points.
2. Make some points.
3. Say that you’re done making points.
Saying it in code, and more specficially in Cinder code, looks like this:


glBegin(GL_QUAD_STRIP); // start drawing
gl::vertex(Vec3f(20, 20, 0)); // repeated a lot of times with different positions
glEnd(); // stop drawing


You may be thinking: “I’ll just make eight vertices and voila: a cube.” Not so quick. There’s a hitch and that hitch is that the OpenGL renderer has different ways of connecting the vertices that you pass to it and none are as efficient as to only need eight vertices to create a cube. You’ve probably seen a version of the following image somewhere before:

Creating eight vertices and expecting the GL_QUAD_STRIP to connect them is going to lead to something looking like this:

Why is that you ask? Well, first off because we used the GL_QUAD_STRIP but it’s also because there isn’t an easy way to tell your graphics card that you want to connect all those points into a cube. Generally you have to create your points to fit the drawing mode that you’ve selected because of what’s called “winding”. A vertex gets connected to another vertex in the order that the mode does it’s winding and this means that you might need multiple vertices in a given location to create the shape you want. The cube, for example, requires eighteen vertices, not the eight that you would expect. If you note the order of vertices in the GL chart above you’ll see that all of them use their vertices slightly differently (in particular you should make note of the GL_TRIANGLE_STRIP example). Drawing a shape requires that you keep track of which drawing mode is being used and which order your vertices are declared in. If you’re thinking: “it would be nice if there were an abstraction layer for this” you’re thinking right. Enter the mesh, which is really just an abstraction of the vertex and drawing mode that we started with but which has the added bonus of managing the draw order for you. That may seem insignificant at first, but it provides some real benefits when working with complex geometry.

TriMesh

The TriMesh represents a series of vertices connected with the same connection algorithm as the GL_TRIANGLE_STRIP. It’s a convienent way to keep track of multiple complex objects, draw and scale them easily, and manage which vertices create which faces of a model. Let’s get the simplest example out the way first, drawing a square consisting of two triangles. This requires, as you’d imagine, four vertices that represent the vertices of each triangle.


// Position and Color for the four corners
mesh.appendVertex( Vec3f( 10, 10, 0 ) );
mesh.appendColorRGB( Color( 1, 0, 0 ) );
mesh.appendVertex( Vec3f( 10, 300, 0 ) );
mesh.appendColorRGB( Color( 0, 1, 0 ) );
mesh.appendVertex( Vec3f( 300, 300, 0 ) );
mesh.appendColorRGB( Color( 0, 0, 1 ) );
mesh.appendVertex( Vec3f( 300, 10, 0 ) );
mesh.appendColorRGB( Color( 0, 0, 0 ) );

// Two triangles to create our square
mesh.appendTriangle( vIdx0, vIdx1, vIdx2 );
mesh.appendTriangle( vIdx0, vIdx2, vIdx3 );


So far, so good. Now, let’s extend that a little further and build something in 3D. A simple cube should suffice to demonstrate how the mesh connects all the vertices that it contains. At first glance, the next block of code (140 lines) might seem daunting, but all we are doing is repeating the previous code block 6 times, once per side. Since each side is comprised of 2 triangles, we draw a total of 12 triangles.


// Create the points of our cube
Vec3f v0(-100,-100,-100);
Vec3f v1( 100,-100,-100);
Vec3f v2( 100, 100,-100);
Vec3f v3(-100, 100,-100);
Vec3f v4(-100,-100, 100);
Vec3f v5( 100,-100, 100);
Vec3f v6( 100, 100, 100);
Vec3f v7(-100, 100, 100);

}


Accessing the vertices in the TriMesh is a little different than you might imagine it at first, because you can’t directly access the vertices of the mesh and then alter them. Instead, you make a copy of the vertices using getVertices(), which returns a Vector of the vertices contained by the TriMesh as Vec3f objects and then modifying the values in that vector. To update the vertices in the mesh itself you then need to clear the mesh and append all the vertices again. The same goes for any modifications to the RGB color array as well. Look at the following:


void TriMeshSampleApp::update()
{
if( mMesh.getNumVertices() == 0 ) return;

// go to the next triangle pair
j+=4;
}
}


The result?

Want to use a gl::Texture to texture the cube? Not so difficult. First, you need to set the texture co-ordinates of each vertex in the TriMesh. This requires that you use texture coordinates, not space coordinates or pixel co-ordinates. So, you may think your image is 500 pixels high and 500 pixels wide, but texture co-ordinates say that your texture is 1×1 with what you think of as upper-left corner (0, 0), still being (0, 0), but the bottom-right corner being (1,1). All the values between the 0, 0 and 1,1 points are scalar, meaning that 0.5 will be the midpoint of the image. So if you assign the texture co-ordinate 0.5, 0.5 to a vertex, the middle of the image will appear at that point. The picture below will hopefully help clarify this:

So, now, how to put our Trimesh and gl::Texture together? When creating the vertices using the appendVertex() and appendColorRGB() methods, use the appendTexCoord() method to create a texture co-ordinate. This indicates the location in the texture that you want to appear at that location in space:


mesh.appendVertex(v0);
mesh.appendColorRGB( Color(1, 0, 0) );
mesh.appendTexCoord(Vec2f(0, 0));
mesh.appendVertex(v1);
mesh.appendColorRGB( Color(0, 0, 1) );
mesh.appendTexCoord(Vec2f(1, 0));
mesh.appendVertex(v2);
mesh.appendColorRGB( Color(1, 0, 0) );
mesh.appendTexCoord(Vec2f(1, 1));
mesh.appendVertex(v3);
mesh.appendColorRGB( Color(0, 1, 0) );
mesh.appendTexCoord(Vec2f(0, 1));


Now, to apply a gl::Texture to this TriMesh, call gl::Texture bind(), draw your TriMesh, and then call gl::Texture unbind() and you’re done.


tex.enableAndBind();
gl::draw(mesh);
tex.unbind();


You can even animate the positions of the texture coordinates by copying, modifying, and then re-appending them in the same way that the vertices and RGB coordinates were updated. But there’s more to the TriMesh than just a nice way to store all the vertices that you create because, let’s face it, lining up vertices is a drag and there are better and more fun ways to make vertices, for instance, using a 3d modeling program. To that end, you can import and export OBJ files. So, in my favorite 3d modeling program (the opensource and free one) Blender, I’ll create a classic platonic solid, the isodecahedron, and then export it as an .obj file:

Now I can import it using an instance of the ObjLoader class like so:


ObjLoader loader( loadResource( SOLID ) );
loader.load( *mesh );


and draw it to the screen by passing it to gl::draw():


gl::draw(mesh);


Here it is with some random colors applied to it:

You can even manipulate it and export it using the TriMesh::writeObject() method:


mesh.write( writeFileStream(meshFileName, true); );


Now, if you thought that was all there was to working with meshes in Cinder you would be wrong. As I mentioned earlier, the way that geometry is drawn on the graphics card is by sending points and telling the card how to connect those points. This might remind you a little of how the Textures work in OpenGL: load some data up there, draw it by referring to it using its TextureId. So then, naturally you might wonder, what if we just stored the points on the card? Introducing the Vertex Buffer Object, aka VBO:

VBO

A VBO is a way of storing all of the data of vertex data on the graphics card. You’ve perhaps heard of Vertex Arrays and Display Lists and the VBO is similiar to both of these, but with a few advantages that we’ll go over very quickly. Vertex Arrays just let you store all the vertex data in an array on the client side, that is, on the CPU side and then send it to the graphics card when you’re ready to draw it. The downside of that is that you’re still storing the data on the client side and sending it over to the graphics card. So, instead of making all of our vertex data in what’s called “immediate mode”, which means between a glBegin() and glEnd() pair, you can just store vertex data in an arrays and you can draw geometric primitives by dereferencing the array elements with array indices. The Display List is a similar technique, using an array to store the created geometry, with the crucial difference that a Display List lives solely on the graphics card. This means that once you’ve created the vertex data for geometry, you can send it the graphics card and draw it simply by referencing the id of the stored data. The downside is that display lists can’t be modified. Once they’ve been sent to the card, you need to load them from the card, modify them, and then resend them to the card to see your changes applied. Since one of the conveniences of moving things to the graphics card is reducing the amount of traffic between the graphics card and the rest of your system. The VBO operates quite similarly to the Display List, with the advantage of allowing you to modify the geometry data on the graphics card without downloading all of it at once.

Now, since we’re focusing on Cinder, we’ll be focusing on the VboMesh class that Cinder uses to wrap the core OpenGL functionality. When you create a VboMesh, much like in the TriMesh, you need to decide whether the mesh is going to contain color information, texture coordinate information, but, there is another element to the VboMesh: whether the data is dynamic. Thius is particularly important because it determines whether you’re able to manipulate vertices in the mesh after creating it and it matters because using dynamic data means that the VboMesh will generate two copies of the data: one on the graphics card and one in the memory of your application. So, if you don’t need to update the data after it’s been loaded then you you don’t need to do anything special and if you do want to create dynamic data, you’ll need to create a gl::VboMesh::Layout object and pass it to the VboMesh. So, for instance, if you want static positions and static colors you would create a Layout object with those properties set on it, declare a VboMesh and then assign it to the result of a call to VboMesh(). This is because the VboMesh, like so many other things in Cinder, is a shared pointer, which means that it has to be created before you can use it, you can return it from a method without problems, and also that you don’t have to worry about deallocating the VboMesh once you’ve created it.
Here’s one of the constructors for the VboMesh:


VboMesh( size_t numVertices, size_t numIndices, Layout layout, GLenum primitiveType );


so that would be used like this:


gl::VboMesh mesh;
gl::VboMesh::Layout layout;
layout.setStaticPositions();
layout.setStaticColorsRGBA();
mesh = gl::VboMesh( 24, 20, layout, GL_QUADS );


Now, the numVertices and numIndices need a little explanantion. You’ll recall from the TriMesh that the number of indices and the number of vertices aren’t directly correlated. You’ll almost always need to create more indices than vertices because there are more indices than discrete locations required for most geometry, but that depends on what kind of geometry you’re creating. This brings us to one of the more confusing elements of working with VboMesh::Layout, which is the idea of indices and dynamic indices in particular. The indices set the location of an Vec3f in the order of drawing elements. Remember how in the first example before introducing the TriMesh, you saw how the order that the vertices were created in affected how they were connected the other vertices? Well, the index for a vertex in the VboMesh works much the same way, indicating where the vertex is in relation to the other vertices and how it should be connected to them. In the graphic below the ways to draw a square using GL_QUADS is shown at the top and left and using GL_TRIANGLE_STRIP at the bottom and right.

Cinder always requires that you create the indices for a mesh before you create the positions for that mesh, because conceptually a vertice without a index can’t be properly integrated into the mesh and vice versa. The two modes of storing positions means that the process for working with VboMeshes that dynamic positions versus those that have static positions is slightly different. We’ll do the static first:


gl::VboMesh::Layout layout;
layout.setStaticIndices();
layout.setDynamicColorsRGBA();
layout.setStaticPositions();

int vertCount = 24;
int quadCount = 6;
mesh = gl::VboMesh(vertCount, quadCount * 4, layout, GL_QUADS);


When you’re using static positions you can simply assign positions using a vector of Vec3f objects and calling VboMesh::bufferPositions(). So, our VboMesh creation code looks like this, note the indices being assigned before the positions:


vector indices;
int i=0;
while(i < 24){
indices.push_back(i);
i++;
}

// now we can buffer positions
mesh.bufferPositions(positions);


This creates the same old boring looking white cube. Until we update the colors. This requires retrieving the color values from the mesh and using an iterator to examine the values, which is a familiar pattern in Cinder. The VertexIter object is created to iterate over all the values in the mesh, you assign to the result of VboMesh::mapVertexBuffer() like so:


void VboTutorial::update()
{
float g = sin(getElapsedSeconds());
float b = cos(getElapsedSeconds());
gl::VboMesh::VertexIter iter = mesh.mapVertexBuffer();
for( int x = 0; x < 24; ++x ) {
//positions.at(x) *= 1.001;
iter.setColorRGBA( ColorA( 1 - (g+b/3), g, b, 0.5) );
++iter;
}
}


Dynamic positions are handled in the same way as dynamic colors. To create the dynamic positions for the simple cube in the VboMesh, setting up the VboMesh is going to look familiar, assigning the indices via a vector of uints, but the actual updating of the positions is going to look quite different because you can’t pass a position values into the VboMesh by using VboMesh::bufferPositions(). Instead, you create an VertexIter to iterate over and modify the positions:


void VboTutorialApp::setup()
{
gl::VboMesh::Layout layout;
layout.setStaticIndices();
layout.setDynamicColorsRGBA();
layout.setDynamicPositions();

mesh.bufferIndices(indices);
}


Note that creating the VboMesh only buffers the indices and not any positions. Creating position data is done via a VertexIter, for instance, in the update() of the application:


void VboTutorialApp::update()
{
gl::VboMesh::VertexIter iter = mesh.mapVertexBuffer();
for( int idx = 0; idx < numberOfVertices; ++idx ) {
iter.setPosition( Vec3f( xVal, yVal, zVal) );
++iter;
}
}


The positions are automatically generated to be unit vector values, stored both on the graphics card and in the application memory, When you modify the VertexIter you mark a certain range of data as needing to be uploaded to the graphics card. For those interested in the underlying functionality, this uses the stored local copy of the vertex and index information to pass to glBufferDataARB(). The values are only uploaded to the card when index, color, or position data is modified saving time and space on any draw operation when changes haven’t been made. This is an important nuance because the idea of keeping records both on the graphics card and in the application memory is used throughout the VboMesh, color data, texture positions, and even indices. If you create dynamic texture positions using either setDynamicTexCoords2d() if you’re using 2d coordinates or setDynamicTexCoords3d() if you’re using 3d coordinates, you can reposition a texture on a mesh dynamically. There are some key differences between 2d textures and 3d textures that you can read up more on here . To move a texture around the x axis of the mesh, create a VertexIter and then modify the texture using setTexCoord3d2() or setTexCoord2d2() depending on the texture type that you’re using. For instance, shifting a 2d texture around:


// dynmaically generate our new positions based on a simple sine wave for mesh
gl::VboMesh::VertexIter iter2 = mVboMesh2.mapVertexBuffer();
for( int x = 0; x < VERTICES_X; ++x ) {
for( int z = 0; z < VERTICES_Z; ++z ) {
float height = sin( z / (float)VERTICES_Z * zFreq + x / (float)VERTICES_X * xFreq + offset ) / 5.0f;
iter2.setPosition( Vec3f( x / (float)VERTICES_X, height, z / (float)VERTICES_Z ) + Vec3f( 0, 0.5, 0 ) );
iter.setTexCoord2d2( Vec2f( x / (float)VERTICES_X, z / (float)VERTICES_Z ));
++iter2;
}
}


You can also copy the values from one VboMesh to another, retrieving values from a mesh using the VboMesh::getIndexVbo() to get the indices from a mesh and VboMesh::getStaticVbo() to get the vertex data from the mesh. The VboMesh can be constructed like so assuming that there’s another VboMesh called otherMesh:


mesh = gl::VboMesh( numberVertices, numberQuads * 4, otherMesh.getLayout(), GL_QUADS, &otherMesh.getIndexVbo(), NULL, &otherMesh.getDynamicVbo());


You may be noticing the last two parameters, which are pointers to either the static or dynamic VBO data from the source VBO.


VboMesh( size_t numVertices, size_t numIndices, Layout layout, GLenum primitiveType, Vbo *indexBuffer, Vbo *staticBuffer, Vbo *dynamicBuffer );


Which you use will depend on how the source has been created, using the dynamic properties from a source VBO requires that the source has dynamic positionsVBO with dynamic properties. Using the static values from a buffer means copying the values over so that they can be manipulated independently. This means that the target mesh will have the same properties as the source mesh until they are altered. Using the dynamic properties of a mesh means that the target mesh is using the same data as the source and changes to the source will be reflected in the target mesh. This makes it easy to reflect changes across meshes, for instance color effects or textures, but makes your meshes dependent on the source mesh.

For the last trick of interoperation between the mesh types in Cinder, a VboMesh can load a mesh from a TriMesh instance, which means that you can easily import and export an .obj file to a VBO with ease, for instance:


ObjLoader loader( loadResource( OBJ_FILE_RESOURCE ));
loader.load(&trimesh);
gl::VboMesh mesh = gl::VboMesh(trimesh);


And that gets you from a modeling tool to a VBO quite painlessly.

As a final demonstration of how much is built into the VBO and mesh handling in Cinder you can easily create normals and set the normals for a VBO using the VertexIter object and its setNormal() method. A normal is simply a vector that’s perpendicular to the face of a triangle or quad in a mesh or other piece of OpenGL geometry and they’re quite important if you plan to use lighting of any kind when rendering a TriMesh or VBO to the screen. The normal essentially tells OpenGL how any light is to be reflected off of a particular face. This allows you to create shading, depth, and other real world lighting effects. It’s also a little out of the scope of this guide, so I’ll point you to a chapter from OpenGL Programming aka “The Red Book” Using the VertexIter allows you set the normal position for each vertex in a VBO (or in a TriMesh for that matter) by iterating through the vertices of the VBO and setting each normal with an appropriate value. The algorithm here was taken from the http://www.opengl.org/wiki/Calculating_a_Surface_Normal OpenGL wiki which explains the algorithm in a little bit greater detail, as well as providing an alternative algorithm.


Vec3f v0, v1, v2;

}
}
}


So hopefully you’re feeling a little more comfortable not only with creating and manipulating meshes in Cinder, but also with underestanding what some of the underlying mechanics of a mesh and OpenGL geometry are as well. This guide has barely scratched the surface, but it should be enough to get you started. For more information you can check the excellent references at songho or to the reference for the TriMesh and VBO mesh. Have fun, and make something beautiful.

–

Joshua Noble is a writer, designer, and programmer based in Portland, Oregon and New York City. He’s the author of, most recently, Programming Interactivity and the forthcoming book Research for Living.

After a highly successful first edition in 2010, Processing Paris are proud to announce the second installment of their series of workshops for creatives working with Processing. Three Processing workshops have been organised :

- A beginners workshop with Christian Delecluse.
- An intermediate workshop with Julien Gachadoat.
- A masterclass with Hartmut Bohnacker. **

Date : 22/23 April 2011
Price : 60, 75 & 90 Euros respectively.

Where : La Fonderie de l’Image, 83 Avenue Gallieni, 93170 Bagnolet, Paris, www.lafonderiedelimage.org

How : For further information and to register, please send the team an email stating your full name, address and which workshop you would like to attend to : info@freeartbureau.org

You may also consult the web site for details on this and other events : www.processingparis.org

Please note that due to limited places it is imperative to register beforehand to ensure a place. The deadline for registering is April 15.

The workshops run from10:00 to 18:00. No need for a computer although you are welcome to bring your own. For the advanced class, you will require a very good level of English. Both the beginners and intermediate class will be taught in French. Full information of the workshops’ content will be communicated very soon.

Processing Paris is an initiative organised by FAB, in collaboration with La Fonderie de L’Image.

FAB (The Free Art Bureau) is a non-profit organisation set up for artists & designers using code as their main creative tool and medium. They organise workshops, conferences, forums, exhibitions as well as support & document work specifically created with code. They believe in sharing, educating, innovating and promoting. They believe that being free is an essential way of life and work.

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