Simple Touch Interface for an Imaginary Video Rental StoreEinfaches Touch-Interface für eine imaginäre Videothek

This is an AIR application I built for an assignment in the course Interactive Systems at the university. This video demonstrates all features like touch guestures and filtering. Since I don’t own a touchscreen, this is only a “fake” touch video. I’d love to try this out on a real touchscreen.

[flashvideo file=wp-content/uploads/2010/06/DSCF2190-384kbps.flv /]Im Rahmen meines Studiums habe ich für den Kurs Interaktive Systeme eine AIR-Anwendung für eine Videothek geschrieben. Das Video demonstriert alle Features wie z.B. die Touch-Gesten. Da ich selbst keinen Touchscreen besitze handelt es sich bei dem Video nur um ein “fake”. Würde die Anwendung aber zu gerne mal auf einem echten Touchscreen testen..

[flashvideo file=wp-content/uploads/2010/06/DSCF2190-384kbps.flv /]

Improving WordPress Stats Charts (1/2)


WordPress.com Stats is the most used statistic plugin for wordpress (with over 1.5 mio downloads so far). It offers a very simple way of collecting anonymous visit statistics and has a nice backend that lets you explore the data using line charts and tables. I keep using this plugin since the very beginning of this blog and I must admit that I’m looking at it every day. But in doing so I recently started getting bugged of the charts. This post series shows ten ways for improving them. Continue reading

Mapping scalar data to circles

A very simple rule in visualizations is to never map scalar data to circle radii. Humans do better in comparing relative areas, so if you want to map data to a shape, you have to map it to it’s area. The rule is that simple that normally it’s not worth a blog post. But as I’m currently reading the book “Visualizing Data” by Ben Fry I was very surprised to notice, that shown examples are continuously breaking this rule.

The operative point in this case is data integrity, which means to tell the truth about the data you’re displaying. Showing all shapes in it’s true relative dimension is a fundamental law in data integrity. A book about data visualization isn’t allowed to miss this rule.

So, to fill this little post with some graphics, I made two simple illustrations. Both  containing a set of circles that represents the data set [6.25, 12.5, 25, 50, 100, 200]. Each circle should look like as twice as large as the circle to its left.

These values were mapped to the circle radii

These values were mapped to the circle radii

As you see above, especially the step from 100 to 200 looks not like its only the double value. As this brings in a quadratic error, the bigger the values, the bigger is the error. The next illustration show the same data set with corrected circle radii:

These values were mapped to the circles areas

These values were mapped to the circle areas

To make It even more comfortable I’m going to publish this super exclusive actionscript snippet that helps you mapping data to a circle radii:

/**
 * @param v The value to map
 * @param dmin  Minimum value in data set
 * @param dmax  maximum value in data set
 * @param rmin  circle radius for minimum data value
 * @param rmax  circle radius for maximum data value
 */
function mapRadius(v:Number, dmin:Number, dmax:Number, rmin:Number, rmax:Number):Number
{
	var areaMin:Number = rmin * rmin * Math.PI;
	var areaMax:Number = rmax * rmax * Math.PI;
	var area:Number = (v - dmin) / (dmax - dmin) * (areaMax - areaMin) + areaMin;
	return Math.sqrt(area / Math.PI);
}

Further reading:

  1. Linear vs. Quadratic Change by Robert Kosara

Real-time Visualization of Site Traffic

The last days I worked on a visualization experiment that shows the geographic locations of blog page requests on a world map. Furthermore, the visualization should be animated over time, so one can replay past events or just view the current live data. The last thing I added was an indicator for night and day phases in the world. Here you can see a little preview video showing the current results…

I did this with pure AS3.

Capturing Video from Flash Movies with ActionScript

I recently had the problem to store a flash animation into a video file. I first tried some tools I found in the net, but they all run into problems because my flash movie doesn’t integrate the MovieClip timeline. Tools like swf2avi are stopping the conversion after the first frame, because they’re thinking it’s the only frame. One way round is make let your movie extend the MovieClip class instead of the Sprite and to integrate the timeline in your animation. But this starts to get very difficult if you’re making heavy use of the timers and tweening engines.

The first thing you need to do, is to add a new event listener to the stage’s ENTER_FRAME event.

stage.addEventListener(Event.ENTER_FRAME, captureFrame);

Inside this event listener you have to check if the current frame is one of those you want to capture. It makes a lot of sense to limit the number of frames regarding to your requirements as all images will be stored uncompressed to your RAM, which might lead to problems if you capture too many frames at once. To capture a single frame you simply create a new BitmapData instance and draw the stage onto it. Since you don’t need transparent images for most video purposes, you set the third constructor parameter to false and define a background color as you like. Finally you store the frame in an array.

