Processing: Sketch_081001a, and how to embed a sketch in a wordpress post

Screenshot of processing app

I downloaded my first copy of Processing (Processing.org) a few years ago, but I have never gotten past the initial few demos and small tutorials. I’ve been interested in generative computer art for many years, ever since I first saw the work of Marius Watz in the mid nineties and had a stint reading dadaist poetry and cutups, but I’ve never had the time to play with this stuff myself. Or the brains to handle the math, hehe. But then I came across this tutorial in Computer Arts #149 (The June 2008 issue), where there are a few really interesting tutorials, which basically gives you enough info to understand the key consepts that you need to create some very interesting apps, like the one below (slightly modified of course, I added random colors among other things).

(java applets no longer functions in Google Chrome). Nothing you can do about that.)

Oh, and I had quite a hard time finding out how to embed my app in my wordpress blog. I kept getting some heavy errors when I tried to post the html the Processing software generates straight into WordPress, but I eventually got it to work. Since I couldn’t find any tutorials on how to do this, I decided to write my own. So here it is:

How to embed a processing java application in wordpress:

First, you have to turn off the Visual editor for your user, if you don’t, wordpress will 100% garanteed screw up your code. And remember, if you turn the Visual editor back on after finishing editing your post, then DON’T open the post for editing again. When I did this wordpress replaced my embed code for java with a flash embed code!!! Luckily I had saved this article as a Google Docs document, and could simply copypaste it in here again.

(* Update: This might also be related to Adblock plus, but needs to be verified)

