Schlagwort-Archive: Transformationen

Rotations III


Eine weitere Variation der Rotations.

/** Copyright 2012 Thomas Koberger
*/

// https://lernprocessing.wordpress.com/
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

int rand=(int) random(0, 50);

void setup() {
size(1280, 1280);
background(0);
stroke(50, 100, 200, 5);
frameRate(50);
colorMode(HSB);
}

void draw() {
if (frameCount<=500) {
translate(width/2, height/2);
strokeWeight(frameCount/2);
float winkel=radians(frameCount*80);
rotate(winkel*rand);
stroke(map(radians(winkel)%(2*PI), 0, 2*PI, 0, 255), 255, 255, 5);
translate(cos(winkel)*100, sin(winkel)*100);
line(100, 0, 300, 0);
if (frameCount%50 == 0) saveFrame("rotations-"+rand+"-#####.png");
}
}


Rotations II


Processing 2.0

Beispiel: Das Auge

Das Programm von Rotations I wird nun um eine zufällig generierte Farbpalette erweitert. Diese Zufallsfarben weisen eine Gauss’sche Normalverteilung auf. Siehe Zufall

Außerdem ändert sich während der Laufzeit die Strichlänge, Farbe und Position.

/** Copyright 2012 Thomas Koberger
*/

// https://lernprocessing.wordpress.com/
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

Random generator;
int str=(int) random(7, 7);

int col[] = new int [str];
int baseCol= (int) random(0, 255);

void setup() {
size(2700, 2700);
background(0);
frameRate(120);
colorMode(HSB);
generator = new Random();
for (int i =0; i<col.length; i++) {
float gauss = (float) generator.nextGaussian();
col[i] = round( 40 * gauss + baseCol);
}
println(col);
}

void draw() {
if (frameCount<30000) {
translate(width/2, height/2);
//strokeWeight(frameCount/128);
strokeWeight(random(1, width/40));
rotate(radians(frameCount/2*(360/str)));
// println(str);
stroke(col[frameCount%str]-frameCount/200, 255, 255, 1);
line(width/4.5-frameCount/50, 0, random(width/8, width*4/10)-frameCount/50, 0);
if (frameCount%3000==0) saveFrame("rotate"+str+baseCol+"#####.png");
}
}

Rotations I


Processing 2.0

Ausgehend von einem Beispiel aus dem Artikel Transformationen hat mich interessiert, was mit einfachen Rotationen alles möglich ist.

Beispiel: Erst mal einfärbig und mit nur einer Rotation

/** Copyright 2012 Thomas Koberger
*/

// https://lernprocessing.wordpress.com/
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

void setup() {
size(900,900);
background(0);
stroke(50,100,200,5);
frameRate(25);
}

void draw() {
if(frameCount<500) {
translate(width/2,height/2);
strokeWeight(frameCount/4);
rotate(radians(frameCount*20));
line(50,0,350,0);
}
if(frameCount==500) saveFrame("rotate.png");
}

Beispiel: Etwas mehr Farbe

/** Copyright 2012 Thomas Koberger
*/

// https://lernprocessing.wordpress.com/
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

void setup() {
size(900,900);
background(0);
stroke(50,100,200,5);
frameRate(25);
colorMode(HSB);
}

void draw() {
if(frameCount<500) {
translate(width/2,height/2);
strokeWeight(frameCount/4);
println(radians(frameCount*20));
rotate(radians(frameCount*20));
stroke(map(radians(frameCount*20)%(2*PI),0,2*PI,0,255),255,255,5);
line(50,0,350,0);
}
if(frameCount==500) saveFrame("rotate.png");
}

Beispiel: Variation mit etwas schmäleren Strichen und mehr Wiederholungen

/** Copyright 2012 Thomas Koberger
*/

// https://lernprocessing.wordpress.com/
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

void setup() {
size(900, 900);
background(255);
stroke(50, 100, 200, 5);
frameRate(120);
colorMode(HSB);
}

void draw() {
if (frameCount<50000) {
translate(width/2, height/2);
strokeWeight(frameCount/64);
rotate(radians(frameCount*20));
stroke(map(radians(frameCount*20)%(2*PI), 0, 2*PI, 0, 255), 255, 255, 5);
line(200, 0, 220, 0);
if (frameCount%500 == 0) saveFrame("background-######.png");
}
}

Transformationen


Processing 2.0

Mit der Funktion translate(x ,y ); kann man das ganze Koordinatensystem verschieben. Werden danach Formen gezeichnet, addieren sich die x- und y-Koordinaten der Form und der translate()-Anweisung. Auch mehrere translate()– Anweidungen addieren sich.

Außerdem kann mit der Funktion pushMatrix() die Position des Koordinatensystems gespeichert werden. Mit der Umkehrfunktion popMatrix() wird das mit pushMatrix() gespeicherte Koordinatensystem wieder hergestellt. Die beiden Funktionen können nicht ohne die jeweils andere angewendet werden.

pushMatrix() und popMatrix() können bis zu 32 mal verschachtelt angewendet werden.

Beispiel: starte Applet

noStroke();

size(300,300);
for (int i=0;i<300;i+=5) {
pushMatrix();
translate(i,i);
rect(0,0,3,3);
}

for (int i=0;i<300;i+=5) {
popMatrix();
fill(128,200);
rect(20,20,3,3);
}

Dieses Beispiel zeichnet in der ersten Schleife ein Rechteck immer an der gleichen Position im Koordinatensystem. Das Koordinatensystem wird aber bei jedem Schleifendurchlauf weiter verschoben und somit auch das gezeichnete Rechteck. In der zweiten der beiden Schleifen wird dann die Verschiebung des Koordinatensystems Schritt für Schritt zurückgenommen und das Rechteck immer um 20 Punkte verschoben gezeichnet.

Die Funktion scale()

Wie mit translate() die Position, kann man nun mit scale() die Größe eines Objekts ändern. Wert steht für einen Multiplikator, schreibe also 1.2 für 120% oder 0.5 für 50%.

scale(wert);
scale(wertx,werty);

Aufgabe: Verändere das obige Beispiel in der Art, dass es die Rechtecke in der ersten Schliefe vergößert und in der zweiten wieder verkleinert.

Die Funktion rotate()

Ähnlich wie bei sclale() und tranlate() kann man mit rotate() das Koordinatensystem verändern. In diesem Fall kann man es drehen.Der Winkel muss in Rad angegeben werden.

rotate(winkel);

Aufgabe: Drehe das Rechteck im obigen Beispiel in jedem Schleifendurchlauf.

Beispiel: starte Applet

void setup() {
size(300,300);
background(0);
stroke(255,20);
frameRate(5);
}

void draw() {
translate(150,150);
strokeWeight(frameCount/4);
rotate(radians(frameCount*10));
line(0,0,100,0);
}