@mariuswatz websaver awe.sm/5daM6 is a great way to use a processing.js sketch as a screensaver. Here’s mine: viz.runningwithdata.com/boids/

— Jason Sundram (@jsundram) January 28, 2012

Websaver runs on MacOS and allows the user to specify a web page to load when the screensaver is active. And since it uses Safari to render the HTML (I assume), you can use HTML5 and Processing.js to run computational sketches on that web page.

It’s a nice hack to enable easy development of screensavers based on open web standards, without having to worry about interaction with the OS etc. In fact, it’s nearly as good as my Google Chrome screensaver idea, minus an app store etc.

Productivity charts generated by RescueTime.com tracker

The next two weeks I am teaching a workshop in Information Visualization and Self-Ethnography for the Interaction Design course at AHO. I’ll be posting links and resources here on the blog in the next few days.

Required Reading

• Gary Wolf: The Data-Driven Life (NYTimes.com)
• Shawn Allen: Introduction to Information Visualization course at SVA
• Wikipedia: Lifelog

Data collecting tools

• Daytum
• your.flowingdata
• RescueTime
• FourSquare
• Last.fm (music)
• MoodTracker (too medicine-specific?)
• EverNote
• Mindjet MindManager (commercial)

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…

A new online storage contender: Dropbox

Digital nomads and data paranoiacs everywhere tend to be big fans of online storage, and I am no exception. I’ve been using Box.net to share large files with clients and colleagues for a long time. It’s a great service with a nice GUI, with good support for sharing files. Their service record is excellent, I’ve never had any with service outages or trouble uploading.

However, the storage limit on the basic Box.net plan is only 5 GB for $7.95 / month. They offer an upgraded plan with 15 GB, but I’m not prepared to pay $19.95 every month for a few gigabytes. I’d be happy to pay up to $10 / month, but in return I want enough storage that I can use it without worrying about running out of space. 50 gigs or more would be sufficient for that purpose.

Shopping around, I’ve found JungleDisk to be a great solution for genuine online backup. It’s based on Amazon AWS storage, and users are charged according to actual storage used. I currently store 14 gigabytes, which last month cost me a measly $3.56 for last month including transfer fees. Compared with the one-off $20 purchase of the software, this is a very reasonable option.

JungleDisk uses a desktop application for its operations, so it’s well integrated in the native file system and supports automated backup tasks. I have it set up to safeguard key folders like current projects, office documents etc. I can also access files interactively through a cached network drive, which allows me to download old projects and large media files even while travelling.

Dropbox is a new storage service that has only just come out of beta, and it looks very promising so far. It combines a dynamic web interface with a desktop application, providing the best of both worlds. The software sets up a sync’ed folder on your computer, so that editing folder structures and uploading files is as easy as copying files around your file system. Files uploaded through the web interface will be downloaded and sync’ed with the local folder.

The web interface allows you to set up file sharing with other Dropbox members. So far a few features are missing that would make it easy to share files with non-members. There is a public folder that you can use to provide public URLs to specific files, but it still lacks the important feature of sharing public folders.

According to a recent blog post Dropbox plans to offer 2 GB for free and 50 GB for $9.99 / month, or $99.99 / year. Sounds like just the right deal for my purposes. I’m looking forward to seeing how it develops. But even if I end up switching from Box.net I’ll probably keep JungleDisk for backing up larger projects.

Burak Arikan: Twitter Networks / Jeff Clark: TwitArcs

In general, I’m a fan of social software, believing that it has great potential to be useful in the overlapping spheres between the personal and the professional. Nevertheless, I’m somewhat of a late comer to the Twitter revolution. Despite early enthusiasm from smart people like Tom Carden, I initially saw it mostly as a pseudo-chat medium and a potential timewaster. I signed up, then never came back.

However, a recent conversation with Burak Arikan about Twitter and collective thinking made me revisit the Twitter network. And guess what? I like it. Sure, there’s plenty of noise in the Twittersphere. But by wisely choosing whose streams to follow, Twitter becomes much like a collective conversation, providing in-progress snapshots of thoughts and ideas from some people I have come to know and admire.

