/blog/simpler-taschenlampen-effekt-mit-processing-307

Hi,

heute möchte Ich dir zeigen wie man ganz simpel den Effekt eines Lichts (zum Beispiel das einer Taschenlampe..) mit Processing realisiert. Ich mache das in diesem Beispiel nur mit Kreisen. Man kann es sich vorstellen, dass man einen Kreis (ellipse()) erstellt und diesen mit weißer Farbe füllt. Das wäre dann erstmal lediglich ein durchgehend weißer Kreis. stroke(), also einen sichtbaren Rand, lassen wir hier weg. Der Effekt tritt letzlich dann durch Transparenz hervor. Stell dir vor wir machen einen Kreis den wir mit Weiß füllen und die Deckkraft sehr weit heruntersetzen. In einer Schleife werden weitere Kreise (an selber Stelle) hinzugefügt, die immer kleiner werden, und die Deckkraft indes stetig erhöht. Schwarz macht dabei als Hintergrund einen recht guten Eindruck, aber da kannst du noch experimentieren. Wollen wir uns nun zuerst das Grundgerüst ansehen, für das ganze drumherum sind eine Größe des Fensters von 300x300, ein unsichtbarer Cursor und ein schwarzer Hintergrund angedacht, der smooth()-Effekt rundet den Sketch optisch noch ab.

Hier eine Erklärung zu den Variablen: Die inner_radius Variable regelt die Stärke des weißen lichts, oder anders gesagt den Alphawert. c_radius gibt die größe des kompletten Lichts an. distance beschreibt die Distanz zwischen dem einen und dem nächsten Ring. stroke_weight und bstroke (hier noch nicht von Bedeutung) sind für später gedacht wenn wir über Tastendruck den Rand (sichtbar oder nicht, standardmäßig nicht sichtbar) und die Randdicke einstellen.

In void draw() siehst du zuallererst dass der Hintergrund bei jedem Durchlauf gefärbt wird, danach wird festgelegt dass wir keinen Rand angezeigt haben möchten (was man hier allerdings auch gerne weglassen kann wenn man es dafür in setup() schreibt). In einer Schleife machen wir die Kreise, dabei orientieren wir uns an einem Maximum, was hier der Radius angibt. Die Schritte, also die Distanz von einem Ring zum nächsten wird über den step-Parameter am Ende der Zeile, also als letzten Parameter der for-Schleife angegeben, also i+distance. Hier nochmal veranschaulicht was mit der Distanz gemeint ist:

In der Schleife wird dann zuerst die Füllfarbe mit fill() angegeben. Hier haben wir weiß als Farbe, als zweiten Parameter stellen wir den Alpha-Wert ein, die Transparenz quasi. Die Schleife durchläuft von Null bis c_radius, also von 0 bis 300, das heißt nicht dass die Schleife 300mal durchlaufen wird, dazu komm Ich gleich ;-). inner_radius ist 10. Nehmen wir also die Schleife genauer unter die Lupe um zu sehen welche Werte wir nach und nach für i / inner_radius bekommen, dabei nicht zu vergessen dass wir aber nicht tatsächlich 300 Durchläufe haben, da wir ja nicht jedesmal um +1 hochzählen sondern um distance, und da ist der Wert 5. 300 / 5 ergibt 60. Wir bekommen nach und nach folgende Werte als Alpha-Wert für die Füllfarbe der immer kleiner werdenden Kreise:

Durchlauf 1, i = 0: 0 Durchlauf 2, i = 5: 0 Durchlauf 3, i = 10: 1 Durchlauf 4, i = 15: 1 Durchlauf 5, i = 20: 2 Durchlauf 6, i = 25: 2 Durchlauf 7, i = 30: 3 Durchlauf 8, i = 35: 3 Durchlauf 9, i = 40: 4 Durchlauf 10, i = 45: 4 Durchlauf 11, i = 50: 5 Durchlauf 12, i = 55: 5 Durchlauf 13, i = 60: 6 Durchlauf 14, i = 65: 6 Durchlauf 15, i = 70: 7 Durchlauf 16, i = 75: 7 Durchlauf 17, i = 80: 8 Durchlauf 18, i = 85: 8 Durchlauf 19, i = 90: 9 Durchlauf 20, i = 95: 9 Durchlauf 21, i = 100: 10 Durchlauf 22, i = 105: 10 Durchlauf 23, i = 110: 11 Durchlauf 24, i = 115: 11 Durchlauf 25, i = 120: 12 Durchlauf 26, i = 125: 12 Durchlauf 27, i = 130: 13 Durchlauf 28, i = 135: 13 Durchlauf 29, i = 140: 14 Durchlauf 30, i = 145: 14 Durchlauf 31, i = 150: 15 Durchlauf 32, i = 155: 15 Durchlauf 33, i = 160: 16 Durchlauf 34, i = 165: 16 Durchlauf 35, i = 170: 17 Durchlauf 36, i = 175: 17 Durchlauf 37, i = 180: 18 Durchlauf 38, i = 185: 18 Durchlauf 39, i = 190: 19 Durchlauf 40, i = 195: 19 Durchlauf 41, i = 200: 20 Durchlauf 42, i = 205: 20 Durchlauf 43, i = 210: 21 Durchlauf 44, i = 215: 21 Durchlauf 45, i = 220: 22 Durchlauf 46, i = 225: 22 Durchlauf 47, i = 230: 23 Durchlauf 48, i = 235: 23 Durchlauf 49, i = 240: 24 Durchlauf 50, i = 245: 24 Durchlauf 51, i = 250: 25 Durchlauf 52, i = 255: 25 Durchlauf 53, i = 260: 26 Durchlauf 54, i = 265: 26 Durchlauf 55, i = 270: 27 Durchlauf 56, i = 275: 27 Durchlauf 57, i = 280: 28 Durchlauf 58, i = 285: 28 Durchlauf 59, i = 290: 29 Durchlauf 60, i = 295: 29