private const _fromFrame:uint = 0;
private const _toFrame:uint = 400;
private var _frame:uint = 0;
private var _bitmaps:Array = [];
 
private function captureFrame(e:Event):void 
{
	if (_frame >= _fromFrame && _frame < = _toFrame) {
		var bmp:BitmapData = new BitmapData(
			stage.stageWidth, stage.stageHeight, 
			false, 0x000000);
		bmp.draw(stage);
		_bitmaps.push(bmp);
	}
	_frame++;
}

Now that we stored all frames we wait till the movie finishes. The next thing to do is to compress the images. You can use the PNGEncoder class of the as3corelib. There is no way to save images directly to your harddrive via flash, so we need to go a way round using an http connection and a little php script on our local web server.

private function exportBitmaps():void
{
	var j:uint = _bitmaps.length;
	for (var i:uint = 0; i < j; i++) {
		// encoding the image as png
		var pngStream:ByteArray = PNGEncoder.encode(_bitmaps[i] as BitmapData);
 
		// setup a simple http connection to the php script
		var header:URLRequestHeader = new URLRequestHeader(
			"Content-type", "application/octet-stream");
		var urlReq:URLRequest = new URLRequest(
			"http://localhost/saveImage.php?name=frame_"+i+".png");
		urlReq.requestHeaders.push(header);
		urlReq.method = URLRequestMethod.POST;
		urlReq.data = pngStream;
 
		// send out the data
		new URLLoader(urlReq);
	}	
}

The php script is very simple, as it just puts the http post data into a new file on your harddisc.

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
	file_put_contents("folder/".$_GET["name"], $GLOBALS["HTTP_RAW_POST_DATA"];);
}

Now you got a nice set of images and you're ready to convert them into a video file in your favorite format. You can do this with a lot of free tools, I chose VirtualDub, for instance. That's all..

frames

Polygon Operations in ActionScript

Polygons play a major role in a lot of visualization applications. Beside of the possibility of drawing polygons, there is neither an explicit presentation of polygon data nor are common polygon operations supported in ActionScript. As far as I know there is no simple solution available that solves the following geometrical problems for simple 2D polygons, so I wrote one. Continue reading

Visualisierung von Easing-Funktionen

Easing-Funktionen werden verwendet, um sanftere Bewegungsabläufe in Tweens zu erzeugen1. Die Funktionen berechnen in Abhängigkeit von der verstrichenen Zeit t, dem Startwert s, der gewünschten Wertänderung c und der Gesamtdauer der Animation d einen neuen Wert für den Ort eines Objektes. Natürlich können Easing-Funktionen auch für alle ander Arten von zeitlichen Wertänderungen benutzt werden, wie beispielsweise zur Rotation von Objekten oder zur Änderung einer Lautstärke.

function easing(t:Number, s:Number, c:Number, d:Number):Number {
	// calculate new value
	return value;
}

Rober Penner hat eine ganze Reihe von Easing-Funktionen gesammelt, die mitlerweile in vielen Animations-Frameworks für ActionScript oder JavaScript integriert sind.

Natürlich sind Beispielanimationen gut geeignet, um dazu finden sich auch schon ausführliche Beispiele im Internet. Ein anderer Weg zur Visualisierung von Easing-Funktionen ist die einfache Darstellung in einem Funktionsgraph.

Dazu gibt es unter janitor61.com eine schöne Übersicht der Funktionsgraphen im PDF-Format:

Quelle: http://www.janitor61.com/?p=24

Quelle: http://www.janitor61.com/?p=24

Bei der näheren Betrachtung dieser Darstellung haben mich folgende Punkte gestört:

  1. Da sowohl die Achsen als auch die Funktionsgraphen in schwarz gezeichnet wurden, kann man sie schwer auseinanderhalten. So geht beispielsweise aus der Abbildung der Funktion Circ.easeOut nicht hervor, wo der Funktionsgraph endet.
  2. Die Graphen können nur schwer miteinander verglichen werden, da die einzelnen Typen (easeIn, easeOut, easeInOut) in der Darstellung nicht über- oder nebeneinander stehen.
  3. Die vollständige Umrahmung der Koordinatensysteme (aka. “Chart Junk”2) stört bei der Betrachtung der Diagramme.

Die folgende Visualisierung verbessert die angesprochenen Punkte:

verbesserte Visualisierung

verbesserte Visualisierung

Die Darstellung wurde in ActionScript3 erzeugt, daher gibt soll an dieser Stelle auch auf die interaktive Version verwiesen werden.