WB_Render render;
HE_Mesh mesh;
void setup()
{
    size(450, 400);
    HEC_Geodesic geo = new HEC_Geodesic(60, 1);
    mesh = new HE_Mesh( geo );
    render = new WB_Render( this );
}

All the code to render the mesh to the screen goes inside draw(). This is a list with the descriptions of the most important methods for the WB_Render class. I’ve used them all to create the image below.

• render.drawFaces( mesh ) – Draw the faces of the mesh object. You’ll normally use this with fill() and noStroke().
• render.drawFacesSmooth( mesh ) – Draw the faces using the vertex normals. This is a great method if you need to render a really smooth organic shape. You’ll normally use this with fill() and noStroke().
• render.drawFaceNormals( 20, mesh ) – Draw the face normals of the mesh. The first parameter is the length of the normal. You’ll normally use this with noFill() and stroke(). This is a useful method for debugging.
• render.drawEdges( mesh ) – Draw the edges of the mesh. You’ll normally use this with noFill() and stroke().
• render.drawVertices( 10, mesh ) – Draw the vertices of the mesh, a useful method for debugging if you want to create your own meshes from scratch. The vertices are rendered as cubes, the first parameter sets the size for these cubes. You’ll normally use this with noFill() and stroke().
• render.drawHalfedges( 10, mesh ) – Draw the halfedges of the mesh, again a useful method for debugging. The vertices are rendered as cubes, the first parameter sets the size for these cubes.

Download

Download the example for rendering with the WB_Render class.

ToxiclibsSupport gfx;
Voronoi voronoi;

The next thing you’ll need to do is creating the ToxiclibsSupport object, which will be used to easily draw the voronoi regions to the screen and the Voronoi object that will hold the points. The full code for setup() will look like this:

void setup()
{
    size(450, 360);  
    gfx = new ToxiclibsSupport( this );
    voronoi = new Voronoi();  
    for ( int i = 0; i < 50; i++ ) {
        voronoi.addPoint( new Vec2D( random(width), random(height) ) );
    }
}

To draw the voronoi diagram to the screen, you’ll need to use the getRegions() method on the voronoi object. This returns an ArrayList of Polygon2D objects. If you iterate through this ArrayList, you can draw each polygon to the screen using the Polygon2D() method on the ToxiclibsSupport object. This piece of code goes inside draw().

for ( Polygon2D polygon : voronoi.getRegions() ) {
    gfx.polygon2D( polygon );
}

If all goes well, your image should look like the one below. The code for this sketch can be found in the folder voronoi001.

Drawing Points

The easiest way to draw the points that make up the voronoi diagram is to use the getSites() method of the Voronoi class. This method returns an ArrayList of Vec2D objects that hold the location of each point. I’ve used green to render these points to the screen in the image below. The red points are rendered using the getCentroid() method of the Polygon2D class, which returns the polygon’s centre of mass. You can find the code for this example in the folder voronoi002.

Creating a Painting

The next thing I did was stealing the image of Mona Lisa from Wikipedia so I could use it as a reference image to create the voronoi painting. The technique I used for picking the colors to fill the voronoi regions is the same as I’ve used in my tutorial on Painting with Processing. The code for this sketch can be found in the folder voronoi_monalisa_001.

In the image above, I’ve used the getCentroid() method of the Polygon2D class to pick the color. This is the fastest way to create the painting, but it doesn’t use the points that make up the voronoi diagram. The centre of mass of the polygon is usually close to the voronoi point, as you can see in the image with the red and green dots, but they are not the same.

The first thing I tried to use the colors below the real points is collecting them in an array using voronoi.getSites() before drawing the polygons to the screen using voronoi.getRegions(). The result wasn’t quite what I expected. The getSites() and getRegions() don’t return the voronoi regions and points in the same order. You can see the result in the image below, the code is available in the folder voronoi_monalisa_002. The second method I’ve tried was somewhat similar an can be found in the folder voronoi_monalisa_003.

