<?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>extrapixel &#187; Interaction Design</title>
	<atom:link href="http://www.extrapixel.ch/tag/interaction-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.extrapixel.ch</link>
	<description>interaction incidents &#38; coding endeavours</description>
	<lastBuildDate>Sat, 17 Jul 2010 20:33:08 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Pollock In Action</title>
		<link>http://www.extrapixel.ch/2007/02/06/pollock-in-action/</link>
		<comments>http://www.extrapixel.ch/2007/02/06/pollock-in-action/#comments</comments>
		<pubDate>Tue, 06 Feb 2007 18:05:46 +0000</pubDate>
		<dc:creator>patrick.meister</dc:creator>
				<category><![CDATA[Normaler Blog]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Interface Design]]></category>
		<category><![CDATA[Pollock In Action]]></category>
		<category><![CDATA[Processing]]></category>

		<guid isPermaLink="false">http://www.extrapixel.ch/2007/02/06/pollock-in-action/</guid>
		<description><![CDATA[Art-Transforming &#8220;Pollock In Action&#8221; is an interactive installation to create drip paintings with light. It is part of the project &#8220;Art-Transforming&#8221; which was shown in the Kunsthaus Zürich on January 27th 2007. [MEDIA=20] A time-lapse movie: 400minutes in 3000 screenshots, captured during the Kunsthausnacht event. [MEDIA=19] Pollock In Action „When painting, I&#8217;m in the image“, [...]]]></description>
			<content:encoded><![CDATA[<p><code></code><strong>Art-Transforming</strong><br />
&#8220;Pollock In Action&#8221; is an interactive installation to create drip paintings with light. It is part of the project &#8220;Art-Transforming&#8221; which was shown in the <a href="http://www.kunsthaus.ch">Kunsthaus Zürich</a> on January 27th 2007.</p>
<p>[MEDIA=20]</p>
<p><span id="more-83"></span>A time-lapse movie: 400minutes in 3000 screenshots, captured during the Kunsthausnacht event.<br />
[MEDIA=19]</p>
<p><strong>Pollock In Action</strong><br />
„When painting, I&#8217;m in the image“, so Jackson Pollock. „The image has a life of its own“. He dripped, splattered color onto the canvas in fluid, dance-like motions. Not having a final image in mind. On the images actions took place, nothing was illustrated.<br />
„Pollock in action“ tries to re-interpret Pollocks style of painting with new technologies. Projected light replaces the fluid colors. The movements of the brush are captured with a camera and a computer. Combining this data with accelerometers in the brush gives an motion sequence, which gets translated into drippings.<br />
Like he said, Jackson Pollocks images didn&#8217;t have a beginning nor an end. He was never afraid to change, transform or destroy his image.</p>
<p><strong>Technology</strong></p>
<p><strong>Video Tracking:</strong><br />
An old Sony Handycam in Nightshot-mode, an infrared filter and a infrared LED in the brush made it easy to track the brightest pixel in the image. </p>
<p><strong>Paint buckets:</strong><br />
To sense when the brush is in the paint bucket I used very sensitive pressue/touch sensors.<br />
An <a href="http://www.arduino.cc">Arduino microcontroller board</a> () is  connected to the USB-port of the computer (serial) and sends the bucket information.</p>
<p><strong>The brush:</strong><br />
Made from wood, filled with: an <a href="http://www.arduino.cc/en/Main/ArduinoBoardMini">Arduino Mini</a>, an EasyRadio RF transceiver to communicate with the computer, an accelerometer to sense to movements of the brush, 2 RGB-LEDs to glow in many colors, an infrared LED to be seen by the camera, and a battery-pack (4x 1,5V AAA, lasted >6h).</p>
<p><strong>Communication:</strong><br />
The computer is attached to another EasyRadio Transceiver keep in touch with the brush. The RF module was connected to USB via a serial/usb converter. The computer sends the chosen color to the brush, and the brush answers with the accelerometer data.</p>
<p><strong>Softwre:</strong><br />
<a href="http://www.processing.org">Made with Processing</a>. Video Tracking, communications and visualization run all in the same Processing sketch. Actionpainting algorithm partly taken from Stamen, Splatter <a href="http://stamen.com/projects/splatter">http://stamen.com/projects/splatter</a>,<br />
©2003 Michal Migurski, Stamen Design <mike@stamen.com> and translated from Actionscript to Java/Processing by me. I modified the splatter code so it could react on accelerometer data. </p>
<p><a href='http://www.extrapixel.ch/wp-content/uploads/2007/02/pollock.zip'>Download &#8220;Pollock In Action&#8221; Processing Sketch</a></p>
<p>Screenshot of the sketch in debug mode:<br />
<img id="image85" src="http://www.extrapixel.ch/wp-content/uploads/2007/02/debug_mode.jpg" alt="debug_mode.jpg" /></p>
<p><strong>Links:</strong><br />
<a href="http://interaction.hgkz.ch">Interaction Design @hgkz</a><br />
<a href="http://iad.projects.hgkz.ch/arttransforming">Art Transforming Project Website</a><br />
<a href="http://www.kunsthaus.ch">Kunsthaus Zürich</a><br />
<a href="http://stamen.com/">Stamen Design</a></p>
<p><strong>Copyrights:</strong><br />
This work is offered under a Creative Commmons license.</p>
<p>Anyone may redistribute this work under the Creative Commons<br />
Attribution-NonCommercial-ShareAlike 2.5 License. Details on this<br />
license are available at http://creativecommons.org/licenses/by-nc-sa/2.5/.<br />
See also: <a href="http://stamen.com/files/LICENSE.txt">http://stamen.com/files/LICENSE.txt</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.extrapixel.ch/2007/02/06/pollock-in-action/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Blogosphere Browser</title>
		<link>http://www.extrapixel.ch/2006/07/14/blogosphere-browser/</link>
		<comments>http://www.extrapixel.ch/2006/07/14/blogosphere-browser/#comments</comments>
		<pubDate>Fri, 14 Jul 2006 15:40:10 +0000</pubDate>
		<dc:creator>patrick.meister</dc:creator>
				<category><![CDATA[Normaler Blog]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Processing]]></category>
		<category><![CDATA[Theory]]></category>

		<guid isPermaLink="false">http://www.extrapixel.ch/2006/03/03/blogosphere-browser/</guid>
		<description><![CDATA[The subject of the pre-diploma project was &#8220;internet in a museum&#8221;. Every student had to develop a concept of an installation that helps the visitor to understand the internet. [MEDIA=1] My idea was a touchscreen based blogosphere browser. It should show the complexity, the &#8220;networkedness&#8221; of the blogosphere. On the other hand it should be [...]]]></description>
			<content:encoded><![CDATA[<p>The subject of the pre-diploma project was &#8220;internet in a museum&#8221;. Every student had to develop a concept of an installation that helps the visitor to understand the internet.</p>
<p>[MEDIA=1]</p>
<p><span id="more-32"></span><img id="image37" src="http://www.extrapixel.ch/wp-content/uploads/2007/01/hardware_fake.png" alt="hardware_fake.png" /></p>
<p>My idea was a touchscreen based blogosphere browser. It should show the complexity, the &#8220;networkedness&#8221; of the blogosphere. On the other hand it should be a tool to explore the blogosphere completely off the browser.</p>
<p>BlogosphereBrowser in action:<br />
[MEDIA=5]</p>
<p>BlogosphereBrowser Presentation:<br />
[MEDIA=4]</p>
<p><a href="http://blogospherebrowser.extrapixel.ch">Please visit the project website for a complete description of the project</a> (German only).</p>
<p><strong>Downloads:</strong></p>
<p><a id="p38" href="http://www.extrapixel.ch/wp-content/uploads/2007/01/dummy_web.zip">dummy_web.zip</a> The zip-file contains application &#038; sourcecode.</p>
<p><em>How to use blogosphereBrowser:<br />
Think of your cursor to be a finger. Click and drag your mouse simulate touching the screen. As we have one mouse only, the zooming and paning works with z & drag; space &#038; drag.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.extrapixel.ch/2006/07/14/blogosphere-browser/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>spotFiles</title>
		<link>http://www.extrapixel.ch/2006/03/03/spotfiles/</link>
		<comments>http://www.extrapixel.ch/2006/03/03/spotfiles/#comments</comments>
		<pubDate>Fri, 03 Mar 2006 13:01:21 +0000</pubDate>
		<dc:creator>patrick.meister</dc:creator>
				<category><![CDATA[Normaler Blog]]></category>
		<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[Interaction Design]]></category>

		<guid isPermaLink="false">http://www.extrapixel.ch/2006/03/03/spotfiles/</guid>
		<description><![CDATA[In the project &#8220;Hardware Interface Design&#8221; I was looking for new GPS applications. [MEDIA=16] Getting there I came up with the final concept &#8220;spotFiles&#8221; after these early ideas: GPSecureStick: This USB memory stick includes a GPS receiver. Files saved on the stick are automatically geo-tagged. If you select the secure option, the files can only [...]]]></description>
			<content:encoded><![CDATA[<p>In the project &#8220;Hardware Interface Design&#8221; I was looking for new GPS applications.<br />
[MEDIA=16]<br />
<span id="more-30"></span><br />
<strong>Getting there</strong><br />
I came up with the final concept &#8220;spotFiles&#8221; after these early ideas:<br />
<em>GPSecureStick</em>: This USB memory stick includes a GPS receiver. Files saved on the stick are automatically geo-tagged. If you select the secure option, the files can only be viewed at the place you saved them. This &#8220;secure place&#8221; can also be added afterwards by hand.</p>
<p><em>My Favourite Spots</em> (MFS): MFS is a software for Macs/PCs. It makes the computer react on the place it is used at. MFS learns places I visit often. With comparing many settings on the computer at the different places, MFS learns where I like what best. E.g. a simple desktop image in the office, high music volume at home, standard mail accound, network settings, often used applicaions, etc.</p>
<p><strong>Final concept: spotFiles<br />
</strong><img id="image40" src="http://www.extrapixel.ch/wp-content/uploads/2007/01/spotfiles_logo2.png" alt="spotfiles_logo2.png" /><br />
SpotFiles is a geographical add-on for MacOS X&#8217;s file system. Using GIS- and GPS data, spotFiles adds a geographical context to all files on the computer.</p>
<p>SpotFiles consists of three elements:</p>
<p><strong>SpotFiles Stick:</strong> is a GPS receiver for the USB interface. It supplys  the computer with a GPS location. If there is weak or no satellite connection, its assumed that the computer is in a building and the last valid location is used as the actual position.<br />
<img id="image41" src="http://www.extrapixel.ch/wp-content/uploads/2007/01/gps_stick.png" alt="gps_stick.png" /></p>
<p><strong>Finder Plugin:</strong>  adds a geographical view to the OS X Finder. Now one can surf the file system geographically.<br />
[MEDIA=16]<br />
<strong><br />
Spotlight Plugin: </strong>collects and combines the necessary data from geographic information systems. E.g. if a city name is found in the contents of a file, its coordinates are fetched from the GIS.<br />
<img id="image42" src="http://www.extrapixel.ch/wp-content/uploads/2007/01/spotlight.png" alt="spotlight.png" /></p>
<p>The main data sources of SpotFiles are its GPS-stick and external GIS-databases. If a file ist created or edited, create- and edit place are saved in the file&#8217;s metadata. The GPS data is continously added to the tracklog. The tracklog is a database on the users computer, that holds all the places that the computer has been at.<br />
Apple&#8217;s spotlight indexes all the files in the file system. SpotFiles recognises geographical names like cities, countries etc. during this process. It fetches information about this geographical entities from external GIS services. So, for example, if there is an address in a letter document, SpotFiles will add its coordinates to the files metadata.<br />
For visualisation purposes all this data is combined: metadata from the files, the tracklog database and the indexed spotlight data. So, if there should be a file without geo-tags, it can still be put in a geographical context with the tracklog database</p>
<p>Please see the project documentation for more information.</p>
<p><strong>Downloads</strong>:<br />
<a id="p44" href="http://www.extrapixel.ch/wp-content/uploads/2007/01/spotfiles_doku2.pdf">Project documentation (pdf)</a><br />
<a id="p43" href="http://www.extrapixel.ch/wp-content/uploads/2007/01/praesentation_spotfile3.swf">Presentation (including interactive interface dummy) (swf)</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.extrapixel.ch/2006/03/03/spotfiles/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Decoding Space</title>
		<link>http://www.extrapixel.ch/2006/03/01/decoding-space/</link>
		<comments>http://www.extrapixel.ch/2006/03/01/decoding-space/#comments</comments>
		<pubDate>Wed, 01 Mar 2006 11:30:46 +0000</pubDate>
		<dc:creator>patrick.meister</dc:creator>
				<category><![CDATA[Normaler Blog]]></category>
		<category><![CDATA[Blender3D]]></category>
		<category><![CDATA[Interaction Design]]></category>

		<guid isPermaLink="false">http://www.extrapixel.ch/2006/03/01/decoding-space/</guid>
		<description><![CDATA[The project &#8220;Decoding Space&#8221; was about decoding a public, urban space and transcribing it to a virtual 3D-Space. The given subject was the main bus station in Zürich. One aspect of the station had to be analysed and visualized. I was especially interested in all the rhythms existing in the area of the bus station: [...]]]></description>
			<content:encoded><![CDATA[<p>The project &#8220;Decoding Space&#8221; was about decoding a public, urban space and transcribing it to a virtual 3D-Space. The given subject was the main bus station in Zürich. One aspect of the station had to be analysed and visualized.</p>
<p>I was especially interested in all the rhythms existing in the area of the bus station: time-tables, opening hours, cleaning intervals, etc. First I tried to find a system to visualize every thinkable rhythm. I find several solutions, described in the project documentation.</p>
<p>Finding shapes:<br />
<img id="image45" src="http://www.extrapixel.ch/wp-content/uploads/2007/01/process1.jpg" alt="process1.jpg" /><br />
<span id="more-28"></span><br />
A tree-based visualization:<br />
<img id="image46" src="http://www.extrapixel.ch/wp-content/uploads/2007/01/process2.jpg" alt="process2.jpg" /></p>
<p>Encoding a rhythm:<br />
<img id="image47" src="http://www.extrapixel.ch/wp-content/uploads/2007/01/process3.jpg" alt="process3.jpg" /></p>
<p>A model made from foam and toothpicks:<br />
<img id="image48" src="http://www.extrapixel.ch/wp-content/uploads/2007/01/modell.jpg" alt="modell.jpg" /></p>
<p>The final animation, rendered in Blender:<br />
[MEDIA=6]</p>
<p>Downloads:<br />
<a id="p49" href="http://www.extrapixel.ch/wp-content/uploads/decoding_patrick_meister.blend">Blender file (.blend)</a><br />
<a id="p49" href="http://www.extrapixel.ch/wp-content/uploads/2007/01/pm_decoding_space_doku.pdf">Project documentation (pdf)</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.extrapixel.ch/2006/03/01/decoding-space/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Simulation System</title>
		<link>http://www.extrapixel.ch/2006/02/28/simulation-system-autonomous-agent/</link>
		<comments>http://www.extrapixel.ch/2006/02/28/simulation-system-autonomous-agent/#comments</comments>
		<pubDate>Tue, 28 Feb 2006 16:29:31 +0000</pubDate>
		<dc:creator>patrick.meister</dc:creator>
				<category><![CDATA[Normaler Blog]]></category>
		<category><![CDATA[Director, Lingo]]></category>
		<category><![CDATA[Interaction Design]]></category>

		<guid isPermaLink="false">http://www.extrapixel.ch/2006/02/28/simulation-system-autonomous-agent/</guid>
		<description><![CDATA[In the course &#8220;Simulation Systems&#8221; every student had to develop an autonomous agent. These agents lived in a given environment programmed in Macromedia Director. Fixed rules existed, e.g. the amount of energy used to move the agent; distance of sight, and so on. My agent is called &#8220;Saufant&#8221;. It is quite successfull in finding food, [...]]]></description>
			<content:encoded><![CDATA[<p>In the course &#8220;Simulation Systems&#8221; every student had to develop an autonomous agent. These agents lived in a given environment programmed in Macromedia Director. Fixed rules existed, e.g. the amount of energy used to move the agent; distance of sight, and so on.<br />
My agent is called &#8220;Saufant&#8221;. It is quite successfull in finding food, especially in finding paths. It is very curious about everything it sees or hears. It has a memory of things it has seen already and choses its routes accordingly. If 2 Saufants meet, they share information about the world, e.g. where are the foods?<br />
<span id="more-27"></span><br />
&#8220;The world&#8221; has some rules: characters can only &#8220;see&#8221;  in walking direction, 180pixels. They can &#8220;hear&#8221; 360 degrees, but with an 100px radius only. &#8220;Seeing&#8221; in the world, means getting information about where and what objects the saufant can see. &#8220;Hearing&#8221; is just getting the information that there is something, but not what exactly. Every step that the character makes reduces it&#8217;s energy. If all energy is used, the character will die. So, they must find food! And probably reproduce&#8230;<br />
[MEDIA=15]</p>
<p>All the sprites&#8230;<br />
<img id="image50" src="http://www.extrapixel.ch/wp-content/uploads/2007/01/saufant.png" alt="saufant.png" /></p>
<p>Downloads:<br />
<a href="http://www.extrapixel.ch/wp-content/uploads/simSys_standalone.osx">Complete Simulation System (MacOS X Application)</a><br />
<a href="http://www.extrapixel.ch/wp-content/uploads/simSys_standalone.exe">Complete Simulation System (Win32 Application)</a><br />
<a href="http://www.extrapixel.ch/wp-content/uploads/saufant_presentation.osx">Interactive Presentation of the &#8220;Saufant&#8221; Agent (MacOSX Application)</a><br />
<a href="http://www.extrapixel.ch/wp-content/uploads/saufant_presentation.exe">Interactive Presentation of the &#8220;Saufant&#8221; Agent (Win32 Application)</a><br />
<a href="http://www.extrapixel.ch/wp-content/uploads/simSys_standalone.dir">Source code (Director .dir file)</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.extrapixel.ch/2006/02/28/simulation-system-autonomous-agent/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Interaction Dynamic</title>
		<link>http://www.extrapixel.ch/2005/06/30/interaktionsmodelle/</link>
		<comments>http://www.extrapixel.ch/2005/06/30/interaktionsmodelle/#comments</comments>
		<pubDate>Thu, 30 Jun 2005 09:57:08 +0000</pubDate>
		<dc:creator>patrick.meister</dc:creator>
				<category><![CDATA[Normaler Blog]]></category>
		<category><![CDATA[Director, Lingo]]></category>
		<category><![CDATA[Interaction Design]]></category>

		<guid isPermaLink="false">http://stud.hgkz.ch/patrick.meister/2005/06/30/interaktionsmodelle/</guid>
		<description><![CDATA[The project &#8220;interaction dynamic&#8221; was about exploring ways of mouse-interaction. Word pairs were given and had to be implemented in a interactive sketch. I used Macromedia Director to create these interaction models. short &#8211; long (1 / 10) [MEDIA=10] Four circles represent four paths; short paths, long paths. All the circles share one crossing point. [...]]]></description>
			<content:encoded><![CDATA[<p>The project &#8220;interaction dynamic&#8221; was about exploring ways of mouse-interaction. Word pairs were given and had to be implemented in a interactive sketch. I used Macromedia Director to create these interaction models.</p>
<p><strong>short &#8211; long (1 / 10)</strong><br />
[MEDIA=10]</p>
<p>Four circles represent four paths; short paths, long paths. All the circles share one crossing point. Click with the mouse to create a new spot at the crossing point. The new spot wanders on the paths. Use the mouse position to select an acitve path (a circle). Do the spots pass the crossing point, they will change their path to the active one. Place the cursor in the innermost circle to let all spots keep their path.</p>
<p><span id="more-22"></span><br />
<strong>liquid &#8211; glutinous</strong><br />
[MEDIA=7]<br />
&#8211;> link<br />
One hundred regularly placed points act like the surface of a liquid. The cursor touches this surface and changes it. If the mouse is pressed, the material is very fluid. If not, its mor glutinous.</p>
<p><strong>inside &#8211; outside</strong><br />
[MEDIA=9]<br />
&#8211;> link<br />
Many balls fly in a space with a random direction and velocity. In the center of the space there is a rectangular cage. Clicking the mouse opens the cage, releasing the mouse closes it again.</p>
<p><strong>static &#8211; dynamic</strong><br />
[MEDIA=13]<br />
&#8211;> link<br />
Different bars change their color in a gradient fluently. The gradient itself is static. The mouse position influences the gradient colors of all the bars. You can add even more dynamic, if you hover the bars. This will slow them down and make them differ from the global rhythm.</p>
<p><strong>up &#8211; down &#8211; left &#8211; right</strong><br />
[MEDIA=11]<br />
&#8211;> link<br />
There are four active zones on the edges of the stage. Click one of these active zones to start a new shape. The new shape will grow as long as you hold down the mouse. The second dimension of the shape is determined by the distance to the clicking point. The grow direction of the shapes depends on the active zone you clicked: top zone: down, left zone: right, and vice versa. As soon as you release the mouse button, the shape moves further in the growing direction. When it leaves the screen it will lose a bit of its opacity and re-enter the screen from the opposite side.</p>
<p><strong>small &#8211; large</strong><br />
[MEDIA=8]<br />
&#8211;> link<br />
Many circles arrange arround a center point. The distance to the center point determines the size of the circles. Big outside, small inside. If you touch the circles with the mouse, they will move towards the center point on a spiral path.</p>
<p><strong>visible &#8211; invisible</strong><br />
[MEDIA=12]<br />
&#8211;> link<br />
A gradient in the background changes its colors according to the vertical and horizontal mouse position. Try to find and click the balls that are flying around. The balls can only have the most extreme colors of the background gradient. If they ar left of the center, they have the left clore; opposite if they are right of the center. If you found all the balls, you get a visual feedback.</p>
<p><strong>Downloads:</strong><br />
<a href="http://www.extrapixel.ch/wp-content/uploads/interaction_models_source.zip">Sourcecode (zip)</a><br />
<a href="http://www.extrapixel.ch/wp-content/uploads/interaction_models_mac.zip">Applications OSX (zip)</a><br />
<a href="http://www.extrapixel.ch/wp-content/uploads/interaction_models_win.zip">Applications Windows (zip)</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.extrapixel.ch/2005/06/30/interaktionsmodelle/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

