kasperkamperman.com» Blog – kasperkamperman.com

MediaLAB Amsterdam : U-turm – Scryption

kasperkamperman — Mon, 12 Jul 2010 23:03:54 +0000

In the MediaLAB Amsterdam (Lab of the Applied University of Amsterdam) I’ve supervised a few project teams to help them find the right technical solutions for their projects. I’d like to highlight two of them.

U-turm

An interactive projection for the closing ceremony of the E-culture fair, as part of the cultural capital of Europe Ruhr 2010. Dance on the facade of the Dortmunder U. In collaboration with producer Jan Scholte and the artist Matthias Oostrik.

The U-turm team made an interactive projection on the Dortmunder-U tower. When a person steps on one of the stages their silhouette appears on one of the windows of the building. Depending on how the person moves the silhouette can move to other windows, leaving a trace where it has already been before. If two or more silhouettes meet on the same window there will be some creative content coming out, symbolizing the new use of the building as cultural hotspot.

The installation uses Quart Composer the generate the visuals. I’ve helped Joost Buijs (responsible for the technical part) finding some different motion tracking solutions for Quartz Composer.

Tested options were :

v002 Optical Flow 2.0.2 : uses a lot of processing power, so a big framerate drop.
Webcam piano by Memo Akten : worked good, but didn’t invite for dancing too much.
Kineme CVTools plugin : used in the end, saves a lot of processing power by checking only certain points.

The team did a good job to find and test the right way of interaction. Its a really powerful and intuitive concept I’m curious how its going to look on the big building.

Scryption – Google mirror.

The team of Scryption made a mirror that shows your digital identity. The concept was based on the theories of Marshall McLuhans ideas. From their concept document :

You enter the area and you will see two different mirrors in front of you. You will be directed to type in your name. The left mirror is just an ordinary mirror that shows the real you. The left one shows up the pictures that appear on Google when doing a search query on your name. This mirror shows you the digital you, the identity that is created by the internet (incl. other people) and by yourself. You will then be able to play with your digital shape since there are sensors installed that react on your movement. A picture is uploaded to the net.

The installation fits to the debate around technological determinism. As McLuhan puts it, “We shape our tools and our tools shape us”. But also that the medium is the message since a mirror always confronts you with yourself. And sometimes you see something you didn’t expect to see.

Saro van Cleynenbreugel was responsible for the technical part. Together with him and project coach Iris Douma we’ve decided to make the installation with Processing. I like Processing because of the ease of code sharing (mail some code and run it directly). However in the end Processing seemed a bit to slow for the task. Especially blending a camera silhouette with images and text cost a lot frames. Maybe next time I would choose and suggest OpenFrameWorks for an installation like this. In the end the application ran at 20 fps, so we couldn’t complain. Due some problems with a Nightvision camera (warning: exposure settings don’t work in that mode), there was some trouble to make a nice looking silhouette.

Libraries used :

Visuals by code

kasperkamperman — Mon, 17 May 2010 11:40:36 +0000

Some resources I’ve mentioned in the lecture of visuals by code.

A lot of interactive tools like Flash and Processing serve well to make visual effects. By using relative simple scripts ( re-use and play ! ) you can create complex and cool looking visuals. Most tools let you export the material to image sequences or even video. Make use of them even for non-interactive stuff. Try some examples to create some genenerative art yourself.Lets start using your creativity and start playing, ‘remixing’ and mashing up some code.

Toolkits :

Code examples, libraries, inspiration :

Books :

Above 20 euro no shipping costs to the Netherlands and Germany !

Arduino Flash communication AS3 – Messenger

kasperkamperman — Thu, 13 May 2010 21:52:41 +0000

Example how to setup serial communication between Flash and Arduino in combination with the Messenger library for Arduino. You can send whatever you want between Arduino and Flash (if you only want to receive data from inputs and set outputs it better to use Firmata / As3Glue combination).

For receiving of data on the Arduino I’ll choose the Messenger library. It has some nice simple functions and gives you the opportunity to check if a string is fully received (a ‘carriage return’ is send by Flash at the end of a serial message in the SerialPort class) by Arduino. Of course you can write your own serial protocol. You can find some thoughts about it at the Todbot blog : Arduino serial protocol design patterns.

You can send data to the serial port with the Serial.print() and Serial.println() commands.

Included is the SerialPort class for Flash that makes it easy to send and receive serial data from/to the Arduino. I’ve modified the original (from tinker.it) so it supports start and stop characters. As a stop character ‘carriage return’ is used (‘\r’, or char(13)) that is send when you do Serial.println(); from Arduino.

I advise using a start character (not used in the example below) as well, because sometimes (especially when sending on a high datarate) characters at the beginning if the string can get lost.

The download contains SerialPort.as and example_messenger.fla (CS3).

Download : flash-arduino-as3-messenger

Step by step guide for Messenger library communication

Download the Messenger library and install it in your Arduino/libraries/ folder ( you can find it by default in your documents folder ). Restart Arduino if it was running.
Go to File > Examples > Messenger > basic_communication.
Change
1
Serial.begin(115200);

