Hi,

in einem der letzten Artikel sind Rotationen erstmals zur Sprache gekommen. Ich hab' dir die rotate()- und die radians()-Funktion gezeigt. Mit der rotate()-Funktion können wir Objekte rotieren, bzw. alles was nach der rotate()-Anweisung steht wird rotiert. Zur konvertierung von Grad-Angaben steht die radians()-Funktion zur Verfügung. Mit diesen coolen Spielereien kannst du also im Kreis rotieren.

Heute möchte ich dir die Rotation im Zusammenspiel mit Sinus und Kosinus erklären. Sinus und Kosinus können verschiedene Definitionen haben. Wikipedia erklärt es so:

<blockquote> <p><b>Sinus-</b> und <b>Kosinusfunktion</b> (auch <b>Cosinusfunktion</b>) sind <a href="/wiki/Elementare_Funktion" title="Elementare Funktion">elementare mathematische Funktionen</a>. Vor <a href="/wiki/Tangens_und_Kotangens" title="Tangens und Kotangens">Tangens und Kotangens</a>, <a href="/wiki/Sekans_und_Kosekans" title="Sekans und Kosekans">Sekans und Kosekans</a> bilden sie die wichtigsten <a href="/wiki/Trigonometrische_Funktion" title="Trigonometrische Funktion">trigonometrischen Funktionen</a> und spielen in weiteren mathematischen Disziplinen eine Rolle. Sie werden unter anderem in der Geometrie für Dreiecksberechnungen in der ebenen und <a href="/wiki/Sph%C3%A4rische_Trigonometrie" title="Sphärische Trigonometrie">sphärischen</a> <a href="/wiki/Trigonometrie" title="Trigonometrie">Trigonometrie</a> benötigt und sind wichtig in der <a href="/wiki/Analysis" title="Analysis">Analysis</a>.</p> </blockquote>

Im letzten Satz findest du die angesprochenen Definitionen. Schön und gut, uns interessiert aber ja im Endeffekt nur, wie sich das auf die Rotation im Sketch bemerkbar macht. Und wo das hin muss, dieses sin() / cos(). Sinus und Kosinus quetschen wir mit in die rotate()-Funktion, ganz an den Anfang, sodass radians(angle) von sin() verarbeitet wird. Ob wir im Sketch dann sin() oder cos() nehmen ist völlig egal, es dreht sich dann dabei einfach nur entweder in die eine oder in die andere Richtung. Prinzipiell gilt folgende Syntax:

<pre> <span style="color: #CC6600;">rotate</span>(<span style="color: #CC6600;">sin</span>(WERT)); </pre>

Wir übergeben an die sin()-Funktion jedoch einen durch radians() konvertierten Wert. Ich möchte es dir anhand eines simplen Beispiels zeigen, wie es funktioniert:

<script type="application/processing"> void setup() { size(300, 300); background(127); smooth(); } float angle; void draw() { background(127); translate(width/2, height/2); rotate(sin(radians(angle))); stroke(0); strokeWeight(2); line(0, 0, 100, 100); angle += 1; } </script>

Und der Code dazu:

<pre> <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>setup</b></span>() { <span style="color: #CC6600;">size</span>(300, 300); <span style="color: #CC6600;">background</span>(255); <span style="color: #CC6600;">smooth</span>(); } <span style="color: #CC6600;">float</span> angle; <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>draw</b></span>() { <span style="color: #CC6600;">background</span>(255); <span style="color: #CC6600;">translate</span>(<span style="color: #006699;">width</span>/2, <span style="color: #006699;">height</span>/2); <span style="color: #CC6600;">rotate</span>(<span style="color: #CC6600;">sin</span>(<span style="color: #CC6600;">radians</span>(angle))); <span style="color: #CC6600;">stroke</span>(0); <span style="color: #CC6600;">strokeWeight</span>(2); <span style="color: #CC6600;">line</span>(0, 0, 100, 100); angle += 1; } </pre>

Das sieht doch schonmal nach was aus ... naja ein bisschen zumindest. Jedenfallls siehst du nun, was dieses sin() und cos() tut, du bekommst damit einen wellenartigen Effekt. sin() berechnet also den Sinus eines Winkels. Übergeben wird der Winkel als Parameter. Sieh' dir das Beispiel mal an, dann verstehst du vielleicht besser, was mit wellenartig gemeint ist:

<pre> <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>setup</b></span>() { <span style="color: #CC6600;">size</span>(300, 200); <span style="color: #CC6600;">background</span>(0); <span style="color: #CC6600;">smooth</span>(); } <span style="color: #CC6600;">float</span> x, y; <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>draw</b></span>() { <span style="color: #7E7E7E;">//Mittellinie</span> <span style="color: #CC6600;">strokeWeight</span>(1); <span style="color: #CC6600;">stroke</span>(#FF0000, 127); <span style="color: #CC6600;">line</span>(0, <span style="color: #006699;">height</span>/2, <span style="color: #006699;">width</span>, <span style="color: #006699;">height</span>/2); <span style="color: #7E7E7E;">//Welle</span> <span style="color: #CC6600;">strokeWeight</span>(2); <span style="color: #CC6600;">stroke</span>(255); <span style="color: #CC6600;">point</span>(x, <span style="color: #006699;">height</span>/2+<span style="color: #CC6600;">sin</span>(y)*50); <span style="color: #7E7E7E;">//Nachfolgendes löschen:</span> <span style="color: #CC6600;">stroke</span>(0); <span style="color: #CC6600;">line</span>(x+1, 0, x+1, <span style="color: #006699;">height</span>); y += 0.1; x+=1; <span style="color: #CC6600;">if</span> (x > <span style="color: #006699;">width</span>) { <span style="color: #CC6600;">line</span>(0, 0, 0, <span style="color: #006699;">height</span>); x=0; } } </pre>

<script type="application/processing"> void setup() { size(300, 200); background(0); smooth(); } float x, y; void draw() { //Mittellinie strokeWeight(1); stroke(#FF0000, 127); line(0, height/2, width, height/2); //Welle strokeWeight(2); stroke(255); point(x, height/2+sin(y)*50); //Nachfolgendes löschen: stroke(0); line(x+1, 0, x+1, height); y += 0.1; x+=1; if (x > width) { line(0, 0, 0, height); x=0; } } </script>