http://ngb.schule/hgwiki/index.php?title=Lernpfad:Programmierung_mit_Javascript_und_p5js/Text_ausgeben_in_p5js&feed=atom&action=historyLernpfad:Programmierung mit Javascript und p5js/Text ausgeben in p5js - Versionsgeschichte2024-03-28T22:53:36ZVersionsgeschichte dieser Seite in Informatik-BoxMediaWiki 1.38.2http://ngb.schule/hgwiki/index.php?title=Lernpfad:Programmierung_mit_Javascript_und_p5js/Text_ausgeben_in_p5js&diff=4776&oldid=prevJneug am 28. Mai 2019 um 08:31 Uhr2019-05-28T08:31:56Z<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 28. Mai 2019, 09:31 Uhr</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Zeile 1:</td>
<td colspan="2" class="diff-lineno">Zeile 1:</td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">{{Navigation}}</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Ausgabe von Text==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Ausgabe von Text==</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Es gibt zwei Funktionen um Text auszugeben: </div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Es gibt zwei Funktionen um Text auszugeben: </div></td></tr>
</table>Jneughttp://ngb.schule/hgwiki/index.php?title=Lernpfad:Programmierung_mit_Javascript_und_p5js/Text_ausgeben_in_p5js&diff=4190&oldid=prevThi am 30. Dezember 2018 um 21:25 Uhr2018-12-30T21:25:50Z<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 30. Dezember 2018, 22:25 Uhr</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Zeile 1:</td>
<td colspan="2" class="diff-lineno">Zeile 1:</td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">==Ausgabe von Text==</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Es gibt zwei Funktionen um Text auszugeben: </ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"># In der '''Konsole''' mit '''console.log(''' ''t'' ''')''' gibt einen Text ''t'' in der Konsole aus. </ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"># Auf dem '''Zeichenfeld''' mit '''text(''' ''t'',''x'',''y'' ''')''' gibt den Text ''t'' auf dem Zeichenfeld aus. Die Position des Textes wird mit ''x'' und ''y'' festgelegt.</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Die zwei Funktionen setup und draw==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Die zwei Funktionen setup und draw==</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Alle Projekte in p5js heißen ''sketches'' und beinhalten mindestens zwei Funktionen:</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Alle Projekte in p5js heißen ''sketches'' und beinhalten mindestens zwei Funktionen:</div></td></tr>
</table>Thihttp://ngb.schule/hgwiki/index.php?title=Lernpfad:Programmierung_mit_Javascript_und_p5js/Text_ausgeben_in_p5js&diff=4183&oldid=prevThi: Die Seite wurde neu angelegt: „==Die zwei Funktionen setup und draw== Alle Projekte in p5js heißen ''sketches'' und beinhalten mindestens zwei Funktionen: {{Schublade | * '''draw''': wird s…“2018-12-30T21:16:17Z<p>Die Seite wurde neu angelegt: „==Die zwei Funktionen setup und draw== Alle Projekte in p5js heißen ''sketches'' und beinhalten mindestens zwei Funktionen: {{Schublade | * '''draw''': wird s…“</p>
<p><b>Neue Seite</b></p><div>==Die zwei Funktionen setup und draw==<br />
Alle Projekte in p5js heißen ''sketches'' und beinhalten mindestens zwei Funktionen:<br />
{{Schublade |<br />
* '''draw''': wird standardmäßig 30 mal in der Sekunde aufgerufen. Die Zeichen-Funktionen werden in den geschweiften Klammern von draw aufgerufen<br />
** '''background(220);''' zeichnet zunächst den Hintergrund über die alte Zeichnung. (0 steht für schwarz, 255 für weiß, alle Werte dazwischen ergeben grau)<br />
** '''console.log(''' ''t'' ''')''' gibt einen Text ''t'' in der Konsole aus. <br />
** '''text(''' ''t'',''x'',''y'' ''')''' gibt den Text ''t'' auf dem Zeichenfeld aus. Die Position des Textes wird mit ''x'' und ''y'' festegelegt.<br />
* '''setup''': wird genau einmal am Anfang der Ausführung aufgerufen. Hier kann man ...<br />
** z.B. das Zeichenfeld verändern. '''createCanvas(200, 200);''' erstellt z.B. ein Zeichenfeld mit 200 x 200 Pixeln. <br />
** mit der Funktion '''frameRate(''' ''r'' ''')''' einstellen, wie oft(''r'' Mal) die draw-Funktion in der Sekunde aufgerufen wird. <br />
** mit der Funktion '''noLoop()''' einstellen, ob die draw-Funktion wiederholt aufgerufen wird oder nur einmal aufgerufen werden soll.<br />
| Farbe=#ed225d }}<br />
Das folgende Beispiel zeigt noch einmal die Verwendung der beiden Funktionen:<br />
<syntaxhighlight lang="javascript" line="1" ><br />
function setup() {<br />
createCanvas(100, 100);<br />
frameRate(10); //Die draw-Funktion wird nur einmal pro Sekunde aufgerufen.<br />
}<br />
<br />
function draw() {<br />
background(220);<br />
console.log(frameCount); //console.log gibt einen Text in der Konsole aus.<br />
text(frameCount, 20,40); //Gibt einen Text auf dem Zeichenfeld aus.<br />
}<br />
</syntaxhighlight><br />
Erläuterungen zum Programm: <br />
*In Zeile 3 wird die Wiederholungsgeschwindigkeit für das Zeichenen der draw-Funktion eingestellt. <br />
*In Zeile 8 wird mit dem Wert ''frameCount'' ausgegeben, wie oft die Funktion draw schon aufgerufen wurde.<br />
===Aufgaben===<br />
Ändere das obige Programm so um, <br />
# dass die draw-Funktion 1 mal pro Sekunde aufrufen. Beobachte was mit der Ausgabe passiert. <br />
# dass die draw-Funktion insgesamt nur einmal aufgerufen wird.<br />
====Für Fortgeschrittene====<br />
{{Collapse:Start}}<br />
Veränder das Programm so, dass ein Kreis bei Cursor-Position gezeichnet wird. <br /><br />
Welche Auswirkung haben Änderungen der folgenden Funktionen auf die Ausführung des Programms?<br />
# Ändere den Wert ''w'' in '''frameRate(''' ''w'' ''')'''. <br />
# Füge '''noLoop()''' in der setup-Funktion hinzu.<br />
# Entferne die Zeile '''background(220);'''<br />
{{Collapse:End}}</div>Thi