Der Kreis ganz in der Mitte hat somit maximal einen Alphawert von 29. Die Farbe und der Alphawert werden in der ersten Zeile in der Schleife festgelegt, gefüllt wird mit weiß, der Alphawert wird mithilfe der Schleifenvariable (i) dynamisch generiert. Danach noch Strichdicke und -farbe, was aber vorerst nicht von Belang ist, da bstroke auf false gesetzt ist und somit in der nächsten Zeile noStroke() aufgerufen wird. Das wird nachher interessant, wenn wir den Radius, den Alphawert, den (un-)sichtbaren Rand und die Distanz per Tastendruck ändern werden.

Jetzt wird noch die ellipse() gezeichnet, diese folgt der Maus. Die Größe der Kreise wird dynamisch festgelegt durch c_radius minus i.

Das wärs eigentlich schon, und das Ergebnis sollte nun so aussehen:

Nun kannst du noch einstellen dass über Tastendrücke bestimmte Aktionen erfolgen, Ich habe mir hierfür folgendes ausgedacht:

<pre> void keyPressed() { /* [+] und [-] drÃ¼cken, um die StÃ¤rke des Lichts zu bestimmen. Das heiÃt der Alphawert wird variiert */ if (key == '+' && inner_radius > 1) { inner_radius--; } if (key == '-') { inner_radius++; } //Tasten [k] und [g] um die grÃ¶Ãe des kompletten Radius des Lichts zu Ã¤ndern if (key == 'g') { c_radius++; } if (key == 'k') { c_radius--; } //Tasten [m] und [n] um die Distanz zu variieren, ein interessanter Effekt wie Ich finde if (key == 'm' && distance > 1) { distance--; } if (key == 'n') { distance++; } //Tasten [s] und [w] um die Strichdicke des Rands zu verÃ¤ndern if (key == 's' && stroke_weight > 0.2) { bstroke = true; stroke_weight-=0.1; } if (key == 'w') { bstroke = true; stroke_weight+=0.1; } //[x] drÃ¼cken, bstroke wieder auf false zu setzen //sodass kein Rand gezeichnet wird if (key == 'x') { bstroke = false; } //Um alles auf die ursprÃ¼nglichen Werte zurÃ¼ckzusetzen if (key == 'd') { distance = 5; c_radius = 300; inner_radius = 10; stroke_weight = 0.5; } } </pre>

Beschreibung ist als Kommentar beigefügt. Unser kompletter Code für dieses Projekt sieht nun so aus:

<pre> void setup() { smooth(); background(0); size(300, 300); noCursor(); } int inner_radius = 10; int c_radius = 300; int distance = 5; float stroke_weight = 0.5; boolean bstroke = false; void draw() { background(0); noStroke(); for (int i = 0; i < c_radius; i+=distance) { fill(#FFFFFF, i/inner_radius); strokeWeight(stroke_weight); stroke(#000000); if (bstroke == false) { noStroke(); } ellipse(mouseX, mouseY, c_radius - i, c_radius - i); } } void keyPressed() { /* [+] und [-] drÃ¼cken, um die StÃ¤rke des Lichts zu bestimmen. Das heiÃt der Alphawert wird variiert */ if (key == '+' && inner_radius > 1) { inner_radius--; } if (key == '-') { inner_radius++; } //Tasten [k] und [g] um die grÃ¶Ãe des kompletten Radius des Lichts zu Ã¤ndern if (key == 'g') { c_radius++; } if (key == 'k') { c_radius--; } //Tasten [m] und [n] um die Distanz zu variieren, ein interessanter Effekt wie Ich finde if (key == 'm' && distance > 1) { distance--; } if (key == 'n') { distance++; } //Tasten [s] und [w] um die Strichdicke des Rands zu verÃ¤ndern if (key == 's' && stroke_weight > 0.2) { bstroke = true; stroke_weight-=0.1; } if (key == 'w') { bstroke = true; stroke_weight+=0.1; } //[x] drÃ¼cken, bstroke wieder auf false zu setzen //sodass kein Rand gezeichnet wird if (key == 'x') { bstroke = false; } //Um alles auf die ursprÃ¼nglichen Werte zurÃ¼ckzusetzen if (key == 'd') { distance = 5; c_radius = 300; inner_radius = 10; stroke_weight = 0.5; } } </pre>

Wenn du möchtest kannst du hier und da mit den Werten noch herumexperimentieren, spezielle lights und ambient lights hinzufügen oder die Farbe des Lichtes verändern. Tipp: Verändere in der ersten Zeile in der Schleife die Farbe und lass sie zufällig aussehen:

<pre> fill(random(255), i/inner_radius); </pre>

Oder bunt:

<pre> colorMode(HSB); fill(random(255), random(255), random(255), i/inner_radius); </pre>

Oder ... oder ... dir wird schon was einfallen :-)

Mein fertiges Ergebnis kannst du dir auf OpenProcessing.org noch reinziehen, dafür klicke hier.

Bis demnächst Marius

Simpler Taschenlampen-Effekt mit Processing

Kommentare

Kommentar schreiben