to

1
Serial.begin(57600);

if you use my Serialproxy setup instructions from my tutorial ( see Arduino – Flash communication AS3 – AS3Glue bundle ).
Change
1
unsigned long interval = 20;

to

1
unsigned long interval = 40;

for more stability
Upload the Sketch to the Arduino.
Configure Serialproxy for your Arduino board and run it.
Open example_messenger.fla and run it.
If everything went fine you’ll see the led on pin 13 blinking and 6 balls, controlled by the analog inputs, moving on the screen.

Example_messenger code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
var receivedValues:Array = new Array();



// Arduino connection



/* SerialPort(localhost, netport, start character, stop character)

   for more stability use a startcharacter so you can check if a message is complete

   default stop character is carriage return '\r' 

   A carriage return is send by the Arduino command Serial.println();

*/



var arduino:SerialPort = new SerialPort("127.0.0.1", 5331);

arduino.addEventListener(DataEvent.DATA, onArduinoData );

arduino.connect();



// Setup a timer to send data to the Arduino

// The timer object calls the timerEvent function 20 times a second (every 50ms)

var timer = new Timer(500);

timer.addEventListener("timer", timerEvent);

timer.start();



// toggle variable that is switched by the timer from true to false and back

var toggle:Boolean= true;



function timerEvent(event:Event):void 

{   

    // change toggle boolean to the opposite

    toggle = !toggle;

    

    if(toggle == true)

    { // make ledPin 13 HIGH - onboard led on 

      //arduino.send("on"); // For Messenger checkString example

      arduino.send("13 1"); // For Messenger basic_communication example

    }

    else

    { // make ledPin 13 LOW - onboard led off

      //arduino.send("off"); // For Messenger checkString example

      arduino.send("13 0");  // For Messenger basic_communication example

    }

    

    /*

    When you have a certain amount of values it will be smart to keep them

    in an array (so you only modify the array indexes that change.

    

    You can convert an array to a character seperated string (space character for 

    Messenger library) with the join function.

    

    Example :

    var sendValues:Array = new Array(2,4,8,16,32,64,128);

    arduino.send(sendValues.join(" "));

    

    */

}



// add some balls to the stage to display incoming analog values

var ballArray = new Array();



for(var i:int = 0;i<6;i++)

{   

    var ball:MovieClip = new Ball();

    ballArray[i] = ball;

    ball.width = ball.height = 50;

    ball.y = 10;

    ball.x = 10+(i*60);

    addChild(ball);

}



// Called when data is received from the Arduino

function onArduinoData( event:DataEvent ):void

{   

    trace("received string : ", event.data );



    /* The values from Arduino Messenger are space seperated values. We will 

       store each value in the receivedValues array.    

    */

    receivedValues = event.data.split(" "); 

    

    // change the y position of the balls on stage 

    for(var i:int = 0;i<6;i++)

    { var mc = ballArray[i];

      mc.y = receivedValues[i] * 350/1023;  

    }   

}

Arduino – Unity serial communication

kasperkamperman — Wed, 12 May 2010 21:45:43 +0000

Art & Technology student Tiuri de Jong did a project on Arduino and Unity communication. The goal was (and still is) to create an easy workflow and tutorial on how to connect Arduino with Unity (free version). Due the serial implementation in the Mac OSX version of Unity, this part still doesn’t work. Suggestions and contributions are welcome on the project page.

Project: unity-arduino with serial connection

