GMU:Einführung ins Programmieren mit Processing/final/Sinus Wave - Revision history

Ktrin at 17:34, 17 December 2011

2011-12-17T17:34:54Z

← Older revision	Revision as of 17:34, 17 December 2011
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+(x50), 500+yvalues[x], 0, 100+(x50), 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(50x+50, 500+yvalues[x+z], z-50);
		box(15);
		popMatrix();
		line(50+(x50), 500+yvalues[z+x], z-50, 100+(x50), 500+yvalues[z+x+1], z-50);
		line(50+(x50), 500+yvalues[z+x], z-50, 50+(x50), 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(50x+50, 500+yvalues[x], z-50);
		translate(0, yvalues[z], 0);
		box(15);
		popMatrix();
		line(50+(x50), 500+yvalues[z]+yvalues[x], z-50, 100+(x*50), 500+yvalues[z]+yvalues[x+1],
		z*-50);
		line(50+(x50), 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(50x+50, 500+yvalues[x+z], z-50);
		//translate(0, yvalues[z], 0);
		box(15);
		popMatrix();
		line(50+(x50), 500+yvalues[z+x], z-50, 100+(x50), 500+yvalues[z+x+1], z-50);
		line(50+(x50), 500+yvalues[z+x], z-50, 50+(x50), 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(50x+50, 500+yvalues[x], z-50);
		translate(0, yvalues[z], 0);
		box(15);
		popMatrix();
		line(50+(x50), 500+yvalues[z]+yvalues[x], z-50, 100+(x50), 500+yvalues[z]+yvalues[x+1], z-50);
		line(50+(x50), 500+yvalues[z]+yvalues[x], z-50, 50+(x50), 500+yvalues[z+1]+yvalues[x], (z-50)-50);
		}
		}
		}
		</syntaxhighlight>


		<br clear=all />

Ktrin: Blanked the page

2011-12-17T17:33:29Z

Blanked the page

← Older revision		Revision as of 17:33, 17 December 2011
Line 1:		Line 1:
	~~= Sinus Wave =~~

	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+(x50), 500+yvalues[x], 0, 100+(x50), 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(50x+50, 500+yvalues[x+z], z-50);~~
	~~box(15);~~
	~~popMatrix();~~
	~~line(50+(x50), 500+yvalues[z+x], z-50, 100+(x50), 500+yvalues[z+x+1], z-50);~~
	~~line(50+(x50), 500+yvalues[z+x], z-50, 50+(x50), 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(50x+50, 500+yvalues[x], z-50);~~
	~~translate(0, yvalues[z], 0);~~
	~~box(15);~~
	~~popMatrix();~~
	~~line(50+(x50), 500+yvalues[z]+yvalues[x], z-50, 100+(x*50), 500+yvalues[z]+yvalues[x+1],~~
	~~z*-50);~~
	~~line(50+(x50), 500+yvalues[z]+yvalues[x], z-50, 50+(x*50), 500+yvalues[z+1]+yvalues[x],~~
	~~(z*-50)-50);~~
	}
	}
	~~</syntaxhighlight>~~

	~~== PROGRAM ==~~
	~~[[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(50x+50, 500+yvalues[x+z], z-50);~~
	~~//translate(0, yvalues[z], 0);~~
	~~box(15);~~
	~~popMatrix();~~
	~~line(50+(x50), 500+yvalues[z+x], z-50, 100+(x50), 500+yvalues[z+x+1], z-50);~~
	~~line(50+(x50), 500+yvalues[z+x], z-50, 50+(x50), 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(50x+50, 500+yvalues[x], z-50);~~
	~~translate(0, yvalues[z], 0);~~
	~~box(15);~~
	~~popMatrix();~~
	~~line(50+(x50), 500+yvalues[z]+yvalues[x], z-50, 100+(x50), 500+yvalues[z]+yvalues[x+1], z-50);~~
	~~line(50+(x50), 500+yvalues[z]+yvalues[x], z-50, 50+(x50), 500+yvalues[z+1]+yvalues[x], (z-50)-50);~~
	}
	}
	}
	~~</syntaxhighlight>~~


	~~<br clear=all />~~

Ktrin: Created page with "= Sinus Wave = Mein Ziel war es, ein dreidimensionales Ebenenraster zu generieren, das aus mehreren geometrischen, an den Rasterpunkten angeordneten Objekten besteht und durch d..."

2011-12-14T17:44:20Z

Created page with "= Sinus Wave = Mein Ziel war es, ein dreidimensionales Ebenenraster zu generieren, das aus mehreren geometrischen, an den Rasterpunkten angeordneten Objekten besteht und durch d..."

New page

= Sinus Wave =

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>

== PROGRAM ==
[[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 />