http://ngb.schule/hgwiki/index.php?title=Lernpfad:Programmierung_mit_Javascript_und_p5js/Text_ausgeben_in_p5js&feed=atom&action=history Lernpfad:Programmierung mit Javascript und p5js/Text ausgeben in p5js - Versionsgeschichte 2024-03-28T22:53:36Z Versionsgeschichte dieser Seite in Informatik-Box MediaWiki 1.38.2 http://ngb.schule/hgwiki/index.php?title=Lernpfad:Programmierung_mit_Javascript_und_p5js/Text_ausgeben_in_p5js&diff=4776&oldid=prev Jneug am 28. Mai 2019 um 08:31 Uhr 2019-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> Jneug http://ngb.schule/hgwiki/index.php?title=Lernpfad:Programmierung_mit_Javascript_und_p5js/Text_ausgeben_in_p5js&diff=4190&oldid=prev Thi am 30. Dezember 2018 um 21:25 Uhr 2018-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 &#039;&#039;sketches&#039;&#039; 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 &#039;&#039;sketches&#039;&#039; und beinhalten mindestens zwei Funktionen:</div></td></tr> </table> Thi http://ngb.schule/hgwiki/index.php?title=Lernpfad:Programmierung_mit_Javascript_und_p5js/Text_ausgeben_in_p5js&diff=4183&oldid=prev Thi: 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 &#039;&#039;sketches&#039;&#039; und beinhalten mindestens zwei Funktionen: {{Schublade | * &#039;&#039;&#039;draw&#039;&#039;&#039;: wird s…“</p> <p><b>Neue Seite</b></p><div>==Die zwei Funktionen setup und draw==<br /> Alle Projekte in p5js heißen &#039;&#039;sketches&#039;&#039; und beinhalten mindestens zwei Funktionen:<br /> {{Schublade |<br /> * &#039;&#039;&#039;draw&#039;&#039;&#039;: wird standardmäßig 30 mal in der Sekunde aufgerufen. Die Zeichen-Funktionen werden in den geschweiften Klammern von draw aufgerufen<br /> ** &#039;&#039;&#039;background(220);&#039;&#039;&#039; zeichnet zunächst den Hintergrund über die alte Zeichnung. (0 steht für schwarz, 255 für weiß, alle Werte dazwischen ergeben grau)<br /> ** &#039;&#039;&#039;console.log(&#039;&#039;&#039; &#039;&#039;t&#039;&#039; &#039;&#039;&#039;)&#039;&#039;&#039; gibt einen Text &#039;&#039;t&#039;&#039; in der Konsole aus. <br /> ** &#039;&#039;&#039;text(&#039;&#039;&#039; &#039;&#039;t&#039;&#039;,&#039;&#039;x&#039;&#039;,&#039;&#039;y&#039;&#039; &#039;&#039;&#039;)&#039;&#039;&#039; gibt den Text &#039;&#039;t&#039;&#039; auf dem Zeichenfeld aus. Die Position des Textes wird mit &#039;&#039;x&#039;&#039; und &#039;&#039;y&#039;&#039; festegelegt.<br /> * &#039;&#039;&#039;setup&#039;&#039;&#039;: wird genau einmal am Anfang der Ausführung aufgerufen. Hier kann man ...<br /> ** z.B. das Zeichenfeld verändern. &#039;&#039;&#039;createCanvas(200, 200);&#039;&#039;&#039; erstellt z.B. ein Zeichenfeld mit 200 x 200 Pixeln. <br /> ** mit der Funktion &#039;&#039;&#039;frameRate(&#039;&#039;&#039; &#039;&#039;r&#039;&#039; &#039;&#039;&#039;)&#039;&#039;&#039; einstellen, wie oft(&#039;&#039;r&#039;&#039; Mal) die draw-Funktion in der Sekunde aufgerufen wird. <br /> ** mit der Funktion &#039;&#039;&#039;noLoop()&#039;&#039;&#039; 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 /> &lt;syntaxhighlight lang=&quot;javascript&quot; line=&quot;1&quot; &gt;<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 /> &lt;/syntaxhighlight&gt;<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 &#039;&#039;frameCount&#039;&#039; 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. &lt;br /&gt;<br /> Welche Auswirkung haben Änderungen der folgenden Funktionen auf die Ausführung des Programms?<br /> # Ändere den Wert &#039;&#039;w&#039;&#039; in &#039;&#039;&#039;frameRate(&#039;&#039;&#039; &#039;&#039;w&#039;&#039; &#039;&#039;&#039;)&#039;&#039;&#039;. <br /> # Füge &#039;&#039;&#039;noLoop()&#039;&#039;&#039; in der setup-Funktion hinzu.<br /> # Entferne die Zeile &#039;&#039;&#039;background(220);&#039;&#039;&#039;<br /> {{Collapse:End}}</div> Thi