This project uses Unity (which uses C# and JavaScript scripting), the Arduino and/or SerialProxy to connect the Arduino to Unity. Thus allowing custom hardware to be linked to Unity (in real-time).

The link is established in Windows using the Mono implementation of System.IO.Ports.

For Mac/OSX users, I’ve made an implementation that uses SerialProxy because direct serial connection doesn’t work on the mac. The problem is, though, that the SerialProxy implementation doesn’t seem to work either.

Links:

Unity-Arduino serial-connection on Google code
Unity : Game Development Tool
Arduino

Computer Vision : Blob tracking – Face detection

kasperkamperman — Thu, 29 Apr 2010 13:04:44 +0000

A blobs is a certain object that represents a certain area of a frame. Blobs can be different things like: hands, faces, balls, ir-lights. They are identified because they differ from other pixels in the frame.

Tracking is identifying blobs that change over time. In multi-touch tables, based on computer vision with a webcam, your fingertips are the blobs that are tracked. Every blob will act as a ‘mouse pointer’.

Blob Detection test by samkeene :

Click here to view the embedded video.

Max Meinders made a good description of all the processing steps involved in Blob tracking :
Max Meinders – videotracking.

Tool/Language	Resource
AS3	Fast blob detection in Flash by Tomek
Application	Community Core Vision / Tbeta by the NUI Group Community Can communicate by TUIO, OSC, XML protocols with other software.
OF (c++)	CYA: People Vision Software
Processing	OpenCV library for Processing by Stéphane Cousot and Douglas Edric Stanley.

Face detection

OpenCV also supports the recognition of special characteristics in an image and use those as a blob. Face detection a tecnique to recognize things that look like a face in an image. It doesn’t recognize a certain face ( although thats possible, see Image recognition ), but it detects facial features.

Face Detection with Processing by Pedro Amado

Click here to view the embedded video.

Face detection works with classifiers. You can learn the computer characteristics of an object. So OpenCV can detect other objects as well, as long you have a classifier file for it.

Keywords : Haar Classifier, Viola Jones object detection framework, cascade classifiers.

Tool/Language	Resource
AS3	Viola-Jones object detection by Eugene Zatepyakin
AS3	Optimizing Flash Based Face Detection by Mario Klingemann
Processing libary	OpenCV detect Can detect faces, profiles and bodies.

Tomek made a nice example where he tracks faces in the ‘Black and White’ video of Michael Jackson in realtime in Flash ( you can tried it yourself to with a webcam ) : Machines are looking for Michael Jackson.

Computer Vision : Frame differencing

kasperkamperman — Fri, 23 Apr 2010 22:51:21 +0000

Frame differencing is a technique where the computer checks the difference between two video frames. If the pixels have changed there apparently was something changing in the image (moving for example). Most techniques work with some blur and threshold, to distict real movement from noise. Because frame could differ too when light conditions in a room change ( and camera auto focus, brightness correction etc. ).

Below an example of the difference filter in the OpenCV library for Processing. You can do the same in Flash with the Difference Blendmode.

Click here to view the embedded video.

You can move objects to area’s where most of the motion is happening, like in the Pong example of Ostrich : Ostrich two cursors example

Or you can make some hotspots in your image and check the amount of motion in those. A nice example to get the idea is the webcam piano from Memo Akten (implemented in Quartz Composer and Processing) :

Click here to view the embedded video.

Or you can do other creative things with it (video by WTF? by OK Go, example code in Processing by Memo Akten) :

Click here to view the embedded video.

Code examples and tutorials

Tool/Language	Resource
AS3	Ostrich Flash (Flash feathers)
AS3	Webcam motion detection by Soulwire
AS2	Webcam Motion Detection by Guy Watson
Processing	Webcam Piano by Memo Akten
Processing	Poping Bubbles with OpenCV library by Andy Best
Processing	Frame differencing code example by Golan Levin

If you only want to detect if there is a certain amount of motion in front of a webcam, you can use the activityHandler and activityLevel parameters in Flash. See my example on bitmap filters where i use it the apply a red filter when there is movement :
Flash AS3 : Apply bitmap filters to a webcam image

Arduino Flash communication AS3 – As3Glue bundle

kasperkamperman — Fri, 19 Mar 2010 16:36:18 +0000

Click here to view the embedded video.

I’ve created a Flash monitor application with As3Glue to make it easier to start with Flash Arduino communication.

Glue is an ActionScript 3.0 library that enables communication between Flash and Arduino boards with Firmata. Since Flash cannot interface the serial port directly we’ll use Serialproxy in between. Serialproxy converts incoming serial data the XMLsocket data.

The monitor is useful to check if all the connections are working good. You can monitor directly all the sensors and actuators connected to your Arduino board.

The example code file is a start point to program your own things controlled by Arduino.

Included files :

AS3Glue files ( .net.eriksjodin.arduino )
Tinkerproxy osx ( renamed to serproxy )
Serialproxy windows ( renamed to serproxy )
as3glue_standalone_monitor.fla
as3glue_program-example.fla

The Firmata library is included with Arduino itself. Make sure you use Arduino 018, because the Firmata library included in version 017 is not stable.

Update (12-05-10, v1.3): I’ve updated the code for the support of two servo motors (pin 9 and pin 10).

Download the zip-file : arduino_as3glue_bundle_v1.4

Flash AS3 : Apply bitmap filters to a webcam image

kasperkamperman — Wed, 10 Mar 2010 21:52:13 +0000

Simple ( beginner-intermediate ) Flash AS3code example on how to apply a bitmap filter on a webcam image. Also image rotation and simple motion detection ( activityLevel ) is included.

You can make a Photobooth of this script as well. Mark Knol wrote an ImageSaver class that sends a .jpg or .png picture of a Display element to a simple PHP script that stores it on a webserver :
Stroep.nl AS3 ImageSaver Class.

You need a webcam and give Flashplayer access to the camera to see the example below :

For more in-depth information see the following subjects in the Flash Actionscript 3.0 reference :

The code ( copy-paste directly in a new Flash project in the Actions – Frame. )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
/*

Example how to detect motion in a webcam image and to apply a color filter 

and/or rotation. 



www.kasperkamperman.com - 10-03-2010

*/



var fps:int = 25; // frames per second you want to grab and display



var cam:Camera;

cam = Camera.getCamera();

cam.setMode(640,480,fps);



var video:Video;

video = new Video(cam.width, cam.height);

video.attachCamera(cam);



// motion detector ------------------------------------------------

cam.setMotionLevel(30, 100); // level 30, timer 500ms

cam.addEventListener(ActivityEvent.ACTIVITY, activityHandler);



// variable to store movement ( use later to apply the filter )

var imageMovement:Boolean = false; 



function activityHandler(e:ActivityEvent):void 

{  if (e.activating == true) {

    imageMovement = true;

    trace("movement above threshold. Level :"+cam.activityLevel);

   } else {

    imageMovement = false;

    trace("no movement. Level :"+cam.activityLevel);

   }    

}



// --- filter ---------------------------------------------------------



// filter green/blue components ( leave red)

var redFilterMatrix:Array = new Array();

redFilterMatrix = redFilterMatrix.concat([1, 0, 0, 0, 0]); // red

redFilterMatrix = redFilterMatrix.concat([0, 0, 0, 0, 0]); // green

redFilterMatrix = redFilterMatrix.concat([0, 0, 0, 0, 0]); // blue

redFilterMatrix = redFilterMatrix.concat([0, 0, 0, 1, 0]); // alpha



var filter:ColorMatrixFilter = new ColorMatrixFilter(redFilterMatrix);



// --- BitmapData ------------------------



// make a BitmapData object on which you can draw to video

// ( exchange width/height when you want to rotate the image )

var bmd:BitmapData = new BitmapData(cam.width,cam.height,false,0);



// rectangle and pointer for applying filter

var rect:Rectangle = new Rectangle(0, 0, bmd.width, bmd.height);

var point:Point = new Point(0, 0);



var canvasBitmap:Bitmap = new Bitmap(bmd); // link BitmapData to Bitmap 

addChild(canvasBitmap);                    // add Bitmap to stage



// --- rotate camera image ---------------------------------------------------



var rotateMatrix:Matrix = new Matrix();

rotateMatrix.rotate(2 * Math.PI * (90 / 360));

rotateMatrix.translate(cam.height,0);



// --- Timer to refresh the image --------------------------------------------

var refreshTimer:Timer = new Timer(1000/25); // 1000ms / 25fps

refreshTimer.start();

refreshTimer.addEventListener(TimerEvent.TIMER, imageRefresh);



function imageRefresh(e:Event)

{    // draw video on BitmapData

     bmd.draw(video);

     

     // draw video rotated on BitmapData ( don't forget to change BitmapData to 

     // the right size ) and comment the bmd.draw(video) line. 

     //bmd.draw(video, rotateMatrix);

     

     // apply the red filter when there is enough image movement

     if(imageMovement==true) bmd.applyFilter(bmd,rect,point,filter);    

}

Processing ControlP5 library example 2 : Style and setValue

kasperkamperman — Mon, 08 Mar 2010 20:50:22 +0000

In this example you’ll see how to style the GUI that you’ve made with the ControlP5 library ( see first article : Processing ControlP5 library example 1 : user interface for the basics. )

controlP5 styling interface elements

View the sketch in action at openprocessing.org.
Download the zip-file ( with all the examples ) : controlP5-examples.zip

This example is pretty straight forward. You give some style the controlP5 object with the ’setControlFont’ and ’setColor….’ methods.

In the controlEvent function we use the values of some control elements to control the value of others. The setValue method is useful when you want to monitor variables in a visual way.

Slider1 controls Slider2.
Bang1 sets Toggle1 to 1 (on/true).
Button1 sets Toggle1 to 0 (off/false).
Numberbox1 controls Knob1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// ControlP5 Example 2 : Style UI elements and setValue

// ControlP5 by Andreas Schlegel : http://www.sojamo.de/libraries/controlP5/



import controlP5.*;

ControlP5 controlP5;



void setup() {

  size(300,260);

  smooth();

  

  controlP5 = new ControlP5(this);

  

  // change the default font to Verdana

  PFont p = createFont("Verdana",9); 

  controlP5.setControlFont(p);

  

  // change the original colors

  controlP5.setColorForeground(0xffaa0000);

  controlP5.setColorBackground(0xff660000);

  controlP5.setColorLabel(0xffdddddd);

  controlP5.setColorValue(0xffff88ff);

  controlP5.setColorActive(0xffff0000);

  

  // add the elments ( see example 1 for the parameters )

  controlP5.addBang("bang1",10,10,20,20);    

  controlP5.addButton("button1",1,70,10,60,20);  

  controlP5.addToggle("toggle1",false,170,10,20,20);    

  controlP5.addSlider("slider1",0,255,128,10,80,10,100);

  

  Slider s = controlP5.addSlider("slider2",0,255,128,70,80,100,10);

  // change sliderMode of the Slider object. The default is Slider.FIX

  s.setSliderMode(Slider.FLEXIBLE); 

    

  controlP5.addKnob("knob1",0,360,0,70,120,50);

  

  Numberbox n = controlP5.addNumberbox("numberbox1",50,170,120,60,14);

  // change Multiplier of the Numberbox ( default is 1 )

  n.setMultiplier(30);

}



void draw() { 

  background(0);  // background black

}



void controlEvent(ControlEvent theEvent) {

  

  if(theEvent.isController()) { 

    

    print("control event from : "+theEvent.controller().name());

    println(", value : "+theEvent.controller().value());

    

    // clicking on bang1 sets toggle1 value to 1 (true)      

    if(theEvent.controller().name()=="bang1") {

     controlP5.controller("toggle1").setValue(1);     

    }

    

    // clicking on button1 sets toggle1 value to 0 (false)

    if(theEvent.controller().name()=="button1") {

     controlP5.controller("toggle1").setValue(0);     

    }

    

    // dragging slider1 changes the value of slider2

    if(theEvent.controller().name()=="slider1") {

     controlP5.controller("slider2").setValue(theEvent.controller().value());

    }

    

    // changing the value of numberbox1 turns knob1

    if(theEvent.controller().name()=="numberbox1") {

     controlP5.controller("knob1").setValue(theEvent.controller().value());

    }

    

  }  

}

</pre>


Related posts:
Processing ControlP5 library example 1 : user interface

Processing ControlP5 library example 1 : user interface

kasperkamperman — Mon, 08 Mar 2010 08:18:48 +0000

ControlP5 is a GUI and controller library for Processing. You can easy add controllers to your program. You can download the ControlP5 library at the site of Andreas Schlegel. After downloading und unpacking you can copy the library in the ‘libraries’ subfolder of the Processing sketches folder.

The library comes with a lot of examples, but it lacks a bit an overview how to use different elements together. In this article and example an overview of some basic GUI elements and how you can handle their events.

See the sketch in action at openprocessing.org.
Download the zip-file ( with all the examples ) : controlP5-examples.zip

controlP5 basic interface elements

Element	Description
	Bang : A bang controller triggers an event when pressed. parameters : name, x, y, width, height `controlP5.addBang("bang1",10,10,20,20);`
	Button : A button executes after release. parameters : name, value (float), x, y, width, height `controlP5.addButton("button1",1,70,10,60,20);`
	Toggle : A toggle can have two states, true and false. Where true has the value 1 and false is 0. parameters : name, default value (boolean), x, y, width, height `controlP5.addToggle("toggle1",false,170,10,20,20);`
	Slider : A slider is either used horizontally or vertically. When the width is bigger, you get a horizontal slider. When the height is bigger, you get a vertical slider. parameters : name, minimum, maximum, default value (float), x, y, width, height `controlP5.addSlider("slider2",0,255,128,70,80,100,10);`
	Knob : A round turning dial knob. Counts from 0-360 degrees. parameters :name, minimum, maximum, default value (float, x, y, diameter `controlP5.addKnob("knob1",0,360,0,70,120,50);`
	NumberBox : Box that displays a number. You can change the value by click and hold in the box and drag the mouse up and down. parameters : name, default value (float), x, y, width, height `controlP5.addNumberbox("numberbox1",50,170,120,60,14);`

variables and setup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// ControlP5 Example 1 : Basic UI elements

 

import controlP5.*;    // import controlP5 library

ControlP5 controlP5;   // controlP5 object



// array to store 7 colors that can be changed by the different 

// user interface elements

color [] colors = new color[7]; 



void setup() {

  size(330,260);

  smooth();

    

  controlP5 = new ControlP5(this);

  

  // description : a bang controller triggers an event when pressed. 

  // parameters  : name, x, y, width, height

  controlP5.addBang("bang1",10,10,20,20);

    

  // description : a button executes after release

  // parameters  : name, value (float), x, y, width, height

  controlP5.addButton("button1",1,70,10,60,20);

  

  // description : a toggle can have two states, true and false

  //               where true has the value 1 and false is 0.

  // parameters  : name, default value (boolean), x, y, width, height

  controlP5.addToggle("toggle1",false,170,10,20,20);

  

  // description : a slider is either used horizontally or vertically.

  //               width is bigger, you get a horizontal slider

  //               height is bigger, you get a vertical slider.  

  // parameters  : name, minimum, maximum, default value (float), x, y, width, height

  controlP5.addSlider("slider1",0,255,128,10,80,10,100);

  controlP5.addSlider("slider2",0,255,128,70,80,100,10);

  

  // description : round turning dial knob

  // parameters  : name, minimum, maximum, default value (float, x, y, diameter

  controlP5.addKnob("knob1",0,360,0,70,120,50);

  

  // parameters : name, default value (float), x, y,  width, height

  controlP5.addNumberbox("numberbox1",50,170,120,60,14);

}

The draw() loop

In the draw loop you don’t have to do anything with the controlP5 elements, since you’ve added them already in the setup() function. In the draw-loop the rectangles are draw, with the color value from the colors[] array. The values in the colors[] array are modified by the controller events.

1
2
3
4
5
6
7
8
9
10
void draw() { 

  background(0);  // background black

  

  // draw 7 squares and use as a fill color the colors from the colors array

  for(int i=0;i<7;i++) {        // loop through colors array

    stroke(255);

    fill(colors[i]);            // use color to fill

    rect(10+(i*45),210,40,40);  // draw rectangle

  }  

}

controlEvent

The function controlEvent is an event listener for all the user elements. In this case we only want to listen to controller events ( if(theEvent.isController()) ). By getting the name ( theEvent.controller().name()) ) and the value ( theEvent.controller().value()) ) of the event we can program some logic ( if/else ) and change some variables in Processing ( in this case the values in the color[] array ).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
void controlEvent(ControlEvent theEvent) {

  /* events triggered by controllers are automatically forwarded to 

     the controlEvent method. by checking the name of a controller one can 

     distinguish which of the controllers has been changed.

  */ 

 

  /* check if the event is from a controller otherwise you'll get an error

     when clicking other interface elements like Radiobutton that don't support

     the controller() methods

  */

  

  if(theEvent.isController()) { 

    

    print("control event from : "+theEvent.controller().name());

    println(", value : "+theEvent.controller().value());

    

    if(theEvent.controller().name()=="bang1") {

      colors[0] = colors[0] + color(40,40,0);

      if(colors[0]>255) colors[0] = color(40,40,0);    

    }

    

    if(theEvent.controller().name()=="button1") {

      colors[1] = colors[1] + color(40,0,40);

      if(colors[1]>255) colors[1] = color(40,0,40);

    }

    

    if(theEvent.controller().name()=="toggle1") {

      if(theEvent.controller().value()==1) colors[2] = color(0,255,255);

      else                                 colors[2] = color(0,0,0);

    }

    

    if(theEvent.controller().name()=="slider1") {

      colors[3] = color(theEvent.controller().value(),0,0);

    }

    

    if(theEvent.controller().name()=="slider2") {

      colors[4] = color(0,theEvent.controller().value(),0);

    }

      

    if(theEvent.controller().name()=="knob1") {

      colors[5] = color(0,0,theEvent.controller().value());

    }

    

    if(theEvent.controller().name()=="numberbox1") {

      colors[6] = color(theEvent.controller().value());

    } 

    

  }  

}

