Curated by Becky Koblick for Light and Wire Gallery
JULY 24 – SEPTEMBER 4, 2010In this project Ciocci and Crouse have redesigned Light and Wire Gallery’s characteristic website so that every time you visit a new page, a different layout or WordPress Theme is loaded behind the gallery’s usual content. Crouse’s code randomly loads 1 of 20 different Themes, while Ciocci has visually modified each one. Fundamentally, the WordPress theme system is a way to “skin” one’s website. Not only does this determine the look of the site but the WordPress themes can provide control over the presentation of the material on a website. As one clicks through each theme, this generic design platform that largely informs the aesthetics of the web is revealed for its amateur quality.

— DESCRIPTION FROM LIGHT & WIRE’S SITE

“Source Companion” team, originally uploaded by jefftimesten.

Ayah, Aaron and I take a night off to have a drink at Cafe de Prague in Hamra. She described this as “a total hipster bar,” which is, of course, why she took us there.

http://4u.jeffcrouse.info/of/ofxOpenCviPhone.zip
— This version has OpenCV2.0 compiled for armv6 and armv7 in a single universal. I didn’t bother to compile for i386 because the camera doesn’t work in the simulator and that’s what I was using it for. But if someone wants to throw that into the universal too, please let me know.

Also, Timothy was nice enough to send me OpenCV1.1 – apparently the most stable version ATM? — compiled for arm, so if you want to get these and replace them, you can do that also.

<?php
// Change this!
$query = "There's no such name as Brahbrah";

// WordPress supplies search results in JSON format.
$url = "http://en.search.wordpress.com/?f=json&q=".urlencode($query);
$contents = file_get_contents($url);
$posts = json_decode($contents);

// Now loop through all of the results
if($posts != NULL)
foreach($posts as $post):
?>
	<!-- Here is where all of the entries get printed out -->
	<h2><a href="<?php echo $post->link; ?>"><?php echo $post->title; ?></a></h2>

	<p>by <?php echo $post->author; ?> on
	<?php echo date('l jS \of F Y h:i:s A', $post->epoch_time); ?></p>

	<p><?php echo $post->content; ?></p>

<?php endforeach; ?>

PS: If your server complains about ‘file_get_contents’, paste in this function and replace ‘file_get_contents’ with ‘curl_get_contents’

function curl_get_contents($url) {
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_USERAGENT, 'Googlebot/2.1 (+http://www.google.com/bot.html)');
	curl_setopt($ch, CURLOPT_REFERER, 'http://www.google.com');
	curl_setopt($ch, CURLOPT_ENCODING, 'gzip,deflate');
	curl_setopt($ch, CURLOPT_AUTOREFERER, true);
	$data = curl_exec($ch);
	curl_close($ch);
	return $data;
}

The 4.0 release of the iPhone OS has introduced access to the pixel data of the live camera stream through the AVCaptureDevice class in the AVFoundation framework.  Want to use it?  OK!

If you want the SUPER SIMPLE way and just want to start playing around immediately, get this version of oF that I fixed up for the 4.0 OS.

http://4u.jeffcrouse.info/of/of_preRelease_v0061_iPhone4_FAT.zip
otherwise (and I recommend it), read on.

NOTE: This is written for OSX/XCode.  I have no idea about other platforms.

1. Of course, make sure you have the iPhone OS 4.0 and the iPhone version of oF
2. Copy the emptyExample and rename it to something else
3. You’ll probable have to fix some settings in your new project
   1. Go to Project > Edit Project Settings
   2. Change “Base SDK” to iPhone Device 4.0 (this stuff won’t work on anything else – even the 4.0 Simulator)
   3. I usually have to change the Target settings also.  Project > Edit Active Target “Blah”
4. Toggle between “release” and “debug” in the build type dropdown to get the frameworks (libs > core > core frameworks) to switch over to 4.0.  If they are still red after doing this, something went wrong.
5. Add the following frameworks by right-clicking on the “core frameworks” folder and selecting “Add > Existing Frameworks”
   1. CoreVideo.framework
   2. CoreMedia.framework
   3. AVFoundation.framework
6. Fix FreeImage
   1. Easy Way: Replace your libs/FreeImage folder with this one: FreeImage.  You’ll have to also remove the existing one from your XCode project and drag this one in.
   2. Hard Way: Read this in the oF forum
7. get ofxiPhoneVidGrabber and put it in your addons folder
8. Get the example: iPhoneVidGrabberExample and put it in your apps/[something] folder
9. Run and enjoy!

Want to use OpenCV too?