The only way to use the real voronoi points is to use a nested loop that iterates over all regions and checks all points if they are inside the polygon. This might be ok if you only have 50 points, but the function gets really expensive if you use a few thousand points. But you get the best possible result, as you can see in the image below. The code for the final image can be found in the folder voronoi_monalisa_004.

Download

The examples for this Toxiclibs tutorial are available for download so you can create your own voronoi paintings. Have fun coding!

The Basic Example

I usually start by creating a reference image with black and white pixels. This image contains the words I want to render on the screen. For performance, this image should be kept small. I generally use images of 192×108 pixels. Renders of my sketch are High Definition video at 1920×1080 pixels. Each pixel in the reference image stands for an area of 10 × 10 pixels in the final image.

In the basic example, I created an image with the word “BUBBLES”. The particles move from the bottom of the screen to the top. The size of the particles is set by the speed of the velocity vector. The bigger the particles are, the faster they go to the top. This is an easy trick to create a sense of depth without using 3D. The update() method in the Bubble class checks if in which 10 × 10 area of pixels the location vector is, and maps it to the pixel in the reference image. If that pixel is black, the bubble grows and is filled. If the pixel is white, the bubble is rendered as an outline. The video below shows what the final sketch will look like.

If you want to know a little more about how the Bubbles class, I suggest you to read these articles I wrote during my Processing Month.

• Day 7 – Bubbles
• Day 8 – Animating Bubbles

The Advanced Example

Rendering the sketch from an image is somewhat limited. You always need to go back to Photoshop or another image editor if you want to render another text. In the advanced example, I’ve used the ControlP5 library by Andreas Schlegel to create a small interface so I can easily interact with the sketch. The finished interface looks like this:

The reference image is rendered on the fly when you enter text into the textfield. I’m using a PGraphics object to do this. The code for rendering text on a PGraphics object looks a lot like what you would normally do in Processing, but with the name of the object in front of every function. This is the code I’ve used to create my object.

void generateReference()
{
    reference.beginDraw();
    reference.noStroke();
    reference.background( 255 );
    reference.fill( 0 );
    reference.textAlign( CENTER );
    reference.textFont( font, 48 );
    reference.text( theText, 96, 70 );
    reference.endDraw();
}

In the basic example, you needed to press keys to save an image or movie. In the advanced example, you can use the buttons on the interface. Be sure that you hide the reference image when you save files, otherwise it will be visible.

Downloads

Download the examples and start doing some typographic experiments with Processing. Have fun!

FUCKU/LOVEU by Nena Driehuijzen

The Birds, The Bees by Stefan Corthals

The Fish is Gone by Tom Vanhooreweder

Shine by René Rieger

The Articles

This post will make it easy for you to get an overview of Processing Month. Here are the links to all articles.

• Day 1 – Connecting Points, Part 1
• Day 2 – Connecting Points, Part 2
• Day 3 – Triangle Grids
• Day 4 – Stars
• Day 5 – Square Flowers, Part 1
• Day 6 – Square Flowers, Part 2
• Day 7 – Bubbles
• Day 8 – Animating Bubbles
• Day 9 – Circular Pixels
• Day 10 – Painting, Part 1
• Day 11 – Painting, Part 2
• Day 12 – Painting, Part 3
• Day 13 – Regular Polygons
• Day 14 – Manipulating Circles
• Day 15 – Rounded Rectangles
• Day 16 – Building a Spaceship
• Day 17 – Falling Asteroids
• Day 18 – Finishing the Game
• Day 19 – Exporting PDF Files for Lasercutting
• Day 20 – Optimize your Workflow with Processing Tools
• Day 21 – Fitting Rectangles
• Day 22 – Patterns
• Day 23 – Client/Server Part 1
• Day 24 – Client/Server Part 2
• Day 25 – Circular Bar Charts
• Day 26 – Data Visualisation
• Day 27 – Mesh Basics
• Day 28 – Distorted Grids
• Day 29 – Distorted 3D Mesh
• Day 30 – Particle System
• Day 31 – Building Interactive Installations with OpenCV