Convert AVCHD to other codecs for more fluent editing

kasperkamperman — Sun, 07 Mar 2010 14:36:24 +0000

The AVCHD codec is a very processor intensive codec. A lot of computers have problem displaying and editing 1080i video ( resolution 1920 by 1080 ) video. When editing video its important to have fast and smooth playback. You can also apply and preview effects a lot faster when not working with AVCHD. In this article some options to convert AVCHD to DV to work with AVCHD in a more fluent way.

In all the examples I use AVCHD 1080i50 ( PAL 25 fps ) as the source material.

Convert to SD (Standard Definition) video ( 720 x 576 )

If your end-product is a standard DVD, this is the way to go. Of course you’ll lose quality ( less pixels ) and you have to use more disk space ( less compression ).

The DV codec the most common codec for SD. Most videotools and encoders support this codec. Below the settings for MediaEncoder CS4.

You can also download the AVCHD transcoder from Panasonic (windows only) if you have a Panasonic camera. Make sure you keep the directory structure of your smartmedia card, since it doesn’t recognize single .MTS files.

Another alternative (Mac only) is to import your material (again keep the structure of your smartmedia card) in iMovie. It will convert it to video with the Apple Intermediate codec and a resolution of 960 by 540 pixels ( slightly better then 720 x 576 ). Counterpart is that the Apple Intermediate Codec isn’t available for Windows, so you cannot play it back under Windows.

Import the material as 960 x 540.

Right click on the video in the event library > 'Reveal in Finder'

Convert to Motion JPEG format anamorphic ( 1440 x 1080 )

If you want to keep the 1080i quality you can convert to the Motion JPEG A codec. Its a light intra frame compression format ( DCT compression like the DV codec ) and it supports HD resolution interlaced material. This codec is also used in some broadcast facilities to store HD content.

I chose for a pixel aspect ratio of 1.333 (HD anamorphic 1080) to keep the filesize down, and make playback more fluent. You can alter the quality to a higher value, but keep in mind that the datarate and the filesize get bigger really quick ( so editing gets less fluent ).

You could also use this codec for storing an project in high quality for archiving purposes, since its impossible to store HD edits in the AVCHD codec with CS4.

Codec Settings

Offline editing, Proxy video

If you want to keep the original quality you could first edit with a lower quality movie ( convert to an SD movie with one of the techniques mentioned before ) and then replace that with the original HD version.

A workflow is explained here : Quickly Edit HD Video in Adobe Premiere Pro with Proxy Video

Encode HD video for Vimeo or YouTube ( Media Encoder CS4 )

kasperkamperman — Thu, 04 Mar 2010 14:31:41 +0000

In this article you will find the optimal export/encoding options you can make voor YouTube/Vimeo HD quality movies. Media Encoder CS4 comes with a few standard presets, however they contain not always the best settings. In this article I assume that your source material is PAL video ( 25 frames a second ).