At its best, Twitter is like a Hive Mind, echoing with ideas and spontaneous viewpoints.
By using a tool like Twhirl or Twitterfox, Twitter becomes an ambient information feed that you can tune in and out of at leisure. Its immediacy means that you’ll never experience the blog reader’s guilt of having 500 unread items in your feed reader. But by following the twitters of interesting people you’ll quickly find links to useful resources and learn about their creative processes.

Twitter tools & visualizations

The following are some recent Twitter-related resources that give an idea of the bigger Twitter picture, including network visualizations and Twitter hacks a little outside the mainstream. Feel free to post comments with links to interesting Twitter tools and hacks.

• Burak Arikan: Growth of a Twitter Graph
• Jeff Clark: TwitArcs / Twitter Spectrum / Twitter StreamGraphs
• explore.twitter.com – Index of Twitter tools, including the Twitter Blocks visualization (created by a Stamen team including the aforementioned Tom Carden)
• Twitterfeed.com – Tool for syndicating a RSS feed as a Twitter stream)
• Twistori – Visualization of twitters relating to emotional states
• Twittervision – Geographical visualization of public twitters

My own Twitter stream can be found at http://twitter.com/mariuswatz/. I try to keep my Twitters somewhat topical, but occasional digressions will occur. After all, that’s the beauty of Twitter.

SyntaxHighlighter hiccups when encountering the < character unless there is a blank space directly following it, most likely due to it being interpreted as the start of a HTML tag. Also, the "copy to clipboard function produces incorrect code because the text copied has < and > characters converted into the HTML entities &lt; and &gt;. However, I’m not sure if this is a problem with SyntaxHighlighter or with WordPress, since WordPress sometimes messes with formatting by automagically trying to provide good HTML substitutes for certain character combinations.

Most frustrating of all, WordPress has started replacing the ‘s in “it’s” with a triple ellipsis character, as well as some other strangeness. Any tips for fool-proof plugins for posting properly formatted code would be most appreciated!

Rhinoscript sketch, extruding a revolution surface along random curves. Good cheesy fun.

I had a chance to see a bit more of the impressive tool Rhino 4 during the Generator.x 2.0 workshop, and so I thought I’d have a go at making a simple sketch in Rhinoscript. As it turns out, the fact that Rhinoscript is based on VBScript makes coding feel horrible at first. Seriously, who would want to use syntax like that? It might be easy for beginners to pick up, but it quickly gets painful once you’re dealing with complex API calls and 100+ lines of code.

Nevertheless, frustration soon gives way to amazement at the built-in Rhino library and its vast array of heavy-duty functions for creating and manipulating curves, meshes and NURBS surfaces. In comparison, mesh generation in Processing is enough to give anyone a headache, and I seriously doubt anyone would even attempt to implement NURBS. Even Boolean mesh operations is a staggering task, with no good Java libraries readily available.

While Rhinoscript is firmly a non-realtime tool, its power for pure geometry is amazing. I would definitely use Rhino as a creative tool for digital fabrication projects, where animation is not the goal. There are some excellent RhinoScript resources online, for starters look at RhinoScript 101 and David Rutten’s tutorial. I would also definitely recommend using the Monkey Script editor instead of the built-in editor, it’s more powerful and has a very useful documentation feature.

The script below gives a basic idea of the Rhino syntax, and while it is a basic sketch suffering from 3D clichées, it shows the power and versatility of Rhinoscript. I just wish it wasn’t Visual Basic.

'RandRail.rvb
'Marius Watz, http://workshop.evolutionzone.com

Option Explicit

