Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

--- skript:grafikmitprocessing [2017/11/07 20:34]
d.golovko [Erste Schritte: Eine diagonale Linie]
+++ skript:grafikmitprocessing [2018/11/07 17:36] (aktuell)
luismeixner
@@ Zeile 5: / Zeile 5: @@
 ===== Installation =====
   * Ladet euch hier [[https://processing.org/download/]] die Software herunter. Nehmt am besten die 32bit-Version, egal was für ein Betriebsystem oder Computer ihr habt. (Die macht weniger Probleme mit externen Libraries)
-  * entpackt das .zip-Datei an einen Ort, wo ihr sie haben wollt
+  * entpackt die .zip-Datei an einen Ort, wo ihr sie haben wollt
   * Startet Processing mit einem Doppelclick auf die Entpackte ".exe" Datei.
-===== Erste Schritte: Ein wandernder Punkt =====
+===== Erste Schritte: Eine diagonale Linie =====
 Das, was in Arduino ''setup'' und ''loop'' sind, heisst in Processing ''setup'' und ''draw''
-So zeichnet z.B. das folgende Programm einen Kreis um den Koordinatenursprung:
+Dieses Programm zeichnet eine Linie, die diagonal einmal quer durch das Bild geht:
+<file java Liniezeichnen.pde>
+void setup(){
+  size(400, 400);
+  background(255);
+}
+void draw(){
+  for (int i = 0; i < 400; i++) {
+    point(i, i);
+  }
+}
+</file>
+Das gleiche kann auch ohne for-Schleifen mit einer globalen Variable gemacht werden. Wie geht das?
+===== Erste Schritte: Ein wandernder Punkt =====
+Das folgende Programm zeichnet einen Kreis um den Koordinatenursprung:
 <file java Kreiszeichnen.pde>
 float angle=0;
-float diameter=50;
+float radius=50;
 void setup(){
@@ Zeile 20: / Zeile 43: @@
 void draw(){
-  point(cos(angle)*diameter,sin(angle)*diameter);
+  point(cos(angle)*radius,sin(angle)*radius);
   angle+=0.01;
 }
 </file>
-===== Erste Schritte: Eine diagonale Linie =====
+Damit die Bewegung kontinuierlich angezeigt wird, muss in jedem "draw" Aufruf ein Punkt gezeichnet werden (also keine Schleife).
-Dieses Programm zeichnet eine Linie, die diagonal einmal quer durch das Bild geht:
-<file java Liniezeichnen.pde>
-void setup(){
+===== Eine Sinuskurve =====
-  size(400, 400);
+Jetzt wollen wir eine aus Punkten zusammengesetzte Sinuskurve zeichnen, die das Fenster genau ausfüllt.
+Auf der x-Achse sollen die Winkelwerte zwischen 0 und 2π angezeigt werden. Auf der y-Achse die Sinuswerte zwischen -1 und 1.
+Die x-Koordinate wird in die Zahl zwischen 0 und 2π umgerechnet:
+<code java>
+float angle = xCoordinate * TWO_PI / windowWidth;
+</code>
+<file java Sinuskurvezeichnen.pde>
+void setup() {
+  size(600, 400);
   background(255);
 }
-void draw(){
+void draw() {
-  for (int i = 0; i < 400; i++) {
+  for (int i = 0; i < 600; i++) {
-    point(i, i);
+    float angle = i * TWO_PI / 600;
+    float xValue = i;
+    float yValue = sin(angle) * 200 + 200;
+    // der Koordinatenursprung wird um die halbe Hoehe verschoben,
+    // damit der Wertebereich <0 auch sichtbar ist.
+    point(xValue, yValue);
   }
 }
 </file>

Projektlabor Robotik MINTgrün

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge