Nachdem wir unser erstes Projekt nun aufgesetzt haben geht es nun endlich ans Zeichnen. Das Erste
was wir machen müssen, ist unsere Zeichenfläche definieren. Was wir hierfür benutzen ist das
"createCanvas" Command. Hiermit können wir unsere Zeichenfläche erstellen lassen. Die
"createCanvas" Funktion nimmt zwei Parameter. Das ist einmal die Breite und einmal die Höhe. Wenn
ich jetzt hier zum Beispiel statt 400 Pixel 600 eintrage und das abspeicher. Sehen wir sofort,
dass das Ganze entsprechend breiter geworden ist. Zwei zusätzliche Hinweise an dieser Stelle.
Viele von euch werden vielleicht mit Displays arbeiten die eine sehr hohe Auflösung haben,
wie Retina-Displays. p5js erkennt dies automatisch und erstellt deswegen größere Zeichenflächen,
damit das Ganze trotzdem immer noch schön hochaufgelöst auf euren Displays
aussieht. Wenn ihr das Ganze aber später dann zum Beispiel als PNG exportiert,
dann werdet ihr sehen, dass die Dateien größer sind als die Pixelangaben die ihr
bei der "createCanvas" Funktion gemacht habt. Wenn ihr aber eine spezifische größe definitiv
haben wollte und ihr nicht daran interessiert seid, dass es auf eurem hochauflösenden Display
schick aussieht, dann könnt ihr noch das Kommando "pixelDensity" nutzen.
Und dort eintragen wie hoch die Pixeldichte sein soll. Wenn ihr sozusagen genau das raus
haben wollt was ihr eingebt, gebt ihr einfach als Pixel-Density 1 an. Wenn ihr das dann speichert,
seht ihr keinen direkten Unterschied, aber wenn ihr ein hochauflösendes Display habt und
später Sachen zeichnet werdet ihr sehen, dass die Sachen ein ganz klein bisschen unscharf aussehen.
Wenn euch die Export-Größe nicht so stark interessiert, sondern euch mehr daran gelegen ist,
dass das Ganze schick auf eurem Displays aussieht, dann lasst ihr einfach die default Einstellung und
das Ganze sozusagen angepasst an die Auflösung auf eurem Display. Eine weitere Option: der
Standard-Modus in dem p5js arbeitet sind raster also Pixelgrafiken. Wenn ihr aber später als
Export keine Pixelgrafiken sondern Vektorgrafik haben wollt, dann müsst ihr das am Anfang auch
definieren. Hierfür müsst ihr lediglich SVG am Ende noch als dritten Parameter mitgeben. Ihr
werdet auch hier nicht direkt ein Unterschied im Output sehen, aber habt nun Möglichkeit auch
Vektordaten später zu exportieren. Zu den genauen Unterschieden zwischen dem SVG und
dem PNG rendering, werde ich dann in einem der späteren Videos noch ein bisschen mehr erzählen.