GMU:Einführung ins Programmieren mit Processing/final/Sinus Wave: Difference between revisions

← Older edit

GMU:Einführung ins Programmieren mit Processing/final/Sinus Wave (view source)

Revision as of 17:34, 17 December 2011

4,864 bytes added , 17 December 2011

no edit summary

Ktrin

124

edits

@@ Line 1: / Line 1: @@
+= Sinus Wave =
+== Idee ==
+Mein Ziel war es, ein dreidimensionales Ebenenraster zu generieren, das aus mehreren geometrischen, an den Rasterpunkten angeordneten Objekten besteht und durch deren sinusartige Auf und Abwärtsbewegung ein natürliche Wellenbewegung grafisch beschreibt.
+== Umsetzung ==
+Für dessen Umsetzung war es zunächst erforderlich, mir die Funktionsweise einer beweglichen Sinuskurve auf zweidimensionaler Ebene zu vergegenwärtigen: Die Berechnung in Programmiersprache erfolgt im Grunde durch eine einfachen Sinuskalkulation eines fortlaufenden Wertes(Theta), multipliziert mit dem maximalen Höhenwert der Kurve. Durch den fortlaufenden Wert des Winkels ergeben sich bei jeder Berechnungsabfolge einer Schleife periodische Werte, die der Reihe nach in einem 'Array' gelistet werden.
+<syntaxhighlight lang="cpp">
+yvalues = new float[10]; //Array hat zunächst noch eine Länge in der Größe von 10 Schleifendurchläufen
+theta += 0.08;
+   float x = theta;
+   for (int i = 0; i < 10; i++) {
+        yvalues[i] = sin(x)*30;
+        x+=dx;
+}
+</syntaxhighlight>
+Zur grafischen Darstellung erfolgt der Aufruf einer separaten Funktion, in dieser das Geometrische Objekt (Kubus), mittels einer Schleife, jeweils neu erstellt und in horizontaler Achsenrichtung, um einen definierten Abstandswert(50 Pixel) verschoben werden soll. Für jedes einzelne Objekt
+wird bei erneutem Schleifendurchlauf ein neuer Y-Wert aus dem Array geschöpft.
+<syntaxhighlight lang="cpp">
+for (int x = 0; x < 10; x++) {
+  pushMatrix();
+  translate(50*x+50, 500+yvalues[x], 0);
+  box(15);
+  popMatrix();
+  line(50+(x*50), 500+yvalues[x], 0, 100+(x*50), 500+yvalues[x+1], 0); //Verbindungslinien
+}
+</syntaxhighlight>
+Für eine dreidimensionale Darstellung der Objekte in Reihen (in Richtung x-Achse) und Spalten (in Richtung z-Achse), ist eine Doppelschleife erforderlich:
+<syntaxhighlight lang="cpp">
+for (int x = 0; x < 10; x++) {
+  for (int z = 0; z < 10; z++) {
+    pushMatrix();
+    translate(50*x+50, 500+yvalues[x+z], z*-50);
+    box(15);
+    popMatrix();
+    line(50+(x*50), 500+yvalues[z+x], z*-50, 100+(x*50), 500+yvalues[z+x+1], z*-50);
+    line(50+(x*50), 500+yvalues[z+x], z*-50, 50+(x*50), 500+yvalues[z+x+1], (z*-50)-50);
+  }
+}
+</syntaxhighlight>
+Hierbei wird, um eine diagonale Wellenbewegung zu erzielen, dem Listenindex des Arrays der Zählwert der Variable 'z' hinzu addiert. Das Array muss jedoch bei der Deklaration den doppelten Längenwert aufweisen, da sonst seine Liste überfüllt wäre. Das gleiche gilt für die Anzahl der Schleifendurchläufe bei der Sinusberechnung. Andere Formen der Darstellung mittels 'translate' sind jedoch möglich:
+<syntaxhighlight lang="cpp">
+for (int x = 0; x < 10; x++) {
+  for (int z = 0; z < 10; z++) {
+    pushMatrix();
+    translate(50*x+50, 500+yvalues[x], z*-50);
+    translate(0, yvalues[z], 0);
+    box(15);
+    popMatrix();
+    line(50+(x*50), 500+yvalues[z]+yvalues[x], z*-50, 100+(x*50), 500+yvalues[z]+yvalues[x+1],
+    z*-50);
+    line(50+(x*50), 500+yvalues[z]+yvalues[x], z*-50, 50+(x*50), 500+yvalues[z+1]+yvalues[x],
+    (z*-50)-50);
+  }
+}
+</syntaxhighlight>
+== PROGRAMM ==
+[[Image:Processing_einfuehrung_final_florian.jpg]]
+<syntaxhighlight lang="cpp">
+float theta;  // Start angle at 0
+float dx;  // Value for incrementing X, a function of period and xspacing
+float[] yvalues;  // array in dem die höhenwerte der jeweiligen boxen gespeichert werden
+void setup() {
+  smooth();
+  size(600, 600, P3D);
+  frameRate(30);
+  dx = (TWO_PI / 500) * 60; //anzahl bzw. abstand der wellenberge
+  yvalues = new float[20];
+  translate(width/2, height/2);
+}
+void draw() {
+  rotateX(-0.5);
+}
+void keyPressed() {
+  background(55);
+  theta += 0.08; //geschwindigkeit
+  float x = theta;
+  for (int i = 0; i < 20; i++) {
+    yvalues[i] = sin(x)*30; //höhe des wellenbergs
+    x+=dx;
+  }
+  if (key == '1') {
+    renderWave1();
+  }
+  if (key == '2') {
+    renderWave2();
+  }
+}
+void  renderWave1() {
+  for (int x = 0; x < 10; x++) {
+    for (int z = 0; z < 10; z++) {
+      pushMatrix();
+      translate(50*x+50, 500+yvalues[x+z], z*-50);
+      //translate(0, yvalues[z], 0);
+      box(15);
+      popMatrix();
+      line(50+(x*50), 500+yvalues[z+x], z*-50, 100+(x*50), 500+yvalues[z+x+1], z*-50);
+      line(50+(x*50), 500+yvalues[z+x], z*-50, 50+(x*50), 500+yvalues[z+x+1], (z*-50)-50);
+    }
+  }
+}
+void  renderWave2() {
+  for (int x = 0; x < 10; x++) {
+    for (int z = 0; z < 10; z++) {
+      pushMatrix();
+      translate(50*x+50, 500+yvalues[x], z*-50);
+      translate(0, yvalues[z], 0);
+      box(15);
+      popMatrix();
+      line(50+(x*50), 500+yvalues[z]+yvalues[x], z*-50, 100+(x*50), 500+yvalues[z]+yvalues[x+1], z*-50);
+      line(50+(x*50), 500+yvalues[z]+yvalues[x], z*-50, 50+(x*50), 500+yvalues[z+1]+yvalues[x], (z*-50)-50);
+    }
+  }
+}
+</syntaxhighlight>
+<br clear=all />