1. Add this to your addons folder: ofxOpenCviPhone
2. Add this to your apps/iPhoneSpecificExamples folder: openCviPhoneExample
3. Run and enjoy!

What happened there?

To use OpenCV, you have to recompile it for arm6.  I also added a function to ofxCvColorImage so that you can feed it a 4 channel IplImage* and it will know how to convert it to 3 channels.  If this doesn’t make sense to you, you probably shouldn’t read any further.  But if you are really curious, here is how I compiled for arm6.  I couldn’t figure out the configure flag to leave out JPEG support, so the 5th step is a little ghetto.

1. Make a copy of the ofxOpenCV library from the normal oF distribution.
2. Get OpenCV 1.0
3. expand the file you just downloaded
4. crack open a terminal and ‘cd’ to the resulting directory
5. mkdir build; cd build; ../configure --prefix=/path/to/somewhere/stage --without-imageio --without-python --without-swig --disable-apps --disable-dependency-tracking --without-carbon --without-quicktime --enable-shared --without-gtk --host=arm-apple-darwin10 CXX=/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/g++-4.2 CXXFLAGS="-arch armv6 -isysroot /Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS4.0.sdk"
6. Open build/cvconfig.h and change:
#define HAVE_JPEG
   to
   //#define HAVE_JPEG
7. make
8. make install
9. Now the include and lib folders that you need are in /path/to/somewhere/stage. Replace them with the stuff in the ofxOpenCV that you got from the normal oF distro.

10. Here is what I replaced in ofxCvColorImage

    void ofxCvColorImage::operator = ( const IplImage* _mom ) {
    	if( _mom->width != width || _mom->height != height ||
    	   _mom->depth != cvImage->depth) {
    		ofLog(OF_LOG_ERROR, "in =, images need to match in size and depth");
    		return;
    	}
    	switch(_mom->nChannels) {
    		case 3: cvCopy( _mom, cvImage );
    			break;
    		case 4: cvCvtColor( _mom, cvImageTemp, CV_RGBA2RGB );
    			break;
    		case 1:  cvCvtColor( _mom, cvImageTemp, CV_GRAY2RGB );
    			break;
    		default: ofLog(OF_LOG_ERROR, "in =, nChannels not allowed.");
    			return;
    	}
    	swapTemp();
    	flagImageChanged();
    }
    

Please let me know if there is anything I need to correct here.

Esse, Nosse, Posse

common wealth for common people

I wasn’t able to go to Miami, where it was used, but Jacob Milam took some videos and pictures.  A video of a runway show floats around the screen, following the users face, while the liquid simulation (thanks Memo! www.memo.tv/ofxmsafluid) in the background reacts to the users silhouette.

I’m now trying to figure out what I should release that would actually be useful for people.  I ended up making a kind of comprehensive ComputerVision class that does

1. smile detection
2. Face detection (using ofxCvHaarTracker)
3. optical flow (using ofxCvOpticalFlowPyrLK)
4. FERN detection
5. blob detection w/background subtraction

It’s all pretty well optimized, and easily configurable.  Of course, it can’t do all of these things at once — too much CV!  Eh – nothing special, but if you want it, it’s yours!

JSONExample: using json-cpp in openFrameworks. XCode format

NOTE: you will need this updated version of ofxHttpUtils_03 and ofxThread (which comes with the FAT version of oF) to run the example.

I wish I could take credit for putting this into some form at some point, but I honestly don’t remember.

All I am doing here is using the HTTP stuff in Poco to download the source of a page (in this case, the Yahoo Finance page for Google), and then doing a regular expression on the result to get the particular bit of code that I am interested in (in this case, the stock price listed on that page). If you are dealing with well-formed XML (like RSS), you could also use the XML library that is part of Poco for more structured parsing — but that’s not what I need here.

Most of this was stolen from the poco distribution:  poco-x.x.x/Net/samples/httpget/src/httpget.cpp

First you have to import the right headers and declare the namespaces.  This should be done in testApp.h

#include "Poco/Net/HTTPClientSession.h"
#include "Poco/Net/HTTPRequest.h"
#include "Poco/Net/HTTPResponse.h"
#include "Poco/StreamCopier.h"
#include "Poco/Path.h"
#include "Poco/URI.h"
#include "Poco/Exception.h"
#include "Poco/RegularExpression.h"

using Poco::Net::HTTPClientSession;
using Poco::Net::HTTPRequest;
using Poco::Net::HTTPResponse;
using Poco::Net::HTTPMessage;
using Poco::StreamCopier;
using Poco::Path;
using Poco::URI;
using Poco::Exception;
using Poco::RegularExpression;