OpenProcessing

Some of the examples are also available on my OpenProcessing Portfolio. Here’s the full list.

• Connecting Points, Part 1
• Connecting Points, Part 2
• Triangle Grid
• Stars
• Square Flower
• Square Flowers
• Bubbles
• Painting, Part 1
• Regular Polygons
• Manipulating Circles
• Rounded Rectangles

Download

I made a zip-file with all sketches I made during Processing Month. This will be a lot easier than downloading all examples one by one. Download all examples for Processing Month.

Setting up OpenCV

Inside the setup() function, we need to setup OpenCV and tell it what we’re going to track. I have set OpenCV to capture the video from my webcam at a resolution of 640 × 480 pixels. This should be enough for most installations. You can use a higher resolution if your camera supports it, but this will require more processing time for the CPU. The last OpenCV method I used in the setup() of my sketch is cascade(). I’m using one of the standard cascades (CASCADE_FRONTALFACE_ALT) to track a face in a video. This method can also be used to load a custom xml file with a description for tracking objects.

size( 1024, 768 );
opencv = new OpenCV( this );
opencv.capture( 640, 480 );
opencv.cascade( OpenCV.CASCADE_FRONTALFACE_ALT );

Preparing the Image

The next thing we need to do is to prepare the image from the camera for face tracking. This code below should be the first part inside the draw() function. The read() method will get the current image from the camera so we can use it in our installation. We also need to flip our image with FLIP_HORIZONTAL to get the mirror effect. You can also adjust the contrast and brightness of the image to get better tracking when needed. These methods need an integer between -128 and 128. I’ve used the arrow keys to adjust the values. You can display the image by using the OpenCV image() method as the first parameter for the standard Processing image() function.

opencv.read();
opencv.flip( OpenCV.FLIP_HORIZONTAL );
opencv.contrast( contrastValue );
opencv.brightness( brightnessValue );
image( opencv.image(), 0, 0 );

Detecting Faces

Now that our image is prepared, we need to use the detect() method to scan the image for frontal faces. We can do this with the following line of code. I’ve imported java.awt.Rectangle because the detect() method will return an array of rectangles. These rectangles have a location, width and height we can use as parameters for blurring the final output of our installation.

Rectangle[] faces = opencv.detect( 1.2, 2, ¬
        OpenCV.HAAR_DO_CANNY_PRUNING, 40, 40 );

Because a mirror is something personal, I only want to track one face, so only one person at a time will be able to interact with the installation. The first if statement is really important. We only need to do things with the image or the rectangles if a face is found in the image, otherwise the installation would crash. I’ve mapped the coordinate and the width of the first face to the size of our Processing sketch. The variable f is then used to decide how much the final image should be blurred. If the size of the face is small (far away from the camera), the image doesn’t get blurred, if the size is big (close to the camera) the image gets blurred a lot. I also added an if statement for debugging. This can be toggled by pressing the d key on your keyboard. The image below shows you the blurred image when somebody gets close to the camera.

if ( faces.length > 0 ) {
	// values needed for debugging
    float x = map( faces[0].x, 0, 640, 0, 1024 );
    float y = map( faces[0].y, 0, 480, 0, 768 );
    float f = map( faces[0].width, 0, 640, 0, 1024 );       
    if ( f <= 200) {
        // no blurring
    } else if ( f > 200 && f <= 300 ) {
        opencv.blur( OpenCV.GAUSSIAN, 11 );    
    } else if ( f > 300 && f <= 400 ) {
        opencv.blur( OpenCV.GAUSSIAN, 31 );    
    } else if ( f > 400 && f <= 500 ) {
        opencv.blur( OpenCV.GAUSSIAN, 51 );   
    } else {
        opencv.blur( OpenCV.GAUSSIAN, 71 );
    }
    image( opencv.image(), 0, 0, width, height );
    if ( DEBUG ) {
        noFill();
        stroke( 255, 0, 0 );
    	rect( x, y, f, f );
    }
}

