Jer Thorp: NY Times: 365/360

Processing visualization head Jer Thorp is putting his money where his mouth and publishing 7 pieces of code in 7 days, free to download and experiment with. Judging from the three that he’s released so far they’re not your standard 20-minute sketches either:

1. GoodMorning! is a Twitter vizualization, showing users around the world popping up on a globe as they utter the magic words “good morning”. With a little geocoding and spherical mapping thrown in, this is a sweet sketch
2. NY Times: 365/360 uses the New York Times open data API to retrieve news stories for an entire year and draw connections between them. The results combine complexity with elegance for that true infoporn look.
3. tree.growth revisits that old classic, the L-system tree. Thorp uses colors and abstract “leaves” to great effect.

With such a strong start, one certainly looks forward to seeing the next four sketches to come. It’s not so common to find sketches of this complexity freely available, so they’re a great study for users who are on the threshold of making more complex applications.

• added functions to FFT for doing forward transforms with an offset: forward(float[] samples, offset) and forward(AudioBuffer samples, offset)
• added a freqToIndex(float freq) method to FFT for finding out the index of the spectrum band that contains the passed in frequency.
• added a stop() method to AudioSample, so that playing samples can be immediately silenced.
• added setPanNoGlide(float pan) to Controller, which will snap the panning setting of a sound to the provided value.
• added setInputMixer(Mixer) and setOutputMixer(Mixer), which allow you to specify which Java Mixer object should be used when obtaining inputs (AudioInput) and outputs (AudioOuput, AudioPlayer, AudioSnippet, AudioSample).

Download from the Minim project page. Read more about the development process on the Compartmental blog.

Marius Watz: Stockspace C2A 0010 (HD)

I’ve uploaded some HD videos from the Stockspace series I did a while back. You can see the whole set on my Flickr: Stockspace set. There you can also see them in proper HD resolution, which helps preserve finer details of the geometry.

These were originally created for use as TV spots for Knight Capital Group. Most of the time they get aired on financial networks very early in the morning, since traders love preparing for the opening of the market by obsessively watching news.

They were also shown on the NASDAQ screen in Times Square once, on an occasion where the Knight CEO rang the morning bell to open the NY Stock Exchange that day. As a recent immigrant to New York that certainly felt gratifying.

The following hack demonstrates how to make a window that has no OS chrome, always stays on top of the UI and has an explicitly set screen position. You can even use the cursor keys to move the window around the screen.

Personally, what I like most about this hack is that it gets around Processing’s (or possibly Java’s) assumptions about a minimum window size of ~120×120. If you specify a size that’s less than 120 on one side, Processing will be pad that side with grey pixels to reach the minimum. But with this hack you can have tiny windows that you can micro-manage to your heart’s delight. I use it to make debug dispays, small control panels and other useful things.

Update: @CedricKiefer pointed out another Processing example that allows for transparent and even irregularly shaped windows. It’s Windows-only apparently, I bet this kind of thing is a major violation of Apple GUI laws anyhow.

Update 2: @ideoforms took my post literally and made a sketch with multiple bouncing windows. Nice.

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

// FloatingWindow.pde
// Marius Watz - http://workshop.evolutionzone.com
// 
// Provides a method for creating frame-less windows with smaller 
// than typical sizes. Also demonstrates how to set the precise
// location of the window on screen, as well as make it float over
// all other windows.
//
// Can be useful if you'd like to make a persistent "debug" app of
// some sort, or just because it's neat when things don't look like
// your everyday operating system.
//
// Works both with P2D and OPENGL.Uses a trick from this Processing hack:
// http://processing.org/hacks/hacks:undecoratedframe
 
PFont fnt;
int W,H,PX,PY;
 
void setup() {
  // W x H == desired size of frame. 
  // Normally, Processing will not create a frame smaller than ~120x120,
  // but will pad the window with blank pixels.
  W=100;
  H=40;
 
  // initial position of frame
  PX=100;
  PY=100;
 
  size(W,H);
  fnt=createFont("Arial",12,false);
}
 
// overriding PApplet.init() to add a hack of our own
void init() {
 
  // trick to make it possible to change the frame properties
  frame.removeNotify(); 
 
  // comment this out to turn OS chrome back on
  frame.setUndecorated(true); 
 
  // comment this out to not have the window "float"
  frame.setAlwaysOnTop(true); 
 
  frame.setResizable(true);  
  frame.addNotify(); 
 
  // making sure to call PApplet.init() so that things 
  // get  properly set up.
  super.init();
}
 
void draw() {
  background(0);
 
  // resize and set initial location a few frames after sketch start. 
  // our window will now be tiny and located at position PX,PY.
 
  if(frameCount==5) {
    frame.resize(W,H);
    frame.setLocation(PX,PY);
  }
 
  // draw window outline
  noStroke();
  fill(255,100,0);
  rect(0,0, width,height);
  fill(0);
  rect(3,3, width-6,height-6);
 
  textFont(fnt);
  fill(255,255,0);
  text(frameCount/10+" | "+
    frame.getLocation().x+","+
    frame.getLocation().y,16,24);
}
 
// the cursor keys may be used to move the window around
void keyPressed() {
  if(key==CODED) {
    if(keyCode==LEFT) frame.setLocation(
      frame.getLocation().x-5,
      frame.getLocation().y);
    if(keyCode==RIGHT) frame.setLocation(
      frame.getLocation().x+5,
      frame.getLocation().y);
    if(keyCode==UP) frame.setLocation(
      frame.getLocation().x,
      frame.getLocation().y-5);
    if(keyCode==DOWN) frame.setLocation(
      frame.getLocation().x,
      frame.getLocation().y+5);
  }  
}

