Lernpfad:Einführung in Processing/7 - Versionsgeschichte

D.hielscher: Kleine Korrektur der Lösung von Aufgabe 3

2024-10-21T16:09:42Z

Kleine Korrektur der Lösung von Aufgabe 3

← Nächstältere Version		Version vom 21. Oktober 2024, 18:09 Uhr
Zeile 75:		Zeile 75:
	void draw() {		void draw() {
	background(200);		background(200);
	rect(mouseX, mouseY, 2~~(200-~~mouseX), 2~~(200-~~mouseY));		rect(mouseX, mouseY, 200-(2mouseX), 200-(2mouseY));
	}		}
	</syntaxhighlight>		</syntaxhighlight>

Ngb: /* Auf Mausklicks reagieren */

2024-09-23T08:37:21Z

Auf Mausklicks reagieren

← Nächstältere Version		Version vom 23. September 2024, 10:37 Uhr
Zeile 200:		Zeile 200:

	{{Zusatzaufgabe:Start\|Sprinteraufgabe\|Icon=Processing_2021_logo.svg}}		{{Zusatzaufgabe:Start\|Sprinteraufgabe\|Icon=Processing_2021_logo.svg}}
	Nimm dir noch einmal eines deiner Bilder aus ~~dem~~ [{{Project URL\|https://~~helmholtz~~.~~padlet~~.~~org/ngb~~/%y_processing_bilder}} ~~letzten Schritt~~] vor. Erweitere es um interaktive Elemente. Hier sind einige Ideen:		Nimm dir noch einmal eines deiner Bilder aus der [{{Project URL\|https://link.ngb.schule/%y_processing_bilder}} Bildergallerie des Kurses] vor. Erweitere es um interaktive Elemente. Hier sind einige Ideen:

	* Lass die Sonne oder ein Fahrzeug dem Mauszeiger folgen.		* Lass die Sonne oder ein Fahrzeug dem Mauszeiger folgen.

Jneug am 16. Februar 2022 um 19:30 Uhr

2022-02-16T19:30:23Z

← Nächstältere Version		Version vom 16. Februar 2022, 21:30 Uhr
Zeile 1:		Zeile 1:
	{{NNavigation}}		{{NNameAnzeigen}}{{NNavigation}}

	{{Tldr:Start\|Was du in diesem Schritt lernst\|Icon=Icon Chalk board.png}}		{{Tldr:Start\|Was du in diesem Schritt lernst\|Icon=Icon Chalk board.png}}

Jneug am 28. Januar 2022 um 13:36 Uhr

2022-01-28T13:36:21Z

← Nächstältere Version		Version vom 28. Januar 2022, 15:36 Uhr
Zeile 31:		Zeile 31:
	# Programmiere ein "Fadenkreuz": Eine horizontale und eine senkrechte Linie, die sich genau beim Mauszeiger kreuzen.		# Programmiere ein "Fadenkreuz": Eine horizontale und eine senkrechte Linie, die sich genau beim Mauszeiger kreuzen.
	#: {{P5js\|https://preview.p5js.org/Ngb/present/SDgQJI13P\|→ Beispiel\|height=100}}		#: {{P5js\|https://preview.p5js.org/Ngb/present/SDgQJI13P\|→ Beispiel\|height=100}}
	#: '''Tipp:''' ~~konzentrier~~ dich zunächst auf eine der Linien und überleg dir ihre Start- und Endpunkte.		#: '''Tipp:''' konzentriere dich zunächst auf eine der Linien und überleg dir ihre Start- und Endpunkte.
	# Zeichne ein Rechteck in die Mitte des Fensters, bei dem immer eine Ecke der Maus folgt.		# Zeichne ein Rechteck in die Mitte des Fensters, bei dem immer eine Ecke der Maus folgt.
	#: {{P5js\|https://preview.p5js.org/Ngb/present/dun8k9RwP\|→ Beispiel\|height=100}}		#: {{P5js\|https://preview.p5js.org/Ngb/present/dun8k9RwP\|→ Beispiel\|height=100}}

Jneug am 28. Januar 2022 um 13:30 Uhr

2022-01-28T13:30:23Z

← Nächstältere Version		Version vom 28. Januar 2022, 15:30 Uhr
Zeile 8:		Zeile 8:
	== Interaktionen mit der Maus ==		== Interaktionen mit der Maus ==

	Im ''aktiven Modus'' sind nun Interaktionen ~~sehr leicht~~ umsetzbar.		Im ''aktiven Modus'' sind nun Interaktionen einfach umsetzbar.

	{{Aufgabe:Start\|Icon=Processing_2021_logo.svg}}		{{Aufgabe:Start\|Icon=Processing_2021_logo.svg}}

Jneug am 28. Januar 2022 um 11:55 Uhr

2022-01-28T11:55:49Z

← Nächstältere Version		Version vom 28. Januar 2022, 13:55 Uhr
Zeile 37:		Zeile 37:
	# Ein mittig positioniertes Quadrat soll seinen Grauwert ändern, je nachdem, wo sich die Maus befindet. Ist die Maus ganz links, ist das Quadrat schwarz. Ist sie recht, wird das Quadrat weiß.		# Ein mittig positioniertes Quadrat soll seinen Grauwert ändern, je nachdem, wo sich die Maus befindet. Ist die Maus ganz links, ist das Quadrat schwarz. Ist sie recht, wird das Quadrat weiß.
	#: {{P5js\|https://preview.p5js.org/Ngb/present/fZA9aJcTS\|→ Beispiel\|height=100}}		#: {{P5js\|https://preview.p5js.org/Ngb/present/fZA9aJcTS\|→ Beispiel\|height=100}}
	#: '''Tipp''': Der Grauwert muss in einem Bereich von 0 bis 255 liegen. In welchem Bereich liegt der Wert der ~~Maus-Position~~? Um die Position auf den Grauwert zu übertragen (man spricht hier auch von Mapping), benötigst Du den Dreisatz.		#: '''Tipp''': Der Grauwert muss in einem Bereich von 0 bis 255 liegen. In welchem Bereich liegt der Wert der Mausposition? Um die Position auf den Grauwert zu übertragen (man spricht hier auch von Mapping), benötigst du den Dreisatz.
	#: '''Achtung''': Damit Java korrekt mit Dezimalzahlen rechnet, musst du die Zahlen immer mit einer Nachkommastelle angeben (z.B. <code>400.0</code>), ansonsten arbeitet Java nur mit Ganzzahlen bei der Division.		#: '''Achtung''': Damit Java korrekt mit Dezimalzahlen rechnet, musst du die Zahlen immer mit einer Nachkommastelle angeben (z.B. <code>400.0</code>), ansonsten arbeitet Java nur mit Ganzzahlen bei der Division.
	#: ''Freiwillige Erweiterung'': Kannst du auch ein Quadrat programmieren, dass abhängig von der Mausposition die Farbe ändert?		#: ''Freiwillige Erweiterung'': Kannst du auch ein Quadrat programmieren, dass abhängig von der Mausposition die Farbe ändert?
Zeile 136:		Zeile 136:
	</syntaxhighlight>		</syntaxhighlight>

	Zusammen mit den Mauspositionen von oben, kannst du so schon richtig viel Interaktion in dein Programm einbauen:		Zusammen mit den Mauspositionen von oben kannst du so schon richtig viel Interaktion in dein Programm einbauen:
	<syntaxhighlight lang="java" line="1">		<syntaxhighlight lang="java" line="1">
	void setup() {		void setup() {
Zeile 196:		Zeile 196:

	# Schreibe eine "Uhr", die zu Beginn einmal "Start" ausgibt und dann jede Sekunde einmal "Tick". (Nutze den {{Processing Ref\|println()}} Befehl dafür.)		# Schreibe eine "Uhr", die zu Beginn einmal "Start" ausgibt und dann jede Sekunde einmal "Tick". (Nutze den {{Processing Ref\|println()}} Befehl dafür.)
	# Schreibe ein Programm, ~~dass~~ zweimal pro Sekunde die aktuelle X-Position der Maus ausgibt.		# Schreibe ein Programm, das zweimal pro Sekunde die aktuelle X-Position der Maus ausgibt.
	{{Zusatzaufgabe:End}}		{{Zusatzaufgabe:End}}

Jneug am 20. November 2021 um 06:18 Uhr

2021-11-20T06:18:29Z

← Nächstältere Version		Version vom 20. November 2021, 08:18 Uhr
Zeile 1:		Zeile 1:
	{{NNavigation}}		{{NNavigation}}

			{{Tldr:Start\|Was du in diesem Schritt lernst\|Icon=Icon Chalk board.png}}
			* Auf Mausbewegungen reagieren.
			* Auf Mausklicks reagieren.
			{{Tldr:End}}

	== Interaktionen mit der Maus ==		== Interaktionen mit der Maus ==

Jneug: /* Auf Mausklicks reagieren */

2021-11-19T15:47:51Z

Auf Mausklicks reagieren

← Nächstältere Version		Version vom 19. November 2021, 17:47 Uhr
Zeile 202:		Zeile 202:


	{{P5js\|https://preview.p5js.org/Ngb/present/2vjkVbM3B\|Hier ist ein Beispiel\|~~embed~~=~~true~~}}		{{P5js\|https://preview.p5js.org/Ngb/present/2vjkVbM3B\|Hier ist ein Beispiel\|width=500\|height=500}}
	{{Zusatzaufgabe:End}}		{{Zusatzaufgabe:End}}

Jneug: /* Auf Mausklicks reagieren */

2021-11-19T15:46:58Z

Auf Mausklicks reagieren

← Nächstältere Version		Version vom 19. November 2021, 17:46 Uhr
Zeile 202:		Zeile 202:


	{{P5js\|https://preview.p5js.org/Ngb/present/2vjkVbM3B\|Hier ist ein Beispiel\|embed=~~false~~}}		{{P5js\|https://preview.p5js.org/Ngb/present/2vjkVbM3B\|Hier ist ein Beispiel\|embed=true}}
	{{Zusatzaufgabe:End}}		{{Zusatzaufgabe:End}}

Jneug: /* Auf Mausklicks reagieren */

2021-11-15T16:07:26Z

Auf Mausklicks reagieren

← Nächstältere Version		Version vom 15. November 2021, 18:07 Uhr
Zeile 195:		Zeile 195:

	{{Zusatzaufgabe:Start\|Sprinteraufgabe\|Icon=Processing_2021_logo.svg}}		{{Zusatzaufgabe:Start\|Sprinteraufgabe\|Icon=Processing_2021_logo.svg}}
	Nimm ~~dirnoch~~ einmal eines deiner Bilder aus dem [{{Project URL\|https://helmholtz.padlet.org/ngb/%y_processing_bilder}} letzten Schritt] vor. Erweitere es um interaktive Elemente. Hier sind einige Ideen:		Nimm dir noch einmal eines deiner Bilder aus dem [{{Project URL\|https://helmholtz.padlet.org/ngb/%y_processing_bilder}} letzten Schritt] vor. Erweitere es um interaktive Elemente. Hier sind einige Ideen:

	* Lass die Sonne oder ein Fahrzeug dem Mauszeiger folgen.		* Lass die Sonne oder ein Fahrzeug dem Mauszeiger folgen.