Lernpfad:Programmierung mit Javascript und p5js/Farbe in p5js (Regenbogen): Unterschied zwischen den Versionen

Aus Informatik-Box
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
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.
<p5js | right>https://editor.p5js.org/HerrThiessen/embed/H1DXipu-E</p5js>
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
 
<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>


In p5js gibt es zwei Möglichkeiten eine Farbe einzugeben:


<p5js>https://editor.p5js.org/HerrThiessen/embed/H1DXipu-E</p5js>
[[Datei:Regenbogen.gif]]
[[Datei:Regenbogen.gif]]

Version vom 3. Januar 2019, 21:16 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.

Klicken, um das Programm zu starten.

In p5js gibt es zwei Möglichkeiten die Zeichenfarbe festzulegen:

  1. fill(r,g,b) legt die Farbe der Füllung einer Form fest
  2. stroke(r,g,b) legt die Farbe der Kontur einer Form fest
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);
}


Regenbogen.gif