Hier werden die Unterschiede zwischen zwei Versionen gezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
skript:grafikmitprocessing [2017/11/07 20:33] d.golovko |
skript:grafikmitprocessing [2018/11/07 17:36] (aktuell) luismeixner |
||
---|---|---|---|
Zeile 5: | Zeile 5: | ||
===== Installation ===== | ===== 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) | * 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. | * 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'' | 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> | <file java Kreiszeichnen.pde> | ||
float angle=0; | float angle=0; | ||
- | float diameter=50; | + | float radius=50; |
void setup(){ | void setup(){ | ||
Zeile 20: | Zeile 43: | ||
void draw(){ | void draw(){ | ||
- | point(cos(angle)*diameter,sin(angle)*diameter); | + | point(cos(angle)*radius,sin(angle)*radius); |
angle+=0.01; | angle+=0.01; | ||
} | } | ||
</file> | </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 ===== |
+ | |||
+ | 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); | size(600, 400); | ||
background(255); | background(255); | ||
} | } | ||
- | void draw(){ | + | void draw() { |
for (int i = 0; i < 600; i++) { | for (int i = 0; i < 600; i++) { | ||
- | point(i*600/400.0, 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> | </file> | ||
- | |||
- | |||