Sub Main
	Dim doRender : doRender=1
	Dim num : num=100
	Dim pt, curve(100)

	Call rhino.enableRedraw(False)
	Rhino.Print "--------------------------"

	' delete any existing objects
	Dim oldScene:oldScene=Rhino.AllObjects()
	If isArray(oldScene) Then
		Rhino.DeleteObjects Rhino.AllObjects()
		Rhino.DeleteObjects Rhino.LightObjects()
	End If

	' Set up scene
	Dim light
	light=Rhino.AddPointLight (Array(0,-200,0))
	light=Rhino.AddPointLight (Array(-100,-100,0))

	Rhino.RenderColor 1, RGB(50,50,50)
	Rhino.RenderResolution Array(1200,900)
	Rhino.RenderAntialias 2

	' Create random curves
	Dim cp(3),mult, i
	For i=0 To num
		mult=random(0.75,1.25)
		cp(0)=Array(0,0,0)
		If Rnd>0.5 Then
			cp(1)=Array(0,random(30,50),0)
		Else
			cp(1)=Array(0,random(-30,20),0)
		End If
		If Rnd>0.5 Then
			cp(2)=Array(random(-50,50)*mult,random(30,50),random(-50,50)*mult)
		Else
			cp(2)=Array(random(-50,50)*mult,random(-30,20),random(-50,50)*mult)
		End If
		cp(3)=Array(random(-50,50)*mult,random(-50,50),random(-50,50)*mult)
		curve(i)=Rhino.AddCurve(cp)
		'		Rhino.AddSphere cp(2), dblRadius
	Next

	' Create random rounded profile
	Dim numRot : numRot=Int(random(7,18))
	Dim j, rndCurve(10),profPt(),deg,offs
	ReDim profPt(numRot)

	For j=0 To Ubound(rndCurve)
		For i=0 To numRot
			deg=(2*Rhino.Pi/numRot)*i
			offs=random(5,7)*0.2
			If i Mod 2=0 Then
				offs=random(7,12)*0.2
			End If

			profPt(i)=Array(Cos(deg)*offs, 0 ,Sin(deg)*offs)
		Next
		rndCurve(j)=Rhino.AddCurve(profPt)
	Next

	' Create random RailRefSrf and ExtrudeCurve surfaces
	Dim railAxis(1)
	railAxis(0)=Array(0,0,0)
	railAxis(1)=Array(0,1,0)

	Dim srf,profCurve
	For i=0 To num
		profCurve=rndCurve(Int(random(0,Ubound(rndCurve))))
		srf=Rhino.AddRailRevSrf(curve(i),profCurve,railAxis)
		applyRndMaterial(srf)
		'		srf=Rhino.ExtrudeCurve(profCurve,curve(i))
		'		applyRndMaterial(srf)
	Next

	If doRender=1 Then
		renderView()
	End If

	Call rhino.enableRedraw(True)

End Sub

' Set random materials
Function applyRndMaterial(obj)
	Dim prob,col,material

	material=Rhino.AddMaterialToObject (obj)

	' Coloring: Pink, Orange
	prob=random(0,100)
	If prob<30 Then
		Rhino.MaterialColor material, RGB(255, 0, Int(random(100,150)))
	ElseIf prob<90 Then
		Rhino.MaterialColor material, RGB(255, Int(random(100,254)),0)
	Else
		Rhino.MaterialColor material, RGB(255, 255, 255)
	End If
End Function

Function random(min,max)
	random=Rnd*(max-min)+min
End Function

' Render current viewport
Function renderView()
	Dim view,filename

	view = Rhino.CurrentView
	Rhino.Command "_-Render"
	filename=getRenderFileName("RandRail")
	Dim cmd : cmd="_-SaveRenderWindowAs " & Chr(34) & filename & Chr(34)
	Rhino.Command cmd
End Function

' Get auto-incremented filename
Function getRenderFileName(scriptName)
	Dim index,done, doc, file, temp,imgNum

	done=-1
	index=0
	Do While done=-1
		doc=Rhino.WorkingFolder & "\" & scriptName & padStr(scriptName,index) & ".png"
		file=Rhino.FindFile(doc)
		If IsNull(file)=True Then
			done=1
		Else
			index=index+1
		End If
	Loop

	getRenderFileName=doc
End Function

Function padStr(prefix,val)
	Dim l : l=Len(val)
	If l<1 Then
		padStr="000" & val
	ElseIf l<2 Then
		padStr="00" & val
	ElseIf l<3 Then
		padStr="0" & val
	Else
		padStr="" & val
	End If