If you have the newest ME ( Media Encoder ) you’ll have a YouTube Widescreen HD preset. I started modifying this one. Make sure you select H.264 as the video format.

Video settings ( video tab )

Setting	Explanation
TV Standard : NTSC/PAL	doesn’t matter for web video. Don’t click it however since it will change the Frame Width/Height values to SD video size.
Frame Width/Height : 1280 x 720	HD 720p resolution. If you cannot set this witdh and height, please check if the Level ( see below ) is set to 3.2.
Frame Rate [fps] : 25	Same rate as the source material you’re encoding ( to check open the file in Quicktime and press CMD+I ( osx ) to see the frame rate properties. Choose 25 fps when you encode PAL video, choose 30 fps when you encode NTSC video.
Field Order: None (Progressive)	Always choose None(progressive) for web video (since it doesn’t support interlacing). ME CS4 will automatically de-interlace interlaced source material.
Pixel Aspect Ratio: Square Pixels	Always square pixels for web video.
Profile : High	The ‘High Profile’ has better compression methods, so it gives a better quality ( but uses more computer power as well ).
Level : 3.2	This H.264 Level supports a resolution of 1280×720. Wikipedia gives a good overview of the different H.264/AVC Levels.
Bitrate Encoding	Choose ‘VBR, 2 Pass’ for better encoding efficiency ( better quality for the same filesize ). If you want faster encoding pick ‘VBR, 1 Pass’.
Target Bitrate	The average bitrate the encoder can use in Mega bits per second. This multiplied by the time gives an indication of the file size. One minute of video with this setting would be : 5 Mbps * 60s = 300 Mbps. 300Mbps/8 ( from bits to bytes ) = 37.5 Mb.
Maximum Bitrate	The encoder can use a higher bitrate for difficult parts in a video image ( lots of movement, noise) to improve the quality. This implies directly that other ’simple’ parts are encoded with a lower bitrate than the average bitrate.

Audio settings ( audio tab )

In the audiotab you don’t have to make a lot of changes. The audio codec used in combination with H264 is AAC ( Advanced Audio Coding ). Depending your demands you can change stereo to mono ( a bitrate of 64 kbps would be sufficient then ), when you want good quality stereo music it’s better to choose 128kbps or higher ( the higher the bitrate, the better the quality ).

Use 44.1 kHz as an audio bitrate, 48 kHz ( most camera’s record with this frequency ) can give distorted audio playback with YouTube/Vimeo now and then.

Export settings summary

Look at the settings in the Export summary and compare them with the summary above. Make changes when necessary.

To save this preset you can press the disk icon next to the preset name ( automatically changes to Custom when you changed an existing preset ).

Final note

The encoded video will be re-encoded in Vimeo or YouTube. However with these settings you have good quality HD movie as reference and for archive purposes.

Adobe Premiere CS4 Cheat Sheet mac

kasperkamperman — Tue, 16 Feb 2010 17:14:48 +0000

Adobe released a nice shortcut look-up application called “Adobe Shortcut App for Creative Suite”. Really useful but the included Cheat Sheet doesn’t show the most necessary shortcuts.

So I’ve decided to make a new Cheat Sheet with the ( in my opinion ) most useful keyboard shortcuts for Premiere CS4 (Mac).

Download : Adobe Premiere CS4 Cheat Sheet

Go to : Adobe Shortcut App ( air application )

No related posts.

Arduino programming – Manual and links

kasperkamperman — Tue, 05 Jan 2010 09:29:58 +0000

To get started with programming for the Arduino you can download or buy a print version of the excellent programming notebook at lulu.com. There is also a Dutch translation that you can find on www.arduino.nu.

Download the “Arduino programming notebook” by Brian Evans at lulu.com : Arduino programming notebook

Download de “Arduino programmeer manual” Nederlandse vertaling door A. Companje van arduino.nu : Arduino programmeer manual

The Arduino website has good information to help you get started. See Getting started with Arduino.

Next to that watch use the code examples in the Arduino IDE and use the Arduino reference. The Arduino playground has more advanced information and the Arduino playground at arduino.cc.

General programming tips :

Learn by doing
Make simple things
Combine simple things to make complex things
Print code for a better overview

Arduino Programming – HSB to RGB

kasperkamperman — Tue, 05 Jan 2010 00:48:52 +0000

Control a RGB led with Hue, Saturation and Brightness (HSB / HSV ).

Level : beginner with Arduino. ( Basic knowledge of programming principles like if/else and variables ).

Download the Arduino ( .pde ) files : arduino_HSB_to_RGB.zip

HSB_to_RGB.pde :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
/*  

  Control a RGB led with Hue, Saturation and Brightness (HSB / HSV )



  Hue is change by an analog input. 

  Brightness is changed by a fading function. 

  Saturation stays constant at 255



  getRGB() function based on   

  dim_curve idea by Jims



  created 05-01-2010 by kasperkamperman.com

*/



/* 

  dim_curve 'lookup table' to compensate for the nonlinearity of human vision.

  Used in the getRGB function on saturation and brightness to make 'dimming' look more natural. 

  Exponential function used to create values below : 

  x from 0 - 255 : y = round(pow( 2.0, x+64/40.0) - 1)   

*/



const byte dim_curve[] = {

    0,   1,   1,   2,   2,   2,   2,   2,   2,   3,   3,   3,   3,   3,   3,   3,

    3,   3,   3,   3,   3,   3,   3,   4,   4,   4,   4,   4,   4,   4,   4,   4,

    4,   4,   4,   5,   5,   5,   5,   5,   5,   5,   5,   5,   5,   6,   6,   6,

    6,   6,   6,   6,   6,   7,   7,   7,   7,   7,   7,   7,   8,   8,   8,   8,

    8,   8,   9,   9,   9,   9,   9,   9,   10,  10,  10,  10,  10,  11,  11,  11,

    11,  11,  12,  12,  12,  12,  12,  13,  13,  13,  13,  14,  14,  14,  14,  15,

    15,  15,  16,  16,  16,  16,  17,  17,  17,  18,  18,  18,  19,  19,  19,  20,

    20,  20,  21,  21,  22,  22,  22,  23,  23,  24,  24,  25,  25,  25,  26,  26,

    27,  27,  28,  28,  29,  29,  30,  30,  31,  32,  32,  33,  33,  34,  35,  35,

    36,  36,  37,  38,  38,  39,  40,  40,  41,  42,  43,  43,  44,  45,  46,  47,

    48,  48,  49,  50,  51,  52,  53,  54,  55,  56,  57,  58,  59,  60,  61,  62,

    63,  64,  65,  66,  68,  69,  70,  71,  73,  74,  75,  76,  78,  79,  81,  82,

    83,  85,  86,  88,  90,  91,  93,  94,  96,  98,  99,  101, 103, 105, 107, 109,

    110, 112, 114, 116, 118, 121, 123, 125, 127, 129, 132, 134, 136, 139, 141, 144,

    146, 149, 151, 154, 157, 159, 162, 165, 168, 171, 174, 177, 180, 183, 186, 190,

    193, 196, 200, 203, 207, 211, 214, 218, 222, 226, 230, 234, 238, 242, 248, 255,

};



const int sensorPin = 0;  // pin the potmeter is attached too

const int ledPinR   = 9;  // pwm pin with red led

const int ledPinG   = 10; // pwm pin with green led

const int ledPinB   = 11; // pwm pin with blue led



int sensorVal = 0; // store the value coming from the sensor

int fadeVal   = 0; // value that changes between 0-255

int fadeSpeed = 4; // 'speed' of fading



// getRGB function stores RGB values in this array

// use these values for the red, blue, green led. 

int rgb_colors[3]; 



int hue;

int saturation;

int brightness;



void setup() { 

  pinMode(9, OUTPUT);

  pinMode(10, OUTPUT);

  pinMode(11, OUTPUT);

  Serial.begin(57600);

}



void loop()  { 



  sensorVal = analogRead(sensorPin);



  // fade from 0 - 255 and back with a certain speed   

  fadeVal = fadeVal + fadeSpeed;         // change fadeVal by speed

  fadeVal = constrain(fadeVal, 0, 255);  // keep fadeVal between 0 and 255



  if(fadeVal==255 || fadeVal==0)         // change from up>down or down-up (negative/positive)

  { fadeSpeed = -fadeSpeed;  

  }  



  // set HSB values

  hue        = map(sensorVal,0, 1023,0, 359);     // hue is a number between 0 and 360

  saturation = 255;                               // saturation is a number between 0 - 255

  brightness = fadeVal;                           // value is a number between 0 - 255



  getRGB(hue,saturation,brightness,rgb_colors);   // converts HSB to RGB



  analogWrite(ledPinR, rgb_colors[0]);            // red value in index 0 of rgb_colors array

  analogWrite(ledPinG, rgb_colors[1]);            // green value in index 1 of rgb_colors array

  analogWrite(ledPinB, rgb_colors[2]);            // blue value in index 2 of rgb_colors array



  delay(20); // delay to slow down fading

}



void getRGB(int hue, int sat, int val, int colors[3]) { 

  /* convert hue, saturation and brightness ( HSB/HSV ) to RGB

     The dim_curve is used only on brightness/value and on saturation (inverted).

     This looks the most natural.      

  */



  val = dim_curve[val];

  sat = 255-dim_curve[255-sat];



  int r;

  int g;

  int b;

  int base;



  if (sat == 0) { // Acromatic color (gray). Hue doesn't mind.

    colors[0]=val;

    colors[1]=val;

    colors[2]=val;  

  } else  { 



    base = ((255 - sat) * val)>>8;



    switch(hue/60) {

    case 0:

        r = val;

        g = (((val-base)*hue)/60)+base;

        b = base;

    break;



    case 1:

        r = (((val-base)*(60-(hue%60)))/60)+base;

        g = val;

        b = base;

    break;



    case 2:

        r = base;

        g = val;

        b = (((val-base)*(hue%60))/60)+base;

    break;



    case 3:

        r = base;

        g = (((val-base)*(60-(hue%60)))/60)+base;

        b = val;

    break;



    case 4:

        r = (((val-base)*(hue%60))/60)+base;

        g = base;

        b = val;

    break;



    case 5:

        r = val;

        g = base;

        b = (((val-base)*(60-(hue%60)))/60)+base;

    break;

    }



    colors[0]=r;

    colors[1]=g;

    colors[2]=b; 

  }   

}