The last thing we need to do is to add an extra function to our application to stop OpenCV when our application quits.

public void stop()
{
    opencv.stop();
    super.stop();
}

Download

We covered the basics of OpenCV, so you should be able to get started and build your own interactive installation. You can download the example for the Blurry Mirror installation. and experiment with it.

Example

I’ve used the video library to render the animation as a movie file. The HD video is also available on Vimeo.

Download

Download the sketch for the particle system.

Examples

The grid in 3D looks like this. I used the lights() to add shadows to the mesh so it looks better when Processing renders it.

Download

Download the distorted 3D mesh sketch.

for (int j = 0; j < 11; j++) {
    for (int i = 0; i < 11; i++) {
         vertices<i>[j] = new PVector( i*40 + random(-10, 10),
                                       j*40 + random(-10, 10) );
    }
}

the code for drawing the grid is a little different too. We don’t calculate the points while drawing in this example, we get them out of the PVector array we’ve set up earlier.

for (int j = 0; j < 10; j ++) {
    beginShape(QUAD_STRIP);
    for (int i = 0; i < 11; i++) {
        vertex( vertices<i>[j].x, vertices<i>[j].y );
        vertex( vertices<i>[j+1].x, vertices<i>[j+1].y );
    }
    endShape();
}

Examples

If we draw the grids with QUAD_STRIP and TRIANGLE_STRIP, they’ll look like this.

Download

Download the examples to create your own distorted grid.

beginShape(QUAD_STRIP);
for (int i = 0; i < 11; i++) {
    vertex( i * 40, 0 );
    vertex( i * 40, 60 );
}
endShape();

The second example uses the TRIANGLE_STRIP mode and draws the same thing to the screen, only with triangles now.

beginShape(TRIANGLE_STRIP);
for (int i = 0; i < 11; i++) {
    vertex( i * 40, 0 );
    vertex( i * 40, 60 );
}
endShape();

If we want to draw a grid, we need nested for loops. The code is almost the same as in the first example. The y-coordinate of each vertex gets calculated now and we wrapped an extra for loop around the code. Note that the outer for-loop only runs to 10, not to 11. If it would run to 11, we would render a grid of 11 × 10 rectangles.

for (int j = 0; j < 10; j ++) {
    beginShape(QUAD_STRIP);
    for (int i = 0; i < 11; i++) {
        vertex( i * 40, j * 40 );
        vertex( i * 40, (j+1) * 40 );
    }
    endShape();
}

If you want to render the grid with triangles, replace QUAD_STRIP in the previous example to TRIANGLE_STRIP to get the result in the image below.

Download

Download all Processing examples for Mesh Basics.

The algorithm for drawing the polygon is similar to the one we used yesterday for drawing the bars. We’ll use beginShape() and we need to draw two vertices each time we go through the loop.

void renderPolygon()
{
    float closeX = 0;
    float closeY = 0;
    beginShape();
    for (int i = 0; i < values.length; i++) {
        float r = map(values<i>, 0, 100, minRadius, maxRadius);
        if ( i == 0 ) {
            closeX = cos(i * angle) * r;
            closeY = sin(i * angle) * r;
        }
        float x1 = cos(i * angle) * r;
        float y1 = sin(i * angle) * r;
        float x2 = cos((i + 1) * angle) * r;
        float y2 = sin((i + 1) * angle) * r;
        vertex(x1, y1);
        vertex(x2, y2);
    }
    endShape(CLOSE);
    ellipse( 0, 0, minRadius, minRadius );
    ellipse( minRadius/2 + 5, 0, 4, 4 );
}

The function for the circles uses the minimum and maximum radius and the lerp() function to calculate the radius for each circle. The distance between each circle is 10%, so the values for each bar will still be readable when the objects are cut.

void renderCircles()
{
    float diff = maxRadius - minRadius;
    for (int i = 0; i < 10; i++) {
        float r = lerp( minRadius, maxRadius, i / 10.0 ) * 2;
        noFill();
        ellipse( 0, 0, r, r );
    }
    ellipse( 0, 0, maxRadius * 2, maxRadius * 2 );
}