End Function	

Main

Screenshot of IE running integrated with Processing and other AWT components.

For a while I’ve been wondering if it couldn’t be useful to be able to render proper HTML from inside Processing. While Processing is excellent for realtime graphics, the typographic support is a little basic when faced with the task of designing a more complex layout. Rather than write a new library, why not just use a fast HTML engine?

While there are quite a few HTML rendering engines out there, not all are very complete or indeed very fast. This might be one of the cases where using native code makes sense. Both Internet Explorer and Mozilla offer ways of embedding their rendering engines through native bindings, and after a little googling I was able to find JDIC – the JDesktop Integration Components project.

JDIC aims to bring Java applications closer to feeling like “real” desktop apps. I’m not sure if that’s a battle I would have taken on myself, but in any case they have exactly what I needed: A simplified web browser ready for embedding, able to use either IE or Mozilla as engines. A little coding later and I had a hybrid Processing / AWT application running a web browser. It will even support Flash and Java content, provided that you’ve installed the proper plugins.

The WebBrowser.setContent() function is perfect for loading your own machine-generated content, and events can be captured and processed appropriately. It would even be possible to have a hybrid application, with part of the interface being straight Processing and the rest AWT. I’m keen to try using this to create more complex on-screen layouts. HTML and CSS will always look much better than anything one could create using Swing.

See Flickr for some screenshots.

To compile the following example, download the JDIC binary distribution for your platform. Create a “code” subfolder in your sketch folder. Copy all the native files (jdic.jar, .dll files etc) into the code folder, and Processing should understand how to load the appropriate code. I’ve only tested it on PC, and it was fairly painless.

// JDICsample.pde
// Marius Watz - http://workshop.evolutionzone.com

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

import java.net.URL;
import java.net.MalformedURLException;
import org.jdesktop.jdic.browser.*;

aBrowser browser;
long last;

// Set to true to demonstrate setContent instead of
// loading URLs.
boolean doRandomHTML=true;
String rndWords[];
int rndWordNum=0;

void setup() {
  size(200,200);
  browser=new aBrowser();
  browser.initPanel(1024,768);
  if(!doRandomHTML) browser.setURL("http://processing.org/");
  else initRandomText();
}

////////////////////////////////////////////
// Random HTML

void draw() {
  if(doRandomHTML && (millis()-last>3000)) {
    String c1,c2,str;
    c1=colorToHex(random(200,255),random(150,200),0);
    c2=colorToHex(random(50,100),random(50,100),0);

    println(c1+" "+c2);
    str=""+
      "";
    str+="
";
    for(int i=0; i< 30; i++) str+="

"+getRandLine()+"

";
    str+="

";

    browser.setContent(str);
    last=millis();
  }
}

String getRandLine() {
  String s="";

  int num=(int)random(30,50);
  for(int i=0; i< num; i++) s+=rndWords[(int)random(rndWordNum)]+" ";

  return s;
}

void initRandomText() {
  String lorem="Lorem ipsum dolor sit amet, pellentesque dolor"+
   "a vestibulum, hendrerit augue lectus in libero dictumst et,"+
   "condimentum gravida vestibulum litora semper. Lectus donec "+
   "neque nunc cras molestie est, vel et. Pede inventore vestibulum "+
   "justo est non nulla, lacus reiciendis rutrum phasellus nunc leo"+
   "natoque. Urna ac id justo luctus lorem, ante viverra nam nam "+
   "accusamus, aliquam metus vitae etiam sollicitudin erat ligula. "+
   "Sodales tortor amet felis, sit risus mus vel sodales, cursus "+
   "auctor, augue semper nam, diam eget. Vulputate ac viverra ante "+
   "ipsum tristique ullamcorper, lacus nostra pharetra libero provident.";

  rndWords=splitTokens(lorem);
  rndWordNum=rndWords.length;
}

public static String colorToHex(float r,float g,float b) {
  String s="";
  if(r<16) s+="0"+Integer.toHexString((int)r);
  else s+=Integer.toHexString((int)r);
  if(g<16) s+="0"+Integer.toHexString((int)g);
  else s+=Integer.toHexString((int)g);
  if(b<16) s+="0"+Integer.toHexString((int)b);
  else s+=Integer.toHexString((int)b);
  s=s.toUpperCase();
  return s;
}

