ngb/zeichenmaschine
1
0
Fork 0
mirror of https://github.com/jneug/zeichenmaschine.git synced 2026-04-14 06:33:34 +02:00
Code Issues Packages Projects Releases 1 Wiki Activity

Fixed spelling

Browse Source
This commit is contained in:
J. Neugebauer
2024-12-02 18:25:55 +01:00
parent df10d38184
commit 595bdd7556
1 changed files with 87 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
docs/schnellstart.md
View File

@@ -23,7 +23,7 @@ werden.
!!! note "main Methode" !!! note "main Methode"
Bei einigen Entwicklungsumgebungen muss noch eine `main` Methode erstellt Bei einigen Entwicklungsumgebungen muss noch eine `main` Methode erstellt
werden, um die Zeichenmaschine zu starten: werden, um die Zeichenmaschine zu starten:
```java ```java
@@ -40,11 +40,11 @@ an.
```java ```java
public class Shapes extends Zeichenmaschine { public class Shapes extends Zeichenmaschine {
public Shapes() { public Shapes() {
super(800, 800, "Shapes"); super(800, 800, "Shapes");
} }
} }
``` ```
@@ -57,7 +57,7 @@ erstellt und in einem Fenster mit dem Titel „Shapes“ angezeigt.
### Formen zeichnen ### Formen zeichnen
Eine Zeichenmaschine hat verschiedene Möglichkeiten, Inhalte in das Eine Zeichenmaschine hat verschiedene Möglichkeiten Inhalte in das
Zeichenfenster zu zeichnen. Um ein einfaches statisches Bild zu erzeugen, Zeichenfenster zu zeichnen. Um ein einfaches statisches Bild zu erzeugen,
überschreiben wir die {{ jdl("schule.ngb.zm.Zeichenmaschine", "draw()", überschreiben wir die {{ jdl("schule.ngb.zm.Zeichenmaschine", "draw()",
c=False) }} Methode. c=False) }} Methode.
@@ -66,20 +66,20 @@ c=False) }} Methode.
```java ```java
public class Shapes extends Zeichenmaschine { public class Shapes extends Zeichenmaschine {
public Shapes() { public Shapes() {
super(800, 800, "Shapes"); super(800, 800, "Shapes");
} }
@Override @Override
public void draw() { public void draw() {
background.setColor(BLUE); background.setColor(BLUE);
drawing.setFillColor(255, 223, 34); drawing.setFillColor(255, 223, 34);
drawing.noStroke(); drawing.noStroke();
drawing.circle(400, 400, 100); drawing.circle(400, 400, 100);
} }
} }
``` ```
@@ -101,19 +101,19 @@ die Zeichenfläche vor dem ersten Zeichnen vor.
```java ```java
public class Shapes extends Zeichenmaschine { public class Shapes extends Zeichenmaschine {
public Shapes() { public Shapes() {
super(800, 800, "Shapes"); super(800, 800, "Shapes");
} }
@Override @Override
public void setup() { public void setup() {
background.setColor(BLUE); background.setColor(BLUE);
drawing.setFillColor(255, 223, 34); drawing.setFillColor(255, 223, 34);
drawing.noStroke(); drawing.noStroke();
} }
@Override @Override
public void draw() { public void draw() {
for( int i = 0; i < 10; i++ ) { for( int i = 0; i < 10; i++ ) {
@@ -124,7 +124,7 @@ die Zeichenfläche vor dem ersten Zeichnen vor.
); );
} }
} }
} }
``` ```
@@ -137,16 +137,16 @@ Im Beispiel setzen wir nun die Grundeinstellungen in der `setup()` Methode. In
!!! tip "" !!! tip ""
Mit {{ jdm("Constants", "canvasWidth") }} und Mit {{ jdm("Constants", "canvasWidth") }} und
{{ jdm("Constants", "canvasHeight") }} kannst du in der Zeichenmaschine {{ jdm("Constants", "canvasHeight") }} kannst du in der Zeichenmaschine
auf die aktuelle Größe der Zeichenfläche zugreifen. auf die aktuelle Größe der Zeichenfläche zugreifen.
{{ jdm("Constants", "random(int,int)") }} erzeugt eine Zufallszahl {{ jdm("Constants", "random(int,int)") }} erzeugt eine Zufallszahl
innerhalb der angegebenen Grenzen. innerhalb der angegebenen Grenzen.
## Interaktionen mit der Maus: Whack-a-mole ## Interaktionen mit der Maus: Whack-a-mole
Mit der Zeichenmaschine lassen sich Interaktionen mit der Maus leicht umsetzen. Mit der Zeichenmaschine lassen sich Interaktionen mit der Maus leicht umsetzen.
Wor wollen das Beispielprogramm zu einem Wir wollen das Beispielprogramm zu einem
[Whac-A-Mole](https://de.wikipedia.org/wiki/Whac-A-Mole) Spiel erweitern. [Whac-A-Mole](https://de.wikipedia.org/wiki/Whac-A-Mole) Spiel erweitern.
Auf der Zeichenfläche wird nur noch ein gelber Kreis an einer zufälligen Stelle Auf der Zeichenfläche wird nur noch ein gelber Kreis an einer zufälligen Stelle
@@ -169,28 +169,28 @@ zufälligen Werte initialisiert werden. Diese benutzen wir, um die `draw
private int moleX; private int moleX;
private int moleY; private int moleY;
public Shapes() { public Shapes() {
super(800, 800, "Shapes"); super(800, 800, "Shapes");
} }
@Override @Override
public void setup() { public void setup() {
background.setColor(BLUE); background.setColor(BLUE);
drawing.setFillColor(255, 223, 34); drawing.setFillColor(255, 223, 34);
drawing.noStroke(); drawing.noStroke();
moleX = random(50, canvasWidth - 50); moleX = random(50, canvasWidth - 50);
moleY = random(50, canvasHeight - 50); moleY = random(50, canvasHeight - 50);
} }
@Override @Override
public void draw() { public void draw() {
drawing.clear(); drawing.clear();
drawing.circle(moleX, moleY, moleRadius); drawing.circle(moleX, moleY, moleRadius);
} }
} }
``` ```
@@ -216,10 +216,10 @@ Pythagoras leicht selber berechnen. Die Zeichenmaschine kann uns diese Arbeit
aber auch abnehmen und stellt eine Methode dafür bereit aber auch abnehmen und stellt eine Methode dafür bereit
({{ jdm("Constants", "distance(double,double,double,double)") }}). ({{ jdm("Constants", "distance(double,double,double,double)") }}).
Um auf einen Mausklick zu reagieren, ergänzen wir die Um auf einen Mausklick zu reagieren, ergänzen wir die
{{ jdm("Zeichenmaschine", "mouseClicked()") }} Methode: {{ jdm("Zeichenmaschine", "mouseClicked()") }} Methode:
``` ```java
@Override @Override
public void mouseClicked() { public void mouseClicked() {
if( distance(moleX, moleY, mouseX, mouseY) < moleRadius ) { if( distance(moleX, moleY, mouseX, mouseY) < moleRadius ) {
@@ -240,22 +240,22 @@ public void mouseClicked() {
private int moleX; private int moleX;
private int moleY; private int moleY;
public Shapes() { public Shapes() {
super(800, 800, "Shapes"); super(800, 800, "Shapes");
} }
@Override @Override
public void setup() { public void setup() {
background.setColor(BLUE); background.setColor(BLUE);
drawing.setFillColor(255, 223, 34); drawing.setFillColor(255, 223, 34);
drawing.noStroke(); drawing.noStroke();
moleX = random(50, canvasWidth - 50); moleX = random(50, canvasWidth - 50);
moleY = random(50, canvasHeight - 50); moleY = random(50, canvasHeight - 50);
} }
@Override @Override
public void draw() { public void draw() {
drawing.clear(); drawing.clear();
@@ -270,13 +270,13 @@ public void mouseClicked() {
redraw(); redraw();
} }
} }
} }
``` ```
!!! warning "" !!! warning ""
Der Aufruf von {{ jdm("Zeichenmaschine", "redraw()") }} zeichnet Der Aufruf von {{ jdm("Zeichenmaschine", "redraw()") }} zeichnet
die Zeichenfläche neu, indem die `draw()` Methode erneut aufgerufen wird. die Zeichenfläche neu, indem die `draw()` Methode erneut aufgerufen wird.
Du solltest `draw()` niemals direkt aufrufen. Du solltest `draw()` niemals direkt aufrufen.
@@ -290,8 +290,8 @@ angeklickt wird.
## Ein paar Details zur Zeichenmaschine ## Ein paar Details zur Zeichenmaschine
Die _Zeichenmaschine_ wurde stark von der kreativen Programmierumgebung Die _Zeichenmaschine_ wurde stark von der kreativen Programmierumgebung
[Processing](https://processing.org) inspiriert. Wenn Du Processing schon [Processing](https://processing.org) inspiriert. Wenn du Processing schon
kennst, dann werden Dir einige der Konzepte der _Zeichenmaschine_ schon bekannt kennst, dann werden dir einige der Konzepte der _Zeichenmaschine_ schon bekannt
vorkommen. vorkommen.
### Farben ### Farben
@@ -300,7 +300,7 @@ Farben können auf verschiedene Weisen angegeben werden. Unser Beispiel nutzt
bisher zwei Arten: bisher zwei Arten:
1. Die einfachste Möglichkeit sind die _Farbkonstanten_ 1. Die einfachste Möglichkeit sind die _Farbkonstanten_
wie {{ jdm('Constants', 'BLUE') }} oder {{ jdm('Constants', 'RED') }}. Im wie {{ jdm('Constants', 'BLUE') }} oder {{ jdm('Constants', 'RED') }}. Im
Beispiel setzen wir den Hintergrund auf die Farbe `BLUE`. Beispiel setzen wir den Hintergrund auf die Farbe `BLUE`.
2. Farben werden häufig im RGB-Farbraum definiert. Dazu wird jeweils der Rot-, 2. Farben werden häufig im RGB-Farbraum definiert. Dazu wird jeweils der Rot-,
Grün- und Blauanteil der Farbe als Wert zwischen 0 und 255 angegeben. Im Grün- und Blauanteil der Farbe als Wert zwischen 0 und 255 angegeben. Im
@@ -341,15 +341,15 @@ auf.
</figure> </figure>
Erstellst Du eine _Zeichenmaschine_ (beziehungsweise ein Objekt einer Erstellst Du eine _Zeichenmaschine_ (beziehungsweise ein Objekt einer
Unterklasse), dann wird zuerst die {{ jdm('Zeichenmaschine', 'setup()') }} Unterklasse), dann wird zuerst die {{ jdm('Zeichenmaschine', 'setup()') }}
Methode ausgeführt. Danach folgt einmalig die Methode ausgeführt. Danach folgt einmalig die
{{ jdm('Zeichenmaschine', 'draw()') }} Methode und dann endet das Hauptprogramm. {{ jdm('Zeichenmaschine', 'draw()') }} Methode und dann endet das Hauptprogramm.
Die Eingaben der Maus werden in einem parallelen Ablauf (einem _Thread_) Die Eingaben der Maus werden in einem parallelen Ablauf (einem _Thread_)
abgefangen und daraufhin die {{ jdm('Zeichenmaschine', 'mouseClicked()') }} abgefangen und daraufhin die {{ jdm('Zeichenmaschine', 'mouseClicked()') }}
Methode aufgerufen. In unserem Programm prüfen wir, ob mit der Maus Methode aufgerufen. In unserem Programm prüfen wir, ob mit der Maus
innerhalb des Kreises geklickt wurde und rufen dann innerhalb des Kreises geklickt wurde und rufen dann
{{ jdm('Zeichenmaschine', 'redraw()') }} auf, woraufhin ein weiteres Mal {{ jdm('Zeichenmaschine', 'redraw()') }} auf, woraufhin ein weiteres Mal
`draw()` ausgeführt wird. `draw()` ausgeführt wird.
In _Processing_ wird dies der "statische" Modus genannt, weil das Programm nur In _Processing_ wird dies der "statische" Modus genannt, weil das Programm nur
@@ -392,14 +392,14 @@ Sekunde aufgerufen wird. Normalerweise passiert dies genau 60-mal pro Sekunde.
### Lebenszeit eines Kreises ### Lebenszeit eines Kreises
Jeder Kreis soll drei Sekunden zu sehen sein. Daher fügen wir eine neue Jeder Kreis soll drei Sekunden zu sehen sein. Daher fügen wir eine neue
Objektvariable namens `moleTime` ein, die zunächst auf drei steht. Da wir auch Objektvariable namens `moleTime` ein, die zunächst auf Drei steht. Da wir auch
Bruchteile von Skeunden abziehen wollen, wählen wir als Datentyp `double`: Bruchteile von Sekunden abziehen wollen, wählen wir als Datentyp `double`:
```Java ```Java
private double moleTime=3.0; private double moleTime=3.0;
``` ```
Der Parameter `delta`, der `update()` Methode ist der Zeitraum in Sekunden, seit Der Parameter `delta` der `update()` Methode ist der Zeitraum in Sekunden seit
dem letzten Frame. Subtrahieren wir diesen Wert bei jedem Frame von `moleTime`, dem letzten Frame. Subtrahieren wir diesen Wert bei jedem Frame von `moleTime`,
wird der Wert immer kleiner. Dann müssen wir nur noch prüfen, ob er kleiner Null wird der Wert immer kleiner. Dann müssen wir nur noch prüfen, ob er kleiner Null
ist und in dem Fall den Kreis auf eine neue Position springen lassen. ist und in dem Fall den Kreis auf eine neue Position springen lassen.
@@ -415,52 +415,52 @@ drawing.circle(moleX,moleY,moleRadius*(moleTime/3.0));
```Java ```Java
import schule.ngb.zm.Zeichenmaschine; import schule.ngb.zm.Zeichenmaschine;
public class Shapes extends Zeichenmaschine { public class Shapes extends Zeichenmaschine {
private int moleRadius = 20; private int moleRadius = 20;
private int moleX; private int moleX;
private int moleY; private int moleY;
private double moleTime; private double moleTime;
public Shapes() { public Shapes() {
super(800, 800, "Shapes"); super(800, 800, "Shapes");
} }
@Override @Override
public void setup() { public void setup() {
background.setColor(BLUE); background.setColor(BLUE);
drawing.setFillColor(255, 223, 34); drawing.setFillColor(255, 223, 34);
drawing.noStroke(); drawing.noStroke();
randomizeMole(); randomizeMole();
} }
private void randomizeMole() { private void randomizeMole() {
moleX = random(moleRadius*2, canvasWidth - moleRadius*2); moleX = random(moleRadius*2, canvasWidth - moleRadius*2);
moleY = random(moleRadius*2, canvasHeight - moleRadius*2); moleY = random(moleRadius*2, canvasHeight - moleRadius*2);
moleTime = 3.0; moleTime = 3.0;
} }
@Override @Override
public void update( double delta ) { public void update( double delta ) {
moleTime -= delta; moleTime -= delta;
if( moleTime <= 0 ) { if( moleTime <= 0 ) {
randomizeMole(); randomizeMole();
} }
} }
@Override @Override
public void draw() { public void draw() {
drawing.clear(); drawing.clear();
drawing.circle(moleX, moleY, moleRadius * (moleTime / 3.0)); drawing.circle(moleX, moleY, moleRadius * (moleTime / 3.0));
} }
@Override @Override
public void mouseClicked() { public void mouseClicked() {
if( distance(moleX, moleY, mouseX, mouseY) < moleRadius ) { if( distance(moleX, moleY, mouseX, mouseY) < moleRadius ) {
@@ -468,11 +468,11 @@ drawing.circle(moleX,moleY,moleRadius*(moleTime/3.0));
redraw(); redraw();
} }
} }
public static void main( String[] args ) { public static void main( String[] args ) {
new Shapes(); new Shapes();
} }
} }
``` ```
@@ -483,21 +483,21 @@ drawing.circle(moleX,moleY,moleRadius*(moleTime/3.0));
!!! tip "" !!! tip ""
Der Maulwurf muss mittlerweile an drei verschiedenen Stellen im Programm Der Maulwurf muss mittlerweile an drei verschiedenen Stellen im Programm
auf eine zufällige Position gesetzt werden (am Anfang, wenn er angeklickt auf eine zufällige Position gesetzt werden (am Anfang, wenn er angeklickt
wurde und wenn die drei Sekunden abgelaufen sind). Daher wurde das Versetzen wurde und wenn die drei Sekunden abgelaufen sind). Daher wurde das Versetzen
in eine eigene Methode `randomizeMole()` ausgelagert. in eine eigene Methode `randomizeMole()` ausgelagert.
### Punktezähler ### Punktezähler
Zum Schluss wollen wir noch bei jedem Treffer mit der Maus die Punkte Zählen und Zum Schluss wollen wir noch bei jedem Treffer mit der Maus die Punkte zählen und
als Text auf die Zeichenfläche schreiben. als Text auf die Zeichenfläche schreiben.
Dazu ergänzen wir eine weitere Objektvariable `score`, die in `mouseClicked()` Dazu ergänzen wir eine weitere Objektvariable `score`, die in `mouseClicked()`
erhöht wird, falls der Kreis getroffen wurde. erhöht wird, falls der Kreis getroffen wurde.
Um den Punktestand anzuzeigen ergänzen wir in `draw()` einen Aufruf von Um den Punktestand anzuzeigen ergänzen wir in `draw()` einen Aufruf von
{{ jdl('layers.DrawingLayer', 'text(java.lang.String,double,double,schule.ngb.zm.Options.Direction)') }} {{ jdl('layers.DrawingLayer', 'text(java.lang.String,double,double,schule.ngb.zm.Options.Direction)') }}
mit dem Inhalt von `score` und den Koordinaten, an denen der Text gezeigt mit dem Inhalt von `score` und den Koordinaten, an denen der Text gezeigt
werden soll. werden soll.
Die Zeichenebene zeichnet im Moment alle Formen und Text ausgehend vom Zentrum Die Zeichenebene zeichnet im Moment alle Formen und Text ausgehend vom Zentrum
der Form. Damit der Text 10 Pixel vom Rand entfernt links oben angezeigt wird, der Form. Damit der Text 10 Pixel vom Rand entfernt links oben angezeigt wird,
@@ -518,59 +518,59 @@ drawing.setFillColor(BLACK);
```Java ```Java
import schule.ngb.zm.Zeichenmaschine; import schule.ngb.zm.Zeichenmaschine;
public class Shapes extends Zeichenmaschine { public class Shapes extends Zeichenmaschine {
private int moleRadius = 20; private int moleRadius = 20;
private int moleX; private int moleX;
private int moleY; private int moleY;
private double moleTime; private double moleTime;
private int score = 0; private int score = 0;
public Shapes() { public Shapes() {
super(800, 800, "Shapes"); super(800, 800, "Shapes");
} }
@Override @Override
public void setup() { public void setup() {
background.setColor(BLUE); background.setColor(BLUE);
drawing.noStroke(); drawing.noStroke();
drawing.setFontSize(24); drawing.setFontSize(24);
randomizeMole(); randomizeMole();
} }
private void randomizeMole() { private void randomizeMole() {
moleX = random(moleRadius*2, canvasWidth - moleRadius*2); moleX = random(moleRadius*2, canvasWidth - moleRadius*2);
moleY = random(moleRadius*2, canvasHeight - moleRadius*2); moleY = random(moleRadius*2, canvasHeight - moleRadius*2);
moleTime = 3.0; moleTime = 3.0;
} }
@Override @Override
public void update( double delta ) { public void update( double delta ) {
moleTime -= delta; moleTime -= delta;
if( moleTime <= 0 ) { if( moleTime <= 0 ) {
randomizeMole(); randomizeMole();
} }
} }
@Override @Override
public void draw() { public void draw() {
drawing.clear(); drawing.clear();
drawing.setFillColor(255, 223, 34); drawing.setFillColor(255, 223, 34);
drawing.circle(moleX, moleY, moleRadius * (moleTime / 3.0)); drawing.circle(moleX, moleY, moleRadius * (moleTime / 3.0));
drawing.setFillColor(BLACK); drawing.setFillColor(BLACK);
drawing.text("Punkte: " + score, 10, 10, NORTHWEST); drawing.text("Punkte: " + score, 10, 10, NORTHWEST);
} }
@Override @Override
public void mouseClicked() { public void mouseClicked() {
if( distance(moleX, moleY, mouseX, mouseY) < moleRadius ) { if( distance(moleX, moleY, mouseX, mouseY) < moleRadius ) {
@@ -579,28 +579,28 @@ drawing.setFillColor(BLACK);
redraw(); redraw();
} }
} }
public static void main( String[] args ) { public static void main( String[] args ) {
new Shapes(); new Shapes();
} }
} }
``` ```
## Wie es weitergehen kann ## Wie es weitergehen kann
In diesem Schnellstart-Tutorial hast Du die Grundlagen der _Zeichenmaschine_ In diesem Schnellstart-Tutorial hast du die Grundlagen der _Zeichenmaschine_
gelernt. Um weiterzumachen, kannst Du versuchen, das Whack-a-mole Spiel um diese gelernt. Um weiterzumachen, kannst du versuchen, das Whack-a-mole Spiel um diese
Funktionen zu erweitern: Funktionen zu erweitern:
- Mehrere "Maulwürfe" gleichzeitig. - Mehrere "Maulwürfe" gleichzeitig.
- Unterschiedliche Zeiten pro Maulwurf. - Unterschiedliche Zeiten pro Maulwurf.
Wenn Du mehr über die Möglichkeiten lernen möchtest, die Dir die Wenn du mehr über die Möglichkeiten lernen möchtest, die dir die
_Zeichenmaschine_ bereitstellt, kannst Du Dir die weiteren Tutorials in dieser _Zeichenmaschine_ bereitstellt, kannst du dir die weiteren Tutorials in dieser
Dokumentation ansehen. Ein guter Startpunkt ist das Dokumentation ansehen. Ein guter Startpunkt ist das
[Aquarium](tutorials/aquarium/aquarium1.md). [Aquarium](tutorials/aquarium/aquarium1.md).
Viele verschiedene Beispiele, ohne detailliertes Tutorial, findest Du in der Viele verschiedene Beispiele, ohne detailliertes Tutorial, findest du in der
Kategorie Beispiele und auf GitHub im Repository Kategorie Beispiele und auf GitHub im Repository
[jneug/zeichenmaschine-examples](https://github.com/jneug/zeichenmaschine-examples). [jneug/zeichenmaschine-examples](https://github.com/jneug/zeichenmaschine-examples).