<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>IOException.de &#187; processing</title>
	<atom:link href="http://www.ioexception.de/tag/processing/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ioexception.de</link>
	<description>Ausgewählter Nerdkram von Informatikstudenten der Uni Ulm</description>
	<lastBuildDate>Fri, 13 Jan 2012 07:38:26 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Globale Verteilung der WikiLeaks Mirror visualisieren</title>
		<link>http://www.ioexception.de/2011/09/23/globale-verteilung-der-wikileaks-mirror-visualisieren/</link>
		<comments>http://www.ioexception.de/2011/09/23/globale-verteilung-der-wikileaks-mirror-visualisieren/#comments</comments>
		<pubDate>Fri, 23 Sep 2011 14:34:33 +0000</pubDate>
		<dc:creator>Michael Müller</dc:creator>
				<category><![CDATA[creative coding]]></category>
		<category><![CDATA[visualisierungen]]></category>
		<category><![CDATA[geocoding]]></category>
		<category><![CDATA[geoip]]></category>
		<category><![CDATA[processing]]></category>
		<category><![CDATA[wgs84]]></category>
		<category><![CDATA[wikileaks]]></category>

		<guid isPermaLink="false">http://www.ioexception.de/?p=1252</guid>
		<description><![CDATA[Nachdem große DNS Anbieter aufgehört hatten die WikiLeaks Domains aufzulösen entstanden weltweit Spiegelserver. Dies ist eine Visualisierung der globalen Verteilung.]]></description>
			<content:encoded><![CDATA[<p>Am 2. Dezember 2010 haben verschiedene große DNS Anbieter, nach dem Release der US-Botschaftsdepeschen, aufgehört die wikileaks Domains aufzulösen. Daraufhin wurde der Inhalt der WikiLeaks-Website auf knapp 2.200 Servern gespiegelt. Die Server wurden von Freiwilligen auf der ganzen Welt zur Verfügung gestellt.</p>
<p>Dieser Vorfall zeigt eindrucksvoll, wie die dezentralen Strukturen des Internets genutzt werden können um Zensur zu umgehen und Informationsunterdrückung zu verhindern.</p>
<p>Nachdem ich im vorigen Beitrag die Ausgabe des traceroute Utilities visualisiert habe wollte ich hier noch etwas weiter machen. Dieses Mal war mein Ziel die Domains der verschiedenen Mirrors  herauszubekommen, diese erst zu einer IP, dann zu WGS84 aufzulösen. Die WGS84 Koordinaten kann ich dann auf einer Erdkugel abbilden.</p>
<p><a href="/wp-content/uploads/2011/09/wlmirror-large.png"><img class="size-full wp-image-189 alignright" title="" src="/wp-content/uploads/2011/09/wlmirror-small.png" alt="" align="right" /></a>Die Domains herauszubekommen war einfach, es gibt <a target="_blank" href="http://wikileaks.nl/mirrors.html">verschiedene Seiten</a> die die Adressen der Spiegelserver auf einer HTML-Seite auflisten. Diese Liste lässt sich bequem parsen. Das Auflösen zu einer WGS84-Koordinate habe ich wieder über eine freie GeoIP-Datenbank vorgenommen. Von da an konnte ich große Teile des traceroute Projekts wiederverwenden um die Domains auf eine Weltkugel zu mappen.</p>
<p>Ganz interessant ist, dass die Server tatsächlich auf der ganzen Welt verteilt sind. Die meisten Server stehen &#8212; jetzt nicht besonders überraschend &#8212; in Mitteleuropra. Es sind wohl aber auch einige wenige in China. Natürlich geben die Ergebnisse der GeoIP Datenbank keine sicher bestimmten Standorte wieder, aber ich finde der Trend ist doch schön erkennbar.</p>
<p>Ich habe ein kleines Video zu der globalen Verteilung zusammengestellt:</p>
<p><center><iframe src="http://player.vimeo.com/video/29167688?title=0&amp;byline=0&amp;portrait=0" width="440" height="248" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe></center></p>
<p>Der Direktlink: <a href="http://vimeo.com/29167688">vimeo</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ioexception.de/2011/09/23/globale-verteilung-der-wikileaks-mirror-visualisieren/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ein graphisches Frontend für traceroute</title>
		<link>http://www.ioexception.de/2011/09/18/graphisches-frontend-fuer-traceroute/</link>
		<comments>http://www.ioexception.de/2011/09/18/graphisches-frontend-fuer-traceroute/#comments</comments>
		<pubDate>Sun, 18 Sep 2011 07:19:43 +0000</pubDate>
		<dc:creator>Michael Müller</dc:creator>
				<category><![CDATA[creative coding]]></category>
		<category><![CDATA[unix]]></category>
		<category><![CDATA[visualisierungen]]></category>
		<category><![CDATA[geocoding]]></category>
		<category><![CDATA[geoip]]></category>
		<category><![CDATA[processing]]></category>
		<category><![CDATA[traceroute]]></category>
		<category><![CDATA[wgs84]]></category>

		<guid isPermaLink="false">http://www.ioexception.de/?p=1217</guid>
		<description><![CDATA[Ich habe mithilfe der Processing API ein Frontend für das Unix Programm traceroute geschrieben.]]></description>
			<content:encoded><![CDATA[<p>Um mich näher mit Processing und OpenGL auseinanderzusetzen habe ich ein Frontend für das Unix Programm <code>traceroute</code> geschrieben. Die Ausgabe von <code>traceroute</code> ist eine Liste mit Stationen die ein Paket auf seinem Weg durch das Netzwerk passiert. Dies kann etwa für das Debuggen einer Netzwerkverbindung genutzt werden. </p>
<p>Technisch wird dies über das &#8220;Time-To-Live&#8221;-Feld im Header von IP-Paketen realisiert. Der TTL-Eintrag gibt an, nach wie vielen Stationen ein Paket verworfen werden soll. Jeder Router, den das Paket passiert, dekrementiert dieses Feld. Ist die TTL bei 0 angelangt wird das Paket verworfen und der Absender mittels einer ICMP-Nachricht <code>TIME_EXCEEDED</code> benachrichtigt. </p>
<p><code>traceroute</code> macht sich diesen Umstand zunutze indem immer wieder Pakete an den Zielhost gesendet werden. Die TTL wird dabei schrittweise erhöht bis das Ziel erreicht ist. Die Hosts auf dem Weg werden sich nach und nach mit ICMP-Nachrichten melden, so dass wir dann Informationen über den Absender gewinnen und somit (hoffentlich) die einzelnen Stationen auf unserer Route identifizieren können. Diese Route muss hierbei nicht zwangsläufig korrekt sein. Es können sich aus verschiedenen Gründen Abweichungen ergeben, etwa durch Firewalls die aus Sicherheitsgründen ICMP gleich komplett deaktivieren.</p>
<p>Für die Visualisierung habe ich <code>traceroute</code>, wie <a href="/2011/09/17/processing-als-frontendanbindung-an-andere-programmiersprachen/">im letzten Beitrag</a> beschrieben, als externes Programm an Processing angebunden. Das Frontend liest dabei die Ausgabe des Kommandoaufrufs <code>traceroute domain.org</code> bis EOF. Jede Zeile wird geparsed, dabei werden die einzelnen Hosts der Route nach IP-Adressen aufgelöst und anschließend die Koordinate bestimmt. Die Koordinaten können anschließend mit etwas sin/cos Grübeln auf einer Erdkugel abgebildet werden. Das Auflösen nach Geolocations habe ich mittels einer GeoIP-Datenbank realisiert. GeoIP-Datenbanken stellen eine Zuordnung IP zu Koordinate dar. Natürlich nur mit einer bestimmten Wahrscheinlichkeit und auch nicht völlig exakt, aber für unsere Zwecke reicht das. Es gibt hier einige freie und natürlich jede Menge kommerzielle Anbieter. Ich habe mich dabei für die freie <a href="http://www.maxmind.com/app/geolitecity" target="_blank">GeoLite City</a> von Maxmind entschieden. Im Endeffekt löse ich so jetzt eine IP-Adresse zu einer WGS84-Koordinate auf.</p>
<p>Für das Frontend habe ich in Java mithilfe der Processing API eine Visualisierung geschrieben. Die Textur der Weltkugel wird mittels eines in GLSL geschriebenen Shaders weiter verändert. Bibliotheken, die ich verwendet habe: GLGraphics (OpenGL Rendering Engine für Processing), controlP5 (Button, Slider, Textfield) und toxiclibs (Interpolation &#038; andere numerische Methoden).</p>
<p>Den Sourcecode habe ich unter MIT auf GitHub veröffentlicht: <a href="https://github.com/cmichi/visual-traceroute/" target="_blank">visual-traceroute</a>.</p>
<p>Ein bisschen Eye Candy gibts in dem Video unter diesem Beitrag bzw. <a href="http://vimeo.com/26674070">hier als Direktlink auf Vimeo</a>.</p>
<p><center><iframe src="http://player.vimeo.com/video/26674070?title=0&amp;byline=0&amp;portrait=0" width="400" height="255" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe></center></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ioexception.de/2011/09/18/graphisches-frontend-fuer-traceroute/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Processing als Frontend: Anbindung an andere Programmiersprachen</title>
		<link>http://www.ioexception.de/2011/09/17/processing-als-frontendanbindung-an-andere-programmiersprachen/</link>
		<comments>http://www.ioexception.de/2011/09/17/processing-als-frontendanbindung-an-andere-programmiersprachen/#comments</comments>
		<pubDate>Sat, 17 Sep 2011 10:06:38 +0000</pubDate>
		<dc:creator>Michael Müller</dc:creator>
				<category><![CDATA[creative coding]]></category>
		<category><![CDATA[java]]></category>
		<category><![CDATA[visualisierungen]]></category>
		<category><![CDATA[processing]]></category>

		<guid isPermaLink="false">http://www.ioexception.de/?p=1194</guid>
		<description><![CDATA[Wie gehen wir vor, wenn wir das Frontend in Processing schreiben wollen, das Backend aber in einer anderen Sprache?]]></description>
			<content:encoded><![CDATA[<p><a href="http://processing.org" target="_blank">Processing</a> ist eine Programmiersprache, die entwickelt wurde um es möglichst einfach zu machen Visualisierungen zu erstellen und grafische Arbeiten am Computer erstellen zu können. Der Sprachumfang (bzw. die API) ist sehr übersichtlich und ist <a target="_blank" href="http://processing.org/reference/">hier</a> auf einer Seite zusammengefasst.</p>
<p>Für Processing existieren heute enorm viele Bibliotheken und die Sprache wurde u.a. nach Javascript portiert bzw. wird aktuell nach Android portiert. Somit wird Processing 2.0 auch das Ausführen im Browser und auf einem Android-Gerät unterstützen (bzw. <code>trunk</code> unterstützt es schon :) ). </p>
<p>Toll ist, dass sich die Processing-Bestandteile als externe Java Bibliotheken referenzieren lassen. Wir können also in unserem Java-Projekt sehr bequem die Processing-Möglichkeiten ausschöpfen. Wir können außerdem jede Menge Processing-Bibliotheken referenzieren, etwa für Physik, Typographie, etc.. </p>
<p>Dieser Beitrag soll zeigen wie einfach es ist in Java mit den Processing Bibliotheken ein reines Frontend zu schreiben. Bei vielen Aufgaben bietet es sich an eine Sprache zu verwenden, die sich speziell für diese Aufgabe eignet. In manchen Fällen wollen wir also das Frontend in Processing schreiben, das Backend aber in einer anderen Sprache.</p>
<p>Wir haben also zwei verschiedene Programme. Wie verbinden wir die Beiden jetzt? </p>
<p>Unser Processing-Programm startet einen Thread der wiederum das externe Programm startet und konstant die Ausgabe des externen Programmes liest (bis EOL). Diese Ausgabe wird konstant geparset und in einem Objekt, beispielsweise einer Liste, abgelegt.</p>
<p>Das Hauptprogramm hat die Aufgabe unsere &#8220;Zeichenfläche&#8221; darzustellen. Processing sieht dazu eine Methode <code>draw()</code> vor, die entsprechend der Framerate oft aufgerufen wird. In der <code>draw()</code> Methode lesen wir das Objekt des Threads ein und berücksichtigen dies für unsere Darstellung.</p>
<p>In Processing sieht das Ganze dann so aus:</p>
<pre class="brush: cpp;">
/*
 * Aufgabe des Threads:
 * Die Ausgabe unseres &quot;Backend&quot;-Programmes zu lesen und zu parsen.
 */
public class Stream extends Thread {
  /* Für jede Zeile der Ausgabe erstellen wir einen Eintrag in der Liste */
  Vector &lt;StreamEntry &gt; entries = new Vector &lt;StreamEntry &gt;();

  public void run() {
    String line; 

    try {
      Process p = Runtime.getRuntime().exec(&quot;ping uni-ulm.de&quot;);
      BufferedReader input = new BufferedReader(
         new InputStreamReader(p.getInputStream()));

      while ((line = input.readLine()) != null)
        entries.add(new StreamEntry(line));

      input.close();
    } catch (Exception err) {
      err.printStackTrace();
    }
}

public class StreamEntry {
  public int time;

  public StreamEntry(String line) {
    /* Parsing action ... */
    this.time = ...;
  }
}
</pre>
<p>Unser Hauptprogramm zur Darstellung:</p>
<pre class="brush: cpp;">
public class Main extends PApplet {
  /* Unser Thread, der die Ausgabe des Backends liest */
  private Stream stream;

  public void setup() {
    size(1024, 768);

    stream = new Stream();
    stream.start();
  }

  /* draw() wird entsprechend der Bildwiederholrate oft aufgerufen */
  public void draw() {
    background(BLACK);

    /* Wir geben alle Einträge der Ausgabe aus */
    for (StreamEntry s : stream.entries)
      text(s.time, 10, y+=15);
  }
}
</pre>
<p>Der zweite Thread verarbeitet also kontinuierlich die Ausgabe des Backend. Unser Hauptprogramm aktualisiert bei jedem Aufruf von <code>draw()</code> die Zeichenfläche und berücksichtigt hierbei die Ausgabe des Backends.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ioexception.de/2011/09/17/processing-als-frontendanbindung-an-andere-programmiersprachen/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Typotisch</title>
		<link>http://www.ioexception.de/2009/09/18/typotisch/</link>
		<comments>http://www.ioexception.de/2009/09/18/typotisch/#comments</comments>
		<pubDate>Fri, 18 Sep 2009 15:08:20 +0000</pubDate>
		<dc:creator>David Langer</dc:creator>
				<category><![CDATA[visualisierungen]]></category>
		<category><![CDATA[java]]></category>
		<category><![CDATA[processing]]></category>
		<category><![CDATA[user interfaces]]></category>
		<category><![CDATA[visualisierung]]></category>

		<guid isPermaLink="false">http://www.ioexception.de/?p=306</guid>
		<description><![CDATA[
Typotisch – 1 from David L on Vimeo.
Dieses Projekt wurde im Rahmen des Praktikums &#8220;Aesthetic Computing&#8221; geplant und umgesetzt von Nora von Egloffstein und mir. Nachfolgend mehr Informationen (siehe auch hier).

Der Typotisch ist eine weiße Box, etwa so hoch wie eine Arbeitsplatte. Die  Oberseite  besteht aus einer Milchglasscheibe, auf  die der Benutzer [...]]]></description>
			<content:encoded><![CDATA[<p><object width="650" height="366"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5199184&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=5199184&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="650" height="366"></embed></object>
<p><a href="http://vimeo.com/5199184">Typotisch – 1</a> from <a href="http://vimeo.com/user902215">David L</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<p>Dieses Projekt wurde im Rahmen des Praktikums &#8220;Aesthetic Computing&#8221; geplant und umgesetzt von Nora von Egloffstein und mir. Nachfolgend mehr Informationen (siehe auch <a href="http://kram.davidlanger.de/aec/">hier</a>).<br />
<span id="more-306"></span></p>
<p>Der Typotisch ist eine weiße Box, etwa so hoch wie eine Arbeitsplatte. Die  Oberseite  besteht aus einer Milchglasscheibe, auf  die der Benutzer Wortplättchen legen kann. Auf einer großen Leinwand oder einem Bildschirm wird dann eine Animation der  gelegten Worte gezeigt, wie wenn die Milchglasscheibe mit einer Kamera abgefahren würden. Je nachdem in welchem Winkel die Wortplättchen zueinander liegen, macht die Kamera eine entsprechende Drehung, auf 90° gerundet. Manche Wörter haben in der Animation einen fest  zugeordneten Effekt. Der Typotisch soll eine Verknüpfung von Kinetischer Typographie und einer besonderen Interaktionsmöglichkeit sein.</p>
<h2>Material</h2>
<p><img src="http://www.ioexception.de/wp-content/uploads/2009/09/typotisch2.jpeg" alt="typotisch2" title="typotisch2" width="200" height="112" class="alignright size-full wp-image-310" /> Die Box ist aus 12mm dicken MDF-Platten gebaut. Oben ist ein 30cm*30cm große Aussparung für die Milchglassplatte die dann auf Ausfräsungen am Rand der Aussparung gelegt werden kann. Im Inneren der Box sind zwei Bretter angebracht. </p>
<p>Die Wortplättchen sind aus Magnetgummi. Auf der vorderen Seite eines solchen Plättchens steht das Wort geschrieben und auf der Rückseite ist das Wort als QR-Code dargestellt. </p>
<h2>So funktioniert´s</h2>
<p><img src="http://www.ioexception.de/wp-content/uploads/2009/09/typotisch3.jpeg" alt="typotisch3" title="typotisch3" width="200" height="112" class="alignright size-full wp-image-311" /> Auf dem oberen inneren Brett wird eine Digitalkamera, bei uns eine Canon Powershot A620, mit Objektiv nach oben, angebracht. Auf dem unteren Brett steht ein mit der Kamera verbundener Laptop. Durch die Fernsteuerungssoftware von Canon wird alle zehn Sekunden ein Foto von der Milchglasscheibe gemacht und in einen Ordner abgelegt. Dieser Ordner ist für den zweiten Laptop im lokalen Netzwerk freigegeben. Die Software die auf diesem Laptop läuft, greift auf die Fotos zu und generiert die Animation. </p>
<h2>Software &#038; Libraries</h2>
<p><img src="http://www.ioexception.de/wp-content/uploads/2009/09/typotisch_qr.jpeg" alt="typotisch_qr" title="typotisch_qr" width="200" height="112" class="alignright size-full wp-image-308" /> Die Analyse des Fotos wurde mit Processing (<a class="footnote" href="#f1">1</a>) realisiert. Das Foto wird gelesen, potentielle Plättchen erkannt, dank einer Bibliothek für OpenCV für Processing (<a class="footnote" href="#f2">2</a>) Dann wird deren Lage bestimmt und  ihre Drehung auf 0°, 90°, 180° oder 270° gerundet. Anschließend wird die Reihenfolge der Plättchen ausgelesen, angefangen an der linken oberen Ecke der Milchglasscheibe. Dabei  werden auch die QR-Codes (<a class="footnote" href="#f3">3</a>) dekodiert. </p>
<ol>
<li id="f1"><a href="http://processing.org" />http://processing.org</a></li>
<li id="f2"><a href="http://ubaa.net/shared/processing/opencv/" />http://ubaa.net/shared/processing/opencv/</a></li>
<li id="f3"><a href="http://qrcode.sourceforge.jp/"  />http://qrcode.sourceforge.jp/</a></li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://www.ioexception.de/2009/09/18/typotisch/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

