Lernpfad:Programmierung mit Javascript und p5js/Farbe in p5js (Regenbogen): Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Thi (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Jneug (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
(10 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
{{Navigation}} | |||
Jeder Pixel auf dem Display oder Zeichenfeld hat eine Farbe. Wenn man ganz nah an einen Monitor heran geht, kann man evtl. einzelne Pixel erkennen. Sie bestehen aus drei kleinen Pixeln, die die Farben rot, grün und blau haben. | Jeder Pixel auf dem Display oder Zeichenfeld hat eine Farbe. Wenn man ganz nah an einen Monitor heran geht, kann man evtl. einzelne Pixel erkennen. Sie bestehen aus drei kleinen Pixeln, die die Farben rot, grün und blau haben. | ||
Das folgende Feld zeigt an, welche Farben durch die verschiedenen Farben entstehen können. | |||
{{P5js|https://editor.p5js.org/HerrThiessen/embed/H1DXipu-E|height=291|width=257}} | |||
In p5js gibt es zwei Möglichkeiten die Zeichenfarbe festzulegen: | In p5js gibt es zwei Möglichkeiten die Zeichenfarbe festzulegen: | ||
# fill(r,g,b) legt die Farbe der Füllung einer Form fest | # fill(r,g,b) legt die Farbe der Füllung einer Form fest | ||
# stroke(r,g,b) legt die Farbe der Kontur einer Form fest | # stroke(r,g,b) legt die Farbe der Kontur einer Form fest | ||
Das folgende Programm zeichnet ein paar bunte Formen. | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
function setup() { | function setup() { | ||
Zeile 14: | Zeile 19: | ||
background(220); | background(220); | ||
fill(255, 0, 255); | fill(255, 0, 255); | ||
rect(10, 10, 100,100); | |||
fill(255,0,0); | fill(255,0,0); | ||
ellipse( | ellipse(250,50,20); | ||
fill(0,255,0); | |||
triangle(150,150,110,260,190,260); | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
{{Aufgabe:Start}} | |||
Erstelle ein Programm, das ein Haus mit einem Baum darstellt. | |||
{{Aufgabe:End}} | |||
{{Aufgabe:Start}} | |||
Der folgende Quelltext zeichnet zwei Kreise am unteren Rand des Zeichenfeldes. | |||
<syntaxhighlight lang="javascript"> | |||
function setup() { | |||
createCanvas(400, 250); | |||
} | |||
function draw() { | |||
background(220); | |||
fill(255, 0, 255); | |||
ellipse(width/2, height, 100); | |||
fill(255,0,0); | |||
ellipse(width/2, height,50); | |||
} | |||
</syntaxhighlight> | |||
Ergänze die zwei Kreise zu einem Regenbogen. Beachte dabei, dass die kleineren Kreise am Ende gezeichnet werden sollten. | |||
{{Aufgabe:End}} |
Aktuelle Version vom 19. November 2021, 23:21 Uhr
Jeder Pixel auf dem Display oder Zeichenfeld hat eine Farbe. Wenn man ganz nah an einen Monitor heran geht, kann man evtl. einzelne Pixel erkennen. Sie bestehen aus drei kleinen Pixeln, die die Farben rot, grün und blau haben. Das folgende Feld zeigt an, welche Farben durch die verschiedenen Farben entstehen können.
In p5js gibt es zwei Möglichkeiten die Zeichenfarbe festzulegen:
- fill(r,g,b) legt die Farbe der Füllung einer Form fest
- stroke(r,g,b) legt die Farbe der Kontur einer Form fest
Das folgende Programm zeichnet ein paar bunte Formen.
function setup() {
createCanvas(400, 250);
}
function draw() {
background(220);
fill(255, 0, 255);
rect(10, 10, 100,100);
fill(255,0,0);
ellipse(250,50,20);
fill(0,255,0);
triangle(150,150,110,260,190,260);
}
Arbeitsauftrag
Erstelle ein Programm, das ein Haus mit einem Baum darstellt.
Arbeitsauftrag
Der folgende Quelltext zeichnet zwei Kreise am unteren Rand des Zeichenfeldes.
function setup() {
createCanvas(400, 250);
}
function draw() {
background(220);
fill(255, 0, 255);
ellipse(width/2, height, 100);
fill(255,0,0);
ellipse(width/2, height,50);
}
Ergänze die zwei Kreise zu einem Regenbogen. Beachte dabei, dass die kleineren Kreise am Ende gezeichnet werden sollten.