<?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>TOOLBOX INTERACTION DESIGN &#187; Arrays</title>
	<atom:link href="http://ifdblog.org/toolbox/?cat=50&#038;feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://ifdblog.org/toolbox</link>
	<description>Interactiondesign Toolbox der Fachhochschule Magdeburg-Stendal</description>
	<lastBuildDate>Mon, 02 Jul 2012 16:50:35 +0000</lastBuildDate>
	<language>de-DE</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.4.1</generator>
		<item>
		<title>Processing Ws Teil 3 Pixeldaten verarbeiten und Arrays</title>
		<link>http://ifdblog.org/toolbox/?p=609</link>
		<comments>http://ifdblog.org/toolbox/?p=609#comments</comments>
		<pubDate>Tue, 22 Jun 2010 09:32:35 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Arrays]]></category>
		<category><![CDATA[Bilder]]></category>
		<category><![CDATA[PROCESSING]]></category>

		<guid isPermaLink="false">http://ifdblog.org/toolbox/?p=609</guid>
		<description><![CDATA[Bild- und Pixeloperationen Bilder können in mit loadImage() geladen und im PImage Objekt weiter verarbeitet werden. Neben dem einfachen Darstellen des Bildes kann man auch Pixel um Pixel verändern, ähnlich einem Photoshopfilter. Dieses Bild von Manfred Pecki besteht aus verschiedenen Grauwerten. Ich will das Bild in ein reines schwarz/weiß Bild verwandeln. Um zu entscheiden, ob [...]]]></description>
			<content:encoded><![CDATA[<p>Bild- und Pixeloperationen<br />
Bilder können in mit loadImage() geladen und im PImage Objekt weiter verarbeitet werden. Neben dem einfachen Darstellen des Bildes kann man auch Pixel um Pixel verändern, ähnlich einem Photoshopfilter.<br />
<a href="http://ifdblog.org/toolbox/wp-content/uploads/2010/06/manfred-pecki.png" rel="shadowbox[sbpost-609];player=img;"><img src="http://ifdblog.org/toolbox/wp-content/uploads/2010/06/manfred-pecki.png" alt="" title="manfred-pecki" width="176" height="247" class="alignnone size-full wp-image-610" /></a></p>
<p>Dieses Bild von Manfred Pecki besteht aus verschiedenen Grauwerten. Ich will das Bild in ein reines schwarz/weiß Bild verwandeln. Um zu entscheiden, ob ein Pixel in weiß umgewandelt werden soll, analysiere ich seine Grauwert. Liegt es innerhalb eines bestimmten Grenzwertes (myThreshold), wird es weiß, ansonsten schwarz (Farbwert: 255).</p>
<p>Dieser Grenzwert ist in diesem Beispiel dynamisch an die X-Position des Mauszeigers gekoppelt und gibt einen Wert zwischen 0 und 255 aus<br />
float myThreshold = (float)mouseX / width * 255;</p>
<p>Nachdem das Bild geladen ist<br />
myImage = loadImage(&#8220;data/manfred-pecki.png&#8221;);<br />
und als Hintergrundbild wiedergegeben ist<br />
background(myImage);</p>
<p>kann ich mit loadPixels() jedes einzelne Pixel meiner Anwendung in einem Array zur Verfügung stellen, verändern und dieses veränderte Pixel mit updatePixels() neu auf die Screen rendern.</p>
<p>Das passiert alles in der draw() Methode in einer for-Schleife, die genau so lang ist wie das Bild Pixel hat. Diese Länge erhalte ich in einem Array mit pixels.length. Bei welchem Pixel ich mich gerade befinde sagt mir der Zähler myPixelPosition.</p>
<p>In jedem Schleifendurchlauf wird die Funbktion setPixelFromBitmap() aufgerufen, die entscheidet ob ein Pixel weiß oder schwarz werden soll.<br />
Ist die Schleife abgearbeitet, wird das Ergebnis mit updatePixels(); auf die Screen gerendert.</p>
<p>Hier wird auch deutlich, das die Länge und Breite des Bildes für die Verarbeitung keine Rolle spielt, sondern das Bild einfach eine lineare Aneinanderreihung von einzelnen Pixeln ist.</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;">PImage myImage<span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">int</span> myPixelPosition<span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">void</span> setup<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  size<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">176</span>,<span style="color: #cc66cc;">247</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #666666; font-style: italic;">//Screnn in der Größe des importieren Bildes</span>
  frameRate<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">60</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #666666; font-style: italic;">// myImage = loadImage(&quot;http://ifdblog.org/ba-om2010/data_processingblog&quot;);</span>
  myImage <span style="color: #339933;">=</span> loadImage<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;data/manfred-pecki.png&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  background<span style="color: #009900;">&#40;</span>myImage<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000066; font-weight: bold;">void</span> draw<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #666666; font-style: italic;">/* lädt die komplette Screen in den Array pixels[] von myImage */</span>
  loadPixels<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">/* den &quot;Schwellwert&quot; festlegen
  *  Operation ergibt einen Wert von 0 - 255
  */</span>
  <span style="color: #000066; font-weight: bold;">float</span> myThreshold <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">float</span><span style="color: #009900;">&#41;</span>mouseX <span style="color: #339933;">/</span> width <span style="color: #339933;">*</span> <span style="color: #cc66cc;">255</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> i<span style="color: #339933;">=</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> pixels.<span style="color: #006633;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    setPixelFromBitmap<span style="color: #009900;">&#40;</span>myThreshold<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #666666; font-style: italic;">/*
    * Inkrement von myPixelPosition und mit dem *Modulo* wird
    * garantierrt, dass der Array in seinen Grenzen bleibt
    */</span>
    myPixelPosition<span style="color: #339933;">++;</span>
    myPixelPosition<span style="color: #339933;">%=</span> pixels.<span style="color: #006633;">length</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
  <span style="color: #666666; font-style: italic;">/* alle Pixels darstellen */</span>
  updatePixels<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">void</span> setPixelFromBitmap<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">float</span> theThreshold<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #666666; font-style: italic;">/*
  * das aktuelle Pixel abfragen
  * myPixePosition ist global definiert und kann deshalb überall verwendet werden
  */</span>
  <span style="color: #000066; font-weight: bold;">int</span> myImagePixel <span style="color: #339933;">=</span> myImage.<span style="color: #006633;">pixels</span><span style="color: #009900;">&#91;</span>myPixelPosition<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">/*
  * Abfrage, ob aktuelle Pixel größer oder kleiner ist als der Schwellwert...
  * entsprechend wird der Farbwert invertiert
  */</span>
  <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>brightness<span style="color: #009900;">&#40;</span>myImagePixel<span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> theThreshold<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    pixels<span style="color: #009900;">&#91;</span>myPixelPosition<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> color<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
  <span style="color: #000000; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
    pixels<span style="color: #009900;">&#91;</span>myPixelPosition<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> color<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Modulo<br />
Der Modulo gibt mir den Rest einer Division zurück.<br />
5 Modulo 2 = 1<br />
5 % 2 = 1<br />
Damit kann ich einen Zähler erstellen, der nie über einen Bestimmten Wert wächst und einen Array out of Bounds Fehler produziert, also einen Arrayindex abfragt der größer wäre als der Arry tatsächlich ist:<br />
myPixelPosition%= pixels.length;<br />
wo_befinde_ich_mich_im_array %= gesamtlänge_des_arrays</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> myArray<span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">int</span> myArrayPosition<span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">void</span> setup<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  size<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">320</span>, <span style="color: #cc66cc;">240</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  frameRate<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">5</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  rectMode<span style="color: #009900;">&#40;</span>CENTER<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  myArray <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #cc66cc;">40</span>, <span style="color: #cc66cc;">80</span>, <span style="color: #cc66cc;">120</span>, <span style="color: #cc66cc;">160</span>, <span style="color: #cc66cc;">200</span>, <span style="color: #cc66cc;">240</span>, <span style="color: #cc66cc;">280</span>  <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000066; font-weight: bold;">void</span> draw<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  background<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  myArrayPosition<span style="color: #339933;">++;</span>
  myArrayPosition <span style="color: #339933;">%=</span> myArray.<span style="color: #006633;">length</span><span style="color: #339933;">;</span>
  println<span style="color: #009900;">&#40;</span>myArrayPosition<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  rect<span style="color: #009900;">&#40;</span>myArray<span style="color: #009900;">&#91;</span>myArrayPosition<span style="color: #009900;">&#93;</span>, height <span style="color: #339933;">/</span> <span style="color: #cc66cc;">2</span>, <span style="color: #cc66cc;">40</span>, height <span style="color: #339933;">/</span> <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://ifdblog.org/toolbox/?feed=rss2&#038;p=609</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Arrays &#8211; create drops on mouseclick</title>
		<link>http://ifdblog.org/toolbox/?p=388</link>
		<comments>http://ifdblog.org/toolbox/?p=388#comments</comments>
		<pubDate>Sat, 12 Jun 2010 10:46:53 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Arrays]]></category>
		<category><![CDATA[PROCESSING]]></category>

		<guid isPermaLink="false">http://ifdblog.org/toolbox/?p=388</guid>
		<description><![CDATA[Click on stage to create drops. boolean locked = false; // regelt das nur einmal in die If Abfrage gesprungen wird &#160; //Array initialisieren mit 10Teilnehmern float&#91;&#93; tropfenX = new float&#91;10&#93;; float&#91;&#93; tropfenY = new float&#91;10&#93;; //position des letzten Clicks für den Tropfen zum zeichnen &#160; int randomGroesse; //random groesse fur den tropefen beim Clicken [...]]]></description>
			<content:encoded><![CDATA[<p>Click on stage to create drops.</p>
<p><script type="application/processing">

boolean locked = false;  // regelt das nur einmal in die If Abfrage gesprungen wird

//Array initialisieren mit 10Teilnehmern
float[] tropfenX = new float[10];
float[] tropfenY = new float[10]; //position des letzten Clicks für den Tropfen zum zeichnen

int randomGroesse;  //random groesse fur den tropefen beim Clicken

int zaehler = 0;  //position im Array

void setup() {
  size(400, 400);

  // tropfenX.length gibt die Anzahl der Teilnehmer im Array zurück
  for (int i=0; i
<tropfenX.length; i++){
    //setzt im Array an der position i einen festen wert
    tropfenX[i] = -10;
    tropfenY[i] = 1;
  }
}

void point(x, y) {
  line(x,y,x,y);
}

void draw() {
  background(255);

  //wenn mouse gedrückt und locked nicht gesetzt ist...
  if (mousePressed == true && locked == false){
    //...wird locked gesetzt
    locked = true;

    //parsen der funktion random mit (int) zu einer Integer Zahl
    //tropfen(mouseX, mouseY, (int)random(20));

    //funktion floor rundet eine float zahl auf eine ganzZahl ab
    randomGroesse = floor( random(5, 20) );

    //befüllen der variablen mit aktuiellen MousePosition

    tropfenX[zaehler] = mouseX;
    tropfenY[zaehler] = mouseY;

    //setzt zaehler einen hoch un regelt so die position
    //im Array an dem die neue MousePosition gespeichert wird
    zaehler++;
    //begrenzen des Zählers auf die läge des Arrays
    if (zaehler==tropfenX.length){
      zaehler = 0; 
    }
  }

  //zählt durh das gesammte array und zeichnet jeden Teilnehmer i...
  for (int i=0; i<tropfenX.length; i++){
    //lässt tropfen runter fallen
    tropfenY[i] = tropfenY[i] * 1.02;

    //springen in die Tropfen Funktion und zeichnen den tropfen an position tropfenX, tropfenY
    tropfen(tropfenX[i], tropfenY[i], randomGroesse);
  }
}

void mouseReleased(){
  //wenn die mouse losgelassen wird, wird locked wieder false
  locked = false; 
}

void tropfen(float theX, float theY, int groesse){
  //neue Matrix eröffnen
  pushMatrix();
  //setzt Nullpunkt der matrix auf die übergebene Postion theX / theY
  translate(theX, theY);
  //rotieren die matrix um 45grad, damit er gerade erscheint
  rotate( radians(45) );

  //Koordinaten für tropfen zeichnung
  //abhängig vom Nullpunkt
  int coord = 0; // X- und Y-Koordinate

  //wiedeholt solange bis s gleichgroß der übergebenen groesse wird
  for(int s=0; s<groesse; s++){
    //strichstärke wächst bei jeder schleife abhängig zu s
    strokeWeight(s);
    //setzt einen punkt an den koordinaten coord / coord
    point(coord, coord);
    //setzt coord einen höher
    coord++;
  }

  //schliessen der matrix 
  popMatrix();
}

</script></p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">boolean</span> locked <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">false</span><span style="color: #339933;">;</span>  <span style="color: #666666; font-style: italic;">// regelt das nur einmal in die If Abfrage gesprungen wird</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//Array initialisieren mit 10Teilnehmern</span>
<span style="color: #000066; font-weight: bold;">float</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> tropfenX <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #000066; font-weight: bold;">float</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">10</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">float</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> tropfenY <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #000066; font-weight: bold;">float</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">10</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">//position des letzten Clicks für den Tropfen zum zeichnen</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">int</span> randomGroesse<span style="color: #339933;">;</span>  <span style="color: #666666; font-style: italic;">//random groesse fur den tropefen beim Clicken</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">int</span> zaehler <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>  <span style="color: #666666; font-style: italic;">//position im Array</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">void</span> setup<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  size<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">400</span>, <span style="color: #cc66cc;">400</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// tropfenX.length gibt die Anzahl der Teilnehmer im Array zurück</span>
  <span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> i<span style="color: #339933;">=</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>tropfenX.<span style="color: #006633;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #666666; font-style: italic;">//setzt im Array an der position i einen festen wert</span>
    tropfenX<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #339933;">-</span><span style="color: #cc66cc;">10</span><span style="color: #339933;">;</span>
    tropfenY<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">void</span> draw<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  background<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">//wenn mouse gedrückt und locked nicht gesetzt ist...</span>
  <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>mousePressed <span style="color: #339933;">==</span> <span style="color: #000066; font-weight: bold;">true</span> <span style="color: #339933;">&amp;&amp;</span> locked <span style="color: #339933;">==</span> <span style="color: #000066; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #666666; font-style: italic;">//...wird locked gesetzt</span>
    locked <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">true</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">//parsen der funktion random mit (int) zu einer Integer Zahl</span>
    <span style="color: #666666; font-style: italic;">//tropfen(mouseX, mouseY, (int)random(20));</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">//funktion floor rundet eine float zahl auf eine ganzZahl ab</span>
    randomGroesse <span style="color: #339933;">=</span> floor<span style="color: #009900;">&#40;</span> random<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">5</span>, <span style="color: #cc66cc;">20</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">//befüllen der variablen mit aktuiellen MousePosition</span>
&nbsp;
    tropfenX<span style="color: #009900;">&#91;</span>zaehler<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> mouseX<span style="color: #339933;">;</span>
    tropfenY<span style="color: #009900;">&#91;</span>zaehler<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> mouseY<span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">//setzt zaehler einen hoch un regelt so die position</span>
    <span style="color: #666666; font-style: italic;">//im Array an dem die neue MousePosition gespeichert wird</span>
    zaehler<span style="color: #339933;">++;</span>
    <span style="color: #666666; font-style: italic;">//begrenzen des Zählers auf die läge des Arrays</span>
    <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>zaehler<span style="color: #339933;">==</span>tropfenX.<span style="color: #006633;">length</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
      zaehler <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> 
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">//zählt durh das gesammte array und zeichnet jeden Teilnehmer i...</span>
  <span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> i<span style="color: #339933;">=</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>tropfenX.<span style="color: #006633;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #666666; font-style: italic;">//lässt tropfen runter fallen</span>
    tropfenY<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> tropfenY<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">*</span> <span style="color: #cc66cc;">1.02</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">//springen in die Tropfen Funktion und zeichnen den tropfen an position tropfenX, tropfenY</span>
    tropfen<span style="color: #009900;">&#40;</span>tropfenX<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>, tropfenY<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>, randomGroesse<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">void</span> mouseReleased<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  <span style="color: #666666; font-style: italic;">//wenn die mouse losgelassen wird, wird locked wieder false</span>
  locked <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">false</span><span style="color: #339933;">;</span> 
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">void</span> tropfen<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">float</span> theX, <span style="color: #000066; font-weight: bold;">float</span> theY, <span style="color: #000066; font-weight: bold;">int</span> groesse<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  <span style="color: #666666; font-style: italic;">//neue Matrix eröffnen</span>
  pushMatrix<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #666666; font-style: italic;">//setzt Nullpunkt der matrix auf die übergebene Postion theX / theY</span>
  translate<span style="color: #009900;">&#40;</span>theX, theY<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #666666; font-style: italic;">//rotieren die matrix um 45grad, damit er gerade erscheint</span>
  rotate<span style="color: #009900;">&#40;</span> radians<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">45</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">//Koordinaten für tropfen zeichnung</span>
  <span style="color: #666666; font-style: italic;">//abhängig vom Nullpunkt</span>
  <span style="color: #000066; font-weight: bold;">int</span> coord <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// X- und Y-Koordinate</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">//wiedeholt solange bis s gleichgroß der übergebenen groesse wird</span>
  <span style="color: #000000; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> s<span style="color: #339933;">=</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> s<span style="color: #339933;">&lt;</span>groesse<span style="color: #339933;">;</span> s<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #666666; font-style: italic;">//strichstärke wächst bei jeder schleife abhängig zu s</span>
    strokeWeight<span style="color: #009900;">&#40;</span>s<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #666666; font-style: italic;">//setzt einen punkt an den koordinaten coord / coord</span>
    point<span style="color: #009900;">&#40;</span>coord, coord<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #666666; font-style: italic;">//setzt coord einen höher</span>
    coord<span style="color: #339933;">++;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">//schliessen der matrix </span>
  popMatrix<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://ifdblog.org/toolbox/?feed=rss2&#038;p=388</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Matrixes push/pop</title>
		<link>http://ifdblog.org/toolbox/?p=377</link>
		<comments>http://ifdblog.org/toolbox/?p=377#comments</comments>
		<pubDate>Sat, 12 Jun 2010 10:25:13 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Arrays]]></category>
		<category><![CDATA[PROCESSING]]></category>

		<guid isPermaLink="false">http://ifdblog.org/toolbox/?p=377</guid>
		<description><![CDATA[This is a basic example on how to use matrixes and the push/pop command. void setup&#40;&#41;&#123; size&#40;400,400&#41;; &#125; &#160; void draw&#40;&#41;&#123; //setzt den Hintergrund weiss background&#40;255&#41;; smooth&#40;&#41;; &#160; //füllfarbe rot fill&#40;255, 0,0&#41;; //zeichen einer ellipse mit füllfarbe rot ellipse&#40;100,100,50,50&#41;; &#160; //öffnet eine neue Matrix pushMatrix&#40;&#41;; //verschiebt den Nullpunkt der Matrix auf x=100, y=0 translate&#40;100,0&#41;; //rotiert [...]]]></description>
			<content:encoded><![CDATA[<p>This is a basic example on how to use matrixes and the push/pop command.<br />
<a href="http://ifdblog.org/toolbox/wp-content/uploads/2010/06/pushPop.png" rel="shadowbox[sbpost-377];player=img;"><img class="alignnone size-full wp-image-419" title="pushPop" src="http://ifdblog.org/toolbox/wp-content/uploads/2010/06/pushPop.png" alt="" width="480" height="350" /></a></p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">void</span> setup<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  size<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">400</span>,<span style="color: #cc66cc;">400</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">void</span> draw<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  <span style="color: #666666; font-style: italic;">//setzt den Hintergrund weiss</span>
  background<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  smooth<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">//füllfarbe rot</span>
  fill<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">255</span>, <span style="color: #cc66cc;">0</span>,<span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #666666; font-style: italic;">//zeichen einer ellipse mit füllfarbe rot</span>
  ellipse<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">100</span>,<span style="color: #cc66cc;">100</span>,<span style="color: #cc66cc;">50</span>,<span style="color: #cc66cc;">50</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">//öffnet eine neue Matrix</span>
  pushMatrix<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #666666; font-style: italic;">//verschiebt den Nullpunkt der Matrix auf x=100, y=0</span>
  translate<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">100</span>,<span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #666666; font-style: italic;">//rotiert die Matrix um 0.5radians</span>
  rotate<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0.5</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #666666; font-style: italic;">//setzt füllfarbe blau</span>
  fill<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span>,<span style="color: #cc66cc;">0</span>,<span style="color: #cc66cc;">255</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #666666; font-style: italic;">//zeichnet ellipse mit füllfarbe blau</span>
  ellipse<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">140</span>,<span style="color: #cc66cc;">140</span>,<span style="color: #cc66cc;">10</span>,<span style="color: #cc66cc;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #666666; font-style: italic;">//beendet die mit pushMatrix eingeführte Matrix,</span>
  <span style="color: #666666; font-style: italic;">//und läd das vorher benutzte Koordinatensystem.</span>
  <span style="color: #666666; font-style: italic;">//dadurch nimmt die innerhalb von push- und popMatrix</span>
  <span style="color: #666666; font-style: italic;">//angewanten translate() und rotate() sich</span>
  <span style="color: #666666; font-style: italic;">//keinen EInfluss auf die nachfolgenden ellispen</span>
  popMatrix<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  fill<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span>,<span style="color: #cc66cc;">255</span>, <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  ellipse<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">180</span>,<span style="color: #cc66cc;">180</span>,<span style="color: #cc66cc;">50</span>,<span style="color: #cc66cc;">50</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://ifdblog.org/toolbox/?feed=rss2&#038;p=377</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