However, I tried the original TileSaver code posted back in 2006 and miraculously that still works. This would imply a larger issue with the unlekkerLib library and Processing 1.0, which I’ll have to address when I have the time.

For now, here is a link to a working Processing sketch using the old TileSaver code: TileSaverTest.zip

In particular, STL export should work again. However I haven’t had the chance to test the code very much, so please let me know if you find any bugs.

• unlekkerLib0003c

Beautiful Connections: Mobile artwork for Nokia E71 (see nokia.co.uk/e71)

I recently had the privilege of being commissioned by Wieden + Kennedy to creating an artwork for Nokia’s new smartphone E71. It’s a new model featuring a full QWERTY keyboard, and is intended to function as a complete communication platform for people on the move. As a response to this purpose, W+K’s campaign focused on the idea of “Beautiful Connections”.

My contribution was a mobile app that allows the user to type in a short SMS-style message, which is then used as the basis for a generative animation that results in a visual compositions of curling forms. The final image can then be sent to other users as a MMS or saved to the phone memory for use as a wallpaper.

Technically it was a challenge to get all the different functions to come together in a single coherent application. The project was developed as a pure J2ME app based loosely on an old version of Mobile Processing. To get a smooth rendering style I chose to use the JSR-226 API for Scalable Vector Graphics, which allowed for properly anti-aliased drawings at the cost of a lower frame rate (approx 7 FPS). Standard J2ME graphics would have given 20 FPS, but the final result would have been less attractive.

All interface elements (menus, text input fields and contact information menu) were built from scratch to avoid the lo-tech feel of the default J2ME UI elements. This required quite a bit of work, but it would have been silly to break the organic feel of the application by using the native phone UI. Instead, the decision was made to make the app feel like a completely upgraded experience. This goal was finally achieved through liberal use of transparent PNGs and old school pixel font trickery.

Visit nokia.co.uk/e71 to see the campaign and download the application (it’s free!) Make sure to also check out the four excellent videos produced by Carl Burgess, Universal Everything, Field and SHFT. To complete the Beautiful Connections concept the web site also features an interactive message generator built in Flash that allows you to create images using live sound and web cam input.

My thanks to the Wieden + Kennedy crew for inviting me to do this project, in particular to Sermad Buni and Louis-Philippe Tremblay for their excellent support. My thanks also to Nokia for having the vision of wanting artworks on their phones. Now, if only Apple would create a category for art on their App Store…

Marius Watz: Conical (prints released on Cronica Electronica)

I just completed a new series called Conical, which was initiated as an artwork for the Cimatics festival but never used. So when Miguel Carvalhais from the Cronica Electronica label asked if I would do a cover for Morten Riis’ Digital Sound Drawings, I was happy to have a chance to bring the project to a good conclusion.

In addition to the cover artwork for the album (released as a downloadable rather than as a physical CD), we are releasing a series of 10 limited Conical prints as part of the Cronica Limited series:

Conical is an investigation of a 3D form composed of lines that trace out segments of multiple cones. Seen at a distance, the form becomes a spatial volume. Zooming in, the sense of volume disappears and the form becomes a 2D surface. The image resolves into a complex pattern of optical interference, without any depth cues to indicate its 3D nature.

The 10 prints are 40×40 cm archival inkjet prints, released as uniques and signed by the artist. The price is a modest €125 per print. You can see all 10 images here.

Code, Space, Form, February 3-7 at CMU, Pittsburgh

The eminent Golan Levin has just announced a symposium titled “Code, Space, Form”, featuring C.E.B. Reas, MOS Architects, Ben Pell and yours truly. Hosted by Carnegie-Mellon University, it’s a multi-day affair with lectures and workshops, culminating in an exhibition at the Pittsburgh Center for the Arts. It should provide an interesting discussion of the implications of generative strategies in art and architecture.

Here is the info from Golan’s blog, hope to see you there if you’re anywhere within range of Pittsburgh:

I am delighted to announce “Code, Form, Space”, a mini-symposium about generative form and digital fabrication, which will be held at Carnegie Mellon University during the week of February 3-7. Nearly all of the events are completely free and open to the public – and include lecture presentations by such distinguished computational artist/designers as C.E.B. Reas, Marius Watz, Ben Pell, and Michael Meredith and Hilary Sample of MOS Architects. I’m co-directing this event in collaboration with Jeremy Ficca (Professor of Architecture and Director of the CMU Digital Fabrication Lab), the CMU School of Art Lecture Series, and the Pittsburgh Center for the Arts.

• Code, Form, Space poster and brochure (PDF)
• CMU School of Art: “Code, Form, Space”

Lukas Vojir: Processing Monsters

Czech Processing hacker Lukas Vojir has come up with a great project to test out your coding skills: Make your very own Processing Monster!

Essentially, these “monsters” are little black and white interactive sketches, in which all manners of strange dark creatures stand ready to react to the user’s poking and prodding. It’s surprisingly effective in its simplicity, once again reminding you that simple narrative devices are often the best.

Lukas is currently soliciting collaborators who want to contribute to the online bestiary, if you have a minute I would definitely recommend giving it a go. Now, if only I had the time to make that scary multi-tentacled squid beast…

For more about Lukas Vojir, take a look at his portfolio site rmx.cz or his Tumblr blog.