Then you can run this code wherever you need to in your testApp.cpp

try
{
	URI uri("http://search.yahoo.com/search?p=GOOG");
	std::string path(uri.getPathAndQuery());
	if (path.empty()) path = "/";

	HTTPClientSession session(uri.getHost(), uri.getPort());
	HTTPRequest req(HTTPRequest::HTTP_GET, path, HTTPMessage::HTTP_1_1);
	session.sendRequest(req);
	HTTPResponse res;
	istream& rs = session.receiveResponse(res);
	std::cout << res.getStatus() << " " << res.getReason() << std::endl;

	string result;
	StreamCopier::copyToString(rs, result);

	RegularExpression re("<li class=\"price\">([0-9\\.]+)</li>");
	RegularExpression::MatchVec matches;
	re.match(result, 0, matches);

	// result.substr(matches[0].offset, matches[0].length)  -- contains the entire matched <li>
	// result.substr(matches[1].offset, matches[1].length) -- contains the subpattern inside the ()
	cout << result.substr(matches[1].offset, matches[1].length) << endl;
}
catch (Exception& exc)
{
	std::cerr << exc.displayText() << std::endl;
	exit();
}

The regular expression matcher returns a vector of Match objects, which just contain the offset and length of each match.  If you aren’t familiar with regular expressions, this probably doesn’t make much sense.  But, as it says in the code, you now have 2 matches that you can use as you please.
result.substr(matches[0].offset, matches[0].length)  contains the entire matched <li>
result.substr(matches[1].offset, matches[1].length)   contains the subpattern inside the ()

The gifs were made with ofSaveScreen(), mogrify and gifcicle. Basically I exported a bunch of frames and then ran the following:

mogrify -resize 50% -format gif *.png
gifsicle --delay=10 --loop *.gif > anim.gif


oF source — from forces

forces

5 more after the break.

oF source — from forces

attractor

oF source — from particle systems

repel

oF source — modified from particle systems

fountain

oF source — from steering behaviors

boid

oF Source — from steering behaviors

Flocking pattern

oF Source — from steering behaviors

path following (not fully debugged)

A prototype of a pair of covert stereoscopic video recording glasses I developed with Reggie

This residency would help me complete the first two steps, in which I will develop a series of performances with comedian and musician Reggie Watts utilizing projection, augmented reality and other computer vision techniques, speech-driven generative content, and a custom-made stereo vision device. The second step is a “summit” of comedians and programmers, the goal of which is to generate ideas around humor and software and start collaborations on new projects.

Reggie Watts

Reggie Watts does London

F_CK SH_T STACK

Reggie on Late Night with Jimmy Fallon

[See post to watch Flash video]

Jeff Crouse

The World Series of ‘Tubing is a conceptual augmented reality game played in front of a live audience, combining the intensity of a high-stakes poker tournament with the world of sensational online video.

Invisible Threads is a mixed reality performance installation that explores the growing intersection between labor, emerging virtual economies and real life commodities through the creation of a designer jeans sweatshop in the metaverse Second Life.

Inside the Artist’s Studio is a radio program hosted by a robotic Chimpanzee named James Chimpton. Chimpton’s brain is powered by a markup language I created called ABSML, or A BullShit Markup Language. The result is rather absurd – a clothed robotic monkey, interviewing artists in the Biennial about their work, in a robotic english accent.

Thank you and good day.

One of the mind-numbingly obtuse arguments used by religious people to validate their beliefs is that they depend on their religion for moral guidelines. Because, as everyone knows, there is nowhere else to look for rules about how to treat your fellow man.  So, as the mouth of God on Earth, the Pope would have to be the model of morality, right?

I was talking to some friends today and they weren’t aware of the spread of the Catholic priest “incidents” into Ireland and now Germany. The NPR podcast below gives some of the finer points. As it turns out, the Pope was probably involved when he was a priest in Munich! I really don’t understand how the Catholic church intends to come back from this incident without some kind of dramatic pruning of every level of the clergy, including the Pope.

Please listen to this podcast.  It really reveals the Catholic church for what it really is:  an dirty old man club to end all dirty old man clubs.

NPR: 03-21-2010 Religion

Stories:

1. More Abuse Allegations Anger Germany’s Catholics
2. Scandal-Hit Catholic Church Still Integral To Irish
3. Vatican Rejects Pope Role In Sex Abuse Cover-Up
4. Is The Bible More Violent Than The Quran?

On the other hand, is priest/boy love such a bad thing? Where is the North American Priest/Boy Love Association?