The output of the sketch looks like this. If you combine this algorithm with the technique I’ve used to output everything to a PDF file, you’ll be able to make beautiful objects made from data.

Download

Download the sketch for day 26, Data Visualisation.

The code below is the full class to draw the chart. To create a beautiful chart you need about 60 values, but it’s flexible enough to draw charts with 30 bars or 100 bars.

class CircularBarChart
{
    float maxRadius;
    float minRadius;
    float values[];
    float angle;
    CircularBarChart(float[] _values)
    {
        minRadius = 50;
        maxRadius = 200;
        values = _values;
        angle = TWO_PI / float( values.length );
    }
    void renderLines()
    {
        for (int i = 0; i < values.length; i++) {
            float x1 = cos( i * angle ) * ( minRadius / 2 );
            float y1 = sin( i * angle ) * ( minRadius / 2 );
            float r = map(values<i>, 0, 100, minRadius, maxRadius);
            float x2 = cos( i * angle ) * r;
            float y2 = sin( i * angle ) * r;
            line(x1, y1, x2, y2);
        }
    } 
}

Examples

Downloads

Download the sketch for Processing Month Day 25, Circular Bar Charts.

client = new Client( this, "127.0.0.1", 5000 );

We also need a function to convert the byte array back to an integer. You can find this one in the functions tab.

int byteArrayToInt(byte[] bytes) {
    int bits = 0;
    int counter = 0;
    for (int i = 3; i >= 0; i--) {
        bits |= ((int) bytes[counter] & 0xff) << (i * 8);
        counter++;
    }
    return bits;
}

The final thing we need to do is to read the data the server application is sending with clients.readBytesUntil() into a bytebuffer and get the x and y coordinates out of there for drawing ellipses and lines to the screen.

if ( client.available() > 0 ) {
    int byteCount = client.readBytesUntil( interesting, byteBuffer );
    byte[] xb = new byte[4];
    for (int i = 0; i < 4; i++) {
        xb<i> = byteBuffer<i>;
    }
    byte[] yb = new byte[4];
    for (int i = 0; i < 4; i++) {
        yb<i> = byteBuffer[i+4];
    }
    int x = byteArrayToInt( xb );
    int y = byteArrayToInt( yb );
    line( x, y, prevX, prevY );
    ellipse( x, y, 10, 10 );
    prevX = x;
    prevY = y;
}

Screencast

I’ve created a screencast so you can see what the application does. You can find it on Vimeo.

Download

Download the client sketch you’ve read about today. I’ve included the server sketch from yesterday.

server = new Server( this, 5000 );

We’re going to keep this program as simple as possible. The only piece of code that goes inside draw() is the line below. The server.write() method is part of the Network library, the getMousePositionAsByteArray() function is one we’re going to write ourselves.

server.write( getMousePositionAsByteArray() );

To communicate to the client application, we need to send the info as bytes. The mouseX and mouseY variables are integers (stored in memory as 32 bits) so we need to convert each integer to a byte Array with a length of 4.

byte[] intToByteArray(int number) {
    byte[] result = new byte[4];
    for (int i = 0; i < 4; i++) {
        int offset = (result.length - 1 - i) * 8;
        result<i> = (byte) ((number >>> offset) & 0xff);
    }
    return result;
}

To send the mouse position to the client application, we need to create an array with the x and y position and an extra byte at the end so we can ‘sync’ the client application with the server. This function creates a byte Array with a length of 9 and fills it with the mouse position and the separator byte.

byte[] getMousePositionAsByteArray()
{
    byte[] x = intToByteArray( mouseX );
    byte[] y = intToByteArray( mouseY );    
    byte[] b = new byte[9];
    for (int i = 0; i < 4; i++) {
        b<i> = x<i>;
    }
    for (int i = 4; i < 8; i++) {
        b<i> = y[i-4];
    }
    b[8] = 10; // separator byte
    return b;
}

Download

Download the server sketch you’ve read about today.