////////////////////////////////////////////
// Convenience class for dealing with
// the embedded browser engine.

public class aBrowser {
  Frame frame;
  Panel panel;
  WebBrowser webBrowser;

  public aBrowser() {
    // Set engine to IE
    BrowserEngineManager mng=BrowserEngineManager.instance();
    mng.setActiveEngine(BrowserEngineManager.IE);
    webBrowser = new WebBrowser();
  }

  public void initPanel(int w,int h) {
    frame=new Frame("JIDCsample.pde");
    frame.setLocation(50,50);
    frame.setLayout(new BorderLayout());
    //frame.setUndecorated(true);

    //	 Handle window close requests
    frame.addWindowListener(new WindowAdapter( ) {
      public void windowClosing(WindowEvent e) {System.exit(0);}
    });

    panel = new Panel();
    panel.setLayout(new BorderLayout());
    panel.setPreferredSize(new Dimension(w, h));
    panel.add(webBrowser, BorderLayout.CENTER);
    frame.add(panel,BorderLayout.CENTER);

    Label status=new Label(
      "JDICsample.pde - embedded web browser.");
    status.setBackground(new Color(100,100,100));
    status.setForeground(new Color(255,255,255));
    status.setFont(new Font("Arial",Font.PLAIN,15));
    status.setSize(600, 20);

    frame.add(status,BorderLayout.SOUTH);
    frame.pack();
    frame.setVisible(true);
  }

  public void setContent(String htmlContent) {
    webBrowser.setContent(htmlContent);
  }

  public void setURL(String url) {
    try {
      webBrowser.setURL(new URL(url));
      // Print out debug messages in the command line.
      webBrowser.setDebug(false);
    }
    catch (MalformedURLException e) {
      System.out.println(e.getMessage());
      return;
    }
  }
}

Burak Arikan et. al: Meta-Markets

I’ve recently been playing with the excellent Meta-Markets.com site set up by the talented Burak Arikan. Essentially Meta-Markets is a virtual stock market for trading socially networked capital. If you have a hot blog, a popular Flickr stream or were the first poster of an essential del.icio.us bookmark you can offer it for trade through an IPO, just as if it were a company.

Each user starts out with a capital of 25 “buraks”, which can be used to buy shares in traded commodities in any of the 6 given “markets”: Flickr, Facebook, del.icio.us, Feedburner, Digg and YouTube. By offer an IPO of your own social capital you accumulate value that can be used for further trade. Ultimately the system will also include auctions and payment of dividends to stock holders.

You can make an IPO of any del.icio.us bookmarks of which you were the first poster. Finding out exactly which these are can be a drag, since del.icio.us does not provide an overview of this info. Even using the del.icio.us API won’t give you the needed information, the only way is to use the del.icio.us URL history feature. Needless to say, this can get tedious when done manually.

To address the issue I’ve hacked up a tool I call deliciousChecker. It downloads your bookmarks and then proceeds to check their posting history using HTTP calls to the history page. del.icio.us will block offensive applications that make repeated API calls, so deliciousChecker only downloads the bookmarks when there’s been an update. There is also a 15 second default delay between HTTP calls, it’s not recommended to go lower than this since Yahoo will think you’re a denial-of-service attack.

The code is written in Processing using the delicious-java and Apache Commons HttpClient libraries. The source is included, but for non-Processing users I’ve also provided precompiled applications for Mac, Windows and Linux. You must edit the “delicious.conf” config file to add your username and password.

The application can be exited safely by pressing the escape key. It also auto-saves the database with regular intervals. Upon exit (whether from interruption or upon completion) the application writes a HTML file with your bookmarks, indicating which ones were first posted by you as well as how many other users have saved them.

• deliciousChecker02.zip

I’ve looked around at other solutions, but haven’t found any that seem really appealing. I’d be happy to hear suggestions or any feedback about your own experiences.