PandaStream

From the Panda site:

Unlike other video platforms, Panda is not just a service for encoding your videos for the web; Panda handles the whole process. From the upload form to streaming, Panda takes control.

Requirements

You’ll need a few things to get up and running.  These instructions are specifically for using the new Beta service that Panda is offering, and storing your videos on AmazonS3.  If you aren’t familiar with S3, it’s basically ridiculously cheap dumb (as a bucket) storage.  “Dumb”, because it doesn’t run PHP or any other applications or do any of the cool stuff that other web hosts do.  It’s just a shitload of storage space in the cloud that costs about 30 cents a month if you are moderately active. So, here is what you should make sure you have before you get started:

• A PandaStream beta account. The signup for this should be right on the front page. This account will provide you with 1 “encoding cloud” – the thing that is going to take care of all of the converting and uploading and stuff.  This is a new service, but they are being pretty generous with the beta accounts, so it’s not too tough to get one.
• Amazon S3 account. Here is a tutorial about setting up an S3 account. It is a pretty typical typical signup process.  S3 is a protocol LIKE FTP, but it’s NOT FTP.  So, there is a chance that your FTP client will support connecting to your S3 account, but you might need to download an app like S3Hub or BucketExplorer.
• An Amazon s3 bucket: Here is a tutorial about creating a bucket.  You must give your bucket a unique name.
• A web server running PHP.  If you are going to do more complicated stuff like storing views and stuff you will probably want MySQL too — but that is not covered in this tutorial.

keep reading after the break!

Gathering Materials

PandaStream is an open source project that uses a lot of common open source stuff.  Gathering this stuff together is an annoying but necessary step.  Your panda directory should look like the image on the right after you are done.

• panda_uploader (direct link to zip from github) Unzip the archive – We are only interested in the ‘panda_uploader’ folder, so drag that into your Panda folder and trash the rest.
• panda_client_php (direct link to zip from github) Unzip the archive – we are only interested in ‘panda.php’, so drag that into your Panda folder and trash the rest.
• JWPlayer – the Flash animation that is going to actually play your video.  It is equivalent to the “chrome” around a YouTube video – the buttons and stuff that let you stop, play, jump around with the playhead, and even gives you embed code and lets you mail the video to a friend.
• swfobject_2_2.zip – Some JavaScript that generates the embed code for the JWPlayer.
• panda_starter_kit.zip To save you the trouble of creating the files I describe below, I’ve zipped them all up into an archive so you can just download them. Move all of the files inside into your Panda folder.  If you don’t care what they do, just skip the “The Files” section and go right down to “Setup”

The Files

header.php

This file connects to the Panda API so that you can upload, get information about your videos, and other good stuff. It also imports the javascript and CSS that is used by PandaStream.

<?php
require_once("panda.php");  // include the Panda API
$panda = new Panda(array(
  'api_host' => 'api.pandastream.com',
  'cloud_id' => 'your-panda-cloud-id',
  'access_key' => 'your-access-key',
  'secret_key' => 'your-secret-key',
));
$s3_bucket_name = "your-bucket-name";
?>
<html>
<head>
<title>my.tv</title>
    <script src="swfobject/swfobject.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="panda_uploader/jquery.panda-uploader.min.js" type="text/javascript"></script>
    <link href="styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>

upload.php

You will access this file to upload new videos to your S3 account.

<?php
include("header.php");
$signed_params = $panda->signed_params('POST', '/videos.json');
$json = json_encode($signed_params);
?>
<form action="" method="post">
	<span id="upload_button"></span>
	<div id="upload_progress" class="panda_upload_progress"></div>
	<input type="text" id="upload_filename" class="panda_upload_filename" disabled="true" />
	<input type="hidden" name="panda_video_id" id="returned_video_id" />
	<input type="submit" value="Upload video" />
	<script>
	$("#returned_video_id").pandaUploader(<?=$json?>, {
		upload_button_id: 'upload_button',
		upload_filename_id: 'upload_filename',
		upload_progress_id: 'upload_progress',
		uploader_dir: 'panda_uploader'
	});
	</script>
</form>
<?php include("footer.php"); ?>

add_profile.php

<?php
require_once("api.php");
$panda->post('/profiles.json', array(
	'title' => 'My custom profile',
	'category' => 'desktop',
	'extname' => 'mp4',
	'width' => 320,
	'height' => '240',
	'command' => 'ffmpeg -i $input_file$ -f mp4 -b 128k $resolution_and_padding$ -y $output_file',
));
$profiles = $panda->get('/profiles.json');
print_r($profiles);
?>