Second, paste in this code (just remember to replace the variables with where you’ve put your own .jar file etc. You get all the info you need when you choose File and Export in Processing, and open up the resulting index.html file in an editor of your choice. Note: the applet tag is slightly depricated, so I guess I have to figure out to do this with a “proper” object + embed.

<APPLET name="sketch_081001a" WIDTH="500" HEIGHT="500" archive="https://pappmaskin.no/opensource/processing/sketch_081001a/sketch_081001a.jar" standby="Loading Processing software…" codebase="https://pappmaskin.no/opensource/processing/sketch_081001a/" code="sketch_081001a" mayscript="true" scriptable="true" image="https://pappmaskin.no/opensource/processing/sketch_081001a/loading.gif" boxmessage="Loading Processing software…" boxcolor="#FFFFFF"><IMG SRC="https://pappmaskin.no/opensource/processing/sketch_081001a/loading.gif" WIDTH="1" HEIGHT="1" /></APPLET>

Source Code:

And here is the source code for this lille app, just create a new Sketch in Processing and paste it in and run it. Should work like a charm.
int x1;
int x2;
int x3;
int y1;
int y2;
int y3;

void setup() {
size(500,500);

x1 = width/2;
y2 = height/2;
x2 = x1;
y2 = y1;
x3 = x1;
y3 = y1;
}

void draw(){
//for (int i=0; i<1000; i+=1) {
x2 = constrain( (x2-20+(round(random(40)))), -30, width+30);
y2 = constrain( (y2-20+(round(random(40)))), -30, width+30);
smooth();

//draws a triangle
fill(round(random(255)),50,100);
triangle(x1, y1, x2, y2, x3, y3);

// the triangles are joined here

x3=x2;
y3=y2;
//}
//noLoop();

}

Or get the source code here: sketch_081001a

PITARU – Sonic wire scultpture

PITARU

Description

At its simplest form SonicWireSculptor is a novel 3D drawing tool and a unique musical instrument, but perhaps most important – its just fun to play with. The project started out as a personal instrument for Pitaru to perform on. During concerts, audience members often inquired whether they could experience the tool first hand. This encouraged Pitaru to transform the software into an immersive public installation. The installation included enhancements to the original work, allowing a wider range of users to intuitively interact with the environment. Gallery visitors would enter a dark room with a surround-sound system, a projection and a unique drawing station. Opening nights for these exhibits would often double as performance and workshop events where the audience and Pitaru explore the tool together. Participants would be encouraged to add their work to a steadily growing collection of beautiful and surprising sonic-sculptures. Today, this collection includes work from professional illustrators, poets, 9 year-olds and their parents, musicians of various genres, as well as Pitaru’s own personal compositions (which he considers to be the least interesting in the collection).

Technical Realization

The software was designed and optimized to work at 120fps (or better) on a regular household dell and a home-theater 7.1 surround system. It was important to have the system deployable as small koisks as well as fully immersive surround-sound environments. To do so, the software was written in C++, using OpenGL for nVidia/ATI optimization and the FMOD sound library with optimization for the Audigy sound cards. A Pressure/Tilt sensitive Wacom Cintiq driver was written as a preferred input device, although a regular mouse can be used as well. A RF telecommunication API was written for enabling gallery attendant to save audience work with a touch of a button via remote-control. All code was then ported to Mac OSX for flexible deployment.

3D matrix math was written at a low-level to allow the novel interactive experience of the tool. This interaction method has proven efficient in several other applications, including medical imaging and commercial 3D modeling tools.

Tom Igoe – Physical Interaction Design Using Processing

Warning: file_get_contents(): php_network_getaddresses: getaddrinfo failed: Name or service not known in /customers/7/5/b/pappmaskin.no/httpd.www/wp-content/plugins/delicious_screenshots/wp_delicious_sceenshots.php on line 75Warning: file_get_contents(http://feeds.del.icio.us/v2/json/mskogly/physicalcomputing?Fcount=3): failed to open stream: php_network_getaddresses: getaddrinfo failed: Name or service not known in /customers/7/5/b/pappmaskin.no/httpd.www/wp-content/plugins/delicious_screenshots/wp_delicious_sceenshots.php on line 75Warning: Invalid argument supplied for foreach() in /customers/7/5/b/pappmaskin.no/httpd.www/wp-content/plugins/delicious_screenshots/wp_delicious_sceenshots.php on line 79

Notes from a presentation by Tom Igoe
at FlashForward 2005.

Lecture notes:
http://www.tigoe.net/workshops/flashforward05/
http://tigoe.net/pcomp/

Using the serial port and a pc to create interactive art and toys.

One of the more liberating ideas that’s come out of the past couple decades is amateur software development. Instead of seeing software as something that’s handed down from “the professionals”, we see it as a very flexible toolkit. This attitude hasn’t yet taken hold on the hardware side. The basic physical interfaces we’ve got for the computer don’t meet the demands of every profession, and there are many needs that go unmet because there’s just not a big enough market for a hardware vendor to bother making a specialized widget. We’ve already accepted the idea that if no one makes the software you need, you can develop it yourself. The same is true, or can be, with hardware. This is the spirit behind physical computing.

About InstantSOUP.

InstantSOUP is intended for an audience of design students – interaction design, product design, architecture – and for people who work with Macromedia Flash™ and Action Script.
It makes the first steps into the world of physical prototyping almost as easy as preparing Instant Soup.
InstantSOUP is a way to connect the virtual and physical worlds. It teaches how to make physical input devices for games, how to connectrepurposed electronic gadgets to Flash, how to activate physical objects from remote locations and even how to create little robots.


Processing 1.0 (BETA)

Warning: file_get_contents(): php_network_getaddresses: getaddrinfo failed: Name or service not known in /customers/7/5/b/pappmaskin.no/httpd.www/wp-content/plugins/delicious_screenshots/wp_delicious_sceenshots.php on line 75Warning: file_get_contents(http://feeds.del.icio.us/v2/json/mskogly/physicalcomputing?Fcount=3/mskogly/processing?Fcount=6): failed to open stream: php_network_getaddresses: getaddrinfo failed: Name or service not known in /customers/7/5/b/pappmaskin.no/httpd.www/wp-content/plugins/delicious_screenshots/wp_delicious_sceenshots.php on line 75Warning: Invalid argument supplied for foreach() in /customers/7/5/b/pappmaskin.no/httpd.www/wp-content/plugins/delicious_screenshots/wp_delicious_sceenshots.php on line 79

Processing 1.0 (BETA)

“Processing is an open source programming language and environment for people who want to program images, animation, and sound. It is used by students, artists, designers, architects, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is developed by artists and designers as an alternative to commercial software tools in the same domain.”

Damn!

http://processing.org/
http://www.interaction-ivrea.it/en/news/press/photos/2005/strangely/index.asp
http://www.generatorx.no/

Processing love