index.php

<?php
include("header.php");
$videos = json_decode($panda->get('/videos.json'));
foreach($videos as $video):
	$panda_encodings = json_decode(@$panda->get("/videos/{$video->id}/encodings.json"));
	$encoding = $panda_encodings[0];
?>
	<div class="vid_container">
		<b><?php echo $video->original_filename; ?></b>
		<div id="flash_container_<?php echo $encoding->id ?>">
			<?php if($video->status =='success'): ?>
				<a href="http://www.macromedia.com/go/getflashplayer">Get the latest Flash Player</a> to watch this video.
				<script type="text/javascript">
					swfobject.embedSWF(
						"mediaplayer-viral/player-viral.swf",
						"flash_container_<?php echo $encoding->id ?>",
						"<?=$encoding->width ?>",
						"<?=$encoding->height ?>",
						"9.0.115",
						"swfobject/expressInstall.swf", {
						file: "http://<?=$s3_bucket_name?>.s3.amazonaws.com/<?=$encoding->id?><?=$encoding->extname?>",
						width: <?php echo $encoding->width ?>,
						height: <?php echo $encoding->height ?>,
						fullscreen: true,
						controllbar: 'over'},
						{wmode:"transparent",allowfullscreen:"true"},
						{align: "top"}
					);
				</script>
			<?php else: ?>
				<p><?=$video->status?></p>
			<?php endif; ?>
		</div>
	</div>
<?php endforeach;  // end foreach(videos) ?>
<?php include("footer.php"); ?>

Setup

The only thing you really need to do is edit header.php and replace

• your-panda-cloud-id
• your-access-key
• your-secret-key
• your-bucket-name

You will find this information on account.pandastream.com.

Once you have inserted your info into header.php, upload everything to your server!  Let’s say, for argument, this is http://www.yourdomain.com/panda

Adding an Encoding Profile

In order to upload a video, you have to add at least one encoding profile. This will tell Panda how to re-encode your videos once you upload. There is a full explanation of encoding profiles by the PandaStream guys. If you want to customize the way your videos are encoded, edit your add_profile.php file.

If you are okay with the default, just point your browser to http://yourdomain.com/panda/add_profile.php This will add a profile to your Panda account. You should see some text that looks like this:

[{"created_at":"2010/03/19 17:49:33 +0000","command":"ffmpeg -i $input_file$ -ar 22050 -ab 64k -f flv -b 256k $resolution_and_padding$ -y $output_file$","title":"Flash FLV (Medium)","updated_at":"2010/03/19 17:49:33 +0000","extname":".flv","id":"f9bb8f4f840bb4f4d335ea620b25ad0d","height":240,"width":320}]

Start Uploading!

If all has gone well, you should be able to go to http://www.yourdomain.com/panda/upload.php and see this:

After you have finished uploading a few test videos, head to http://www.yourdomain.com/panda and you should see something like this:

What Next?

If this was useful to you, leave a comment and I will make some more tutorials as I get further with my own Panda projects.  This will include:

• using the auto-generated thumbnails
• creating sub-pages for videos
• deleting videos
• adding custom titles
• comments
• view tracking
• what to do if you don’t have CURL installed on your server

1. I made a new user – just to keep all of the red5 stuff quarantined from the rest of my stuff.
2. SSH in as that user: ssh your-user@yourdomain.com
3. Add the following lines to the .bash_profile for that user:
export JAVA_HOME=/usr/local/dh/java
export ANT_HOME=$HOME
export PATH=$PATH:$ANT_HOME/bin

4. Make a directory called ‘source’ and enter it..
   mkdir source && cd source
5. You need ant to build Red5, so download it into your source folder:
   wget http://www.bizdirusa.com/mirrors/apache/ant/binaries/apache-ant-1.8.0-bin.tar.gz
6. Unzip it
   tar -xvf apache-ant-1.8.0-bin.tar.gz
7. Move the ‘bin’, ‘etc’ and ‘lib’ folders to $HOME
8. svn checkout http://red5.googlecode.com/svn/java/server/trunk/ red5-read-only

9. cd source/red5-read-only/
10. ant ivyclear dist
11. cd dist/
12. chmod 755 red5.sh
13. screen
14. ./red5.sh
15. Now you should be able to access a test page at http://yourdomain.com:5080/ and the endpoint for your services will be rtmp://yourdomain.com:1935/yourAppName (the ‘:1935′ might be redundant, but just to be safe)

I am still working on making a simple recording tool, but this will at least get the server running.  Comments/complaints welcome!