{"id":9465,"date":"2025-04-30T08:00:50","date_gmt":"2025-04-30T08:00:50","guid":{"rendered":"https:\/\/sites.hslu.ch\/werkstatt\/?p=9465"},"modified":"2025-04-30T08:02:46","modified_gmt":"2025-04-30T08:02:46","slug":"p5-js-sampler","status":"publish","type":"post","link":"https:\/\/sites.hslu.ch\/werkstatt\/p5-js-sampler\/","title":{"rendered":"P5.js Sampler"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_section el_class=&#187;dkw-section-lead&#187;][vc_row][vc_column width=&#187;2\/3&#8243; offset=&#187;vc_col-sm-offset-2&#8243;][vc_column_text css=&#187;&#187;]P5.js ist eine JavaScript-Library, die speziell f\u00fcr kreatives Programmieren entwickelt wurde. Auf Glitch.com kannst du solche Arbeiten online hosten und bearbeiten. In Kombination erlauben diese Plattformen dir, mit einfachen Mitteln ein Programm zu entwickeln, auf welches du im Anschluss von \u00fcberall her zugreifen kannst.<\/p>\n<p>Hier lernst du am Beispiel eines einfachen DIY-Sampler, wie du diese beiden Technologien verbinden und nutzen kannst.[\/vc_column_text][\/vc_column][\/vc_row][\/vc_section][vc_section el_class=&#187;dkw-section-content&#187;][vc_row][vc_column width=&#187;1\/3&#8243; el_class=&#187;dkw-col-toc&#187; offset=&#187;vc_col-lg-3&#8243;][vc_column_text]<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/sites.hslu.ch\/werkstatt\/p5-js-sampler\/#P5js\" >P5.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/sites.hslu.ch\/werkstatt\/p5-js-sampler\/#Glitchcom\" >Glitch.com<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/sites.hslu.ch\/werkstatt\/p5-js-sampler\/#Sampler\" >Sampler<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/sites.hslu.ch\/werkstatt\/p5-js-sampler\/#HTML\" >HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/sites.hslu.ch\/werkstatt\/p5-js-sampler\/#JavaScript_p5js\" >JavaScript (p5.js)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/sites.hslu.ch\/werkstatt\/p5-js-sampler\/#CSS\" >CSS<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/sites.hslu.ch\/werkstatt\/p5-js-sampler\/#Wie_weiter\" >Wie weiter<\/a><\/li><\/ul><\/nav><\/div>\n[\/vc_column_text][\/vc_column][vc_column width=&#187;2\/3&#8243; el_class=&#187;dkw-col-content&#187; offset=&#187;vc_col-lg-6&#8243;][vc_column_text css=&#187;&#187;]<\/p>\n<h3><span class=\"ez-toc-section\" id=\"P5js\"><\/span>P5.js<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><em>\u00abp5.js ist eine JavaScript-Library f\u00fcr kreatives Coding, mit dem Fokus darauf, Coding f\u00fcr K\u00fcnstler, Designer, P\u00e4dagogen, Anf\u00e4nger und alle anderen zug\u00e4nglich zu machen! p5.js ist kostenlos und open-source, weil wir glauben, dass Software und die Werkzeuge, um sie zu erlernen, f\u00fcr jeden zug\u00e4nglich sein sollten. [&#8230;] Du kannst dir deine gesamte Browserseite als Skizze vorstellen, einschlie\u00dflich HTML5-Objekten f\u00fcr Text, Eingabe, Video, Webcam und Sound.\u00bb<\/em><\/p>\n<p>So stellen die Macher von p5.js die Library auf der eigenen Website vor. Die Library erm\u00f6glicht es dir, \u00fcber ihren <a href=\"https:\/\/editor.p5js.org\/\">Web-Editor<\/a> interaktive, Browser-basierte Applikationen erschaffen kannst. Ihre Vorteile sind die Zug\u00e4nglichkeit, die \u00f6ffentliche, detaillierte Dokumentation und die lebendige, hilfsbereite Community.<\/p>\n<p>Du kannst p5.js beispielsweise nutzen in dem du direkt auf die <a href=\"https:\/\/p5js.org\/\">p5.js-Website<\/a> gehst, dich dort anmeldest und ein Projekt erstellst. In diesem Recipe werden wir aber einen anderen Weg einschlagen.<\/p>\n<p>Falls du noch keine Programmier-Erfahrung hast, findest du auf der Website <a href=\"https:\/\/p5js.org\/tutorials\/\">eine Serie von Tutorials<\/a>, welche dir die Grundlagen von p5.js erkl\u00e4ren.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Glitchcom\"><\/span>Glitch.com<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Glitch.com ist eine kollaborative Webentwicklungsplattform, die es Benutzern erm\u00f6glicht, Webanwendungen in Echtzeit zu erstellen und zu teilen. Das heisst, du kannst beispielsweisse p5.js-Projekte dort hosten und auch f\u00fcr andere zug\u00e4nglich machen.<\/p>\n<p>Um den Dienst zu nutzen, musst du zuerst bei Glitch.com einen Account erstellen und dich dann <a href=\"https:\/\/glitch.com\/signin\">anmelden<\/a>.<\/p>\n<p>Das Erstellen eines Kontos ist kostenlos und erlaubt dir, Projekte, mit bis zu 200 MB Gr\u00f6sse zu erstellen. Dabei kannst du auf 512 MB RAM zur\u00fcckgreifen. Zudem erh\u00e4ltst du 1000 Stunden pro Monat, in denen du an deinen Scripts arbeiten kannst. Falls du mehr Zeit, Speicherplatz oder Leistung ben\u00f6tigst, gibt es die M\u00f6glichkeit, auf ein bezahltes Pro-Model umzusteigen.<\/p>\n<p>Ausserdem kannst du auch mit einem kostenlosen durch die Remix-Funktion deine eigenen Scripts teilen und bestehende Arbeiten aus der ganzen Community nutzen. Konkret bedeutet &#171;Remix&#187; in diesem Fall, dass eine Kopie eines bereits bestehenden Scripts in deinem Arbeitsbereich erstellt wird. Auf dieses hast du im Anschluss Zugriff und kannst es nach Belieben anpassen.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Sampler\"><\/span>Sampler<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Sobald du dich bei Glitch.com angemeldet hast, kannst du unser <a href=\"https:\/\/glitch.com\/edit\/#!\/p5jssampler?path=sketch.js%3A7%3A13\">Sampler-File<\/a> aufrufen und es remixen. Klicke daf\u00fcr auf den Remix-Button am rechten, oberen Rand des Projektes. Danach wird deine eigene Version des Scripts erstellt und ge\u00f6ffnet. Diese kannst du nun bearbeiten und anschliessend von deinem Dash-Board darauf zugreifen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-9438\" src=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-28-at-15.33.42-1000x394.png\" alt=\"\" width=\"1000\" height=\"394\" srcset=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-28-at-15.33.42-1000x394.png 1000w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-28-at-15.33.42-768x303.png 768w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-28-at-15.33.42-1536x606.png 1536w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-28-at-15.33.42-2048x807.png 2048w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-28-at-15.33.42-848x334.png 848w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-28-at-15.33.42-1140x449.png 1140w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-28-at-15.33.42-1170x461.png 1170w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-28-at-15.33.42-1920x757.png 1920w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-28-at-15.33.42-600x237.png 600w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/>Als erstes solltest du deinem Projekt unter <em>Settings &gt; Edit project details<\/em> einen neuen Namen und eine Beschreibung geben. Danach kannst du anfangen, die einzelnen Scripts des Samplers zu bearbeiten. <strong>Denke daran, dass alle \u00c4nderungen auf Glitch.com automatisch gespeichert werden<\/strong>. Sichere dein Projekt vor Umstrukturierungen also gut ab, in dem du es beispielsweise duplizierst.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"HTML\"><\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9431\" src=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-14.05.43.png\" alt=\"\" width=\"772\" height=\"336\" srcset=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-14.05.43.png 772w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-14.05.43-768x334.png 768w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-14.05.43-600x261.png 600w\" sizes=\"auto, (max-width: 772px) 100vw, 772px\" \/>HTML<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Das erste File, aus dem dein Projekt besteht, ist index.html. HTML (Hypertext Markup Language) wird dazu genutzt, Inhalte auf einer Webseite zu <strong>strukturieren<\/strong>. Hier implementieren wir also Dinge wie Text-Bl\u00f6cke, Bilder, oder Buttons.<\/p>\n<p>Da wir in diesem Projekt aber alle unsere interaktiven Elemente im p5.js-File erstellen, bleibt das Index-File in diesem Fall recht kurz. Wir linken nur die das style.css- und sketch.js-Script mit unserem HTML-File und f\u00fcgen die p5.js-Sound-Library hinzu.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"JavaScript_p5js\"><\/span>JavaScript (p5.js)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Hier passiert die Magie. JavaScript (oder in unserem Fall, die JavaScript-Erweiterung, p5.js) wird genutzt, um das <strong>Verhalten<\/strong> deiner Website zu steuern und Interaktivit\u00e4t zu implementieren.<\/p>\n<p>Damit dein Sampler funktioniert, musst du als erstes eine \u00c4nderung am Pfad vornehmen. Der \u00e4ndert sich n\u00e4mlich, sobald du das Projekt remixt und damit deine eigenen Files mit eigenen Pfaden erstellst. \u00d6ffne darum deinen Assets-Folder, in dem du im Men\u00fc auf der linken Seite <em>Assets<\/em> ausw\u00e4hlst. Klicke danach auf eines deiner Files. Kopiere danach den Teil des URLs vor dem File-Namen, bis und mit zum letzten Forward-Slash (\/).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-9437\" src=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.41.43-1000x288.png\" alt=\"\" width=\"1000\" height=\"288\" srcset=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.41.43-1000x288.png 1000w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.41.43-768x221.png 768w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.41.43-848x244.png 848w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.41.43-1140x328.png 1140w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.41.43-1170x337.png 1170w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.41.43-600x173.png 600w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.41.43.png 1382w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/>Danach gehst du zur\u00fcck sketch.js. Hier ersetzt du nun die Variable Path mit deinem eigenen Pfad. Behalte die Anf\u00fchrungszeichen vor und nach dem URL bei.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-9429\" src=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.30.57-1000x566.png\" alt=\"\" width=\"1000\" height=\"566\" srcset=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.30.57-1000x566.png 1000w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.30.57-768x435.png 768w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.30.57-848x480.png 848w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.30.57-1140x645.png 1140w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.30.57-1170x662.png 1170w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.30.57-600x340.png 600w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.30.57.png 1417w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/>Sobald du dies angepasst hast, kannst du den Sampler nutzen, in dem du auf <em>Preview &gt; Open preview pane<\/em> klickst und eine Vorschau des Projekts \u00f6ffnen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9430\" src=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.38.28.png\" alt=\"\" width=\"632\" height=\"216\" srcset=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.38.28.png 632w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-13.38.28-600x205.png 600w\" sizes=\"auto, (max-width: 632px) 100vw, 632px\" \/>Dort kannst du den Sampler ausprobieren. <strong>Vergiss nicht, jedes Mal den Update-Button (die zwei Pfeile am rechten, oberen Rand des Vorschau-Fensters) zu dr\u00fccken, wenn du \u00c4nderungen am Projekt vornimmst und diese Testen willst<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-9433\" src=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-14.24.11-1000x949.png\" alt=\"\" width=\"1000\" height=\"949\" srcset=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-14.24.11-1000x949.png 1000w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-14.24.11-768x729.png 768w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-14.24.11-848x805.png 848w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-14.24.11-600x570.png 600w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-16-at-14.24.11.png 1028w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/>Du wirst sehen, dass der Sampler aus einem Record-Button, 9 Play-Buttons und 9 Slidern besteht. Die Play-Buttons spielen ein Sound-File ab, wenn du sie anklickst oder die entsprechende Taste (1-9) auf deinem Keyboard dr\u00fcckst. Die Zahl innerhalb der Buttons zeigt die Wiedergabe Geschwindigkeit des Samples in Prozent. Die Default-Einstellung ist 100%, was der regul\u00e4ren Geschwindigkeit des Files entspricht. Mit den Slidern neben den jeweiligen Buttons kannst du die Geschwindigkeit anpassen. Zuoberst im Projekt kannst du den Record-Button finden. Seine Funktion kannst du nutzen, um eigene Sounds f\u00fcr den Sampler aufzunehmen. Dr\u00fccke den Knopf einmal, um eine Aufnahme zu starten, und ein zweites Mal, um sie zu beenden. Das so entstandene Sound-File wird in deinem Download-Folder gespeichert, wo du es umbenennen kannst. Zur\u00fcck im Projekt kannst du nun die Assets aufrufen und deine Datei dort hochladen. Gehe danach zum sketch.js. und ersetze in der Liste soundNames (in den globalen Variablen) den Namen des Sound-Files, das du ersetzen willst, mit dem Namen deines eigenen WAV oder MP3.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9436\" src=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-23-at-15.00.26.png\" alt=\"\" width=\"798\" height=\"400\" srcset=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-23-at-15.00.26.png 798w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-23-at-15.00.26-768x385.png 768w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-23-at-15.00.26-600x301.png 600w\" sizes=\"auto, (max-width: 798px) 100vw, 798px\" \/>Lass uns nun den Code selbst etwas genauer anschauen. Das Script besteht aus 4 Haupteilen:<\/p>\n<ul>\n<li><em>Globale Variablen<\/em> \u2013 Noch bevor irgendeine Funktion Als erstes benennen und definieren wir die Variablen, mit denen wir arbeiten werden.<\/li>\n<li><em>preload()<\/em> \u2013 Hier werden alle Funktionen untergebracht, die noch vor Beginn des Scripts ausgef\u00fchrt werden m\u00fcssen. Dazu geh\u00f6rt das Laden von Assests \u2013 in unserem konkreten Fall, Sound-Files.<\/li>\n<li><em>setup()<\/em> \u2013 Ins Setup geh\u00f6rt der Code, der nur einmal ausgef\u00fchrt wird. Beim Sampler ist es die Erstellung von Audio-Input- und Recorder-Objekten sowie die Implementierung von Buttons und Slidern. Des Weiteren bestimmen wir hier die Position unserer visuellen Elemente, basierend auf den Variablen, die wir bereits festgelegt haben.<\/li>\n<li><em>draw()<\/em> \u2013 Die Draw-Funktion ist ein Loop, der permanent wiederholt wird. Hierhin kommt der Code, der st\u00e4ndig upgedated werden muss \u2013 wie Interaktivit\u00e4t und sich ver\u00e4ndernde Werte. Das sind in unserem Script vor allem die Funktionalit\u00e4t von Slidern und Buttons. So werden beispielsweisse die Werte jedes Sliders permanent neu abgegriffen und an die entsprechenden Buttons weitergeleited.<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"CSS\"><\/span>CSS<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>CSS steht f\u00fcr Cascading Style Sheets. Es ist eine Sprache, mit der man das <strong>Aussehen und Layout<\/strong> von Web-Projekten steuern kann. CSS diktiert dem Browser, wie dieser Inhalt dargestellen soll.<\/p>\n<p>In Falle des Sampler siehst du also zum Beispiel, das Farb-Styling des Hintergrundes, der Buttons und der Sliders. Wie du im p5.js-Script schon gesehen hast, ist es auch m\u00f6glich, von dort aus Styling-Optionen anzuwenden. Wir bestimmen also in unserem CSS-Code, wie etwas grundlegen aussehen wird. Sollen sich Style-Variablen aber bei Interaktion anpassen, macht es Sinn, dies im p5.js-Code unterzubringen.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Wie_weiter\"><\/span>Wie weiter<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>All diese Dokumente arbeiten nun zusammen, um den Sampler zu bilden. Du kannst alle dieser Elemente nach Belieben anpassen. <strong>Nat\u00fcrlich kannst du unsere Files auch als Vorlage f\u00fcr ganz andere p5.js-Projekte auf Glitch nutzen<\/strong>.<\/p>\n<p>Sobald du zufrieden mit allem bist, kannst du dein Projekt auf deiner Ziel-Maschine aufrufen. Gehe dazu in die Vorschau des Samplers (<em>Preview &gt; Open preview pane<\/em>). Dort findest du den URL deines Projektes durch einen Klick auf die drei Punkte am rechten Bildrand.<\/p>\n<p><strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-9434\" src=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-23-at-10.04.42-1000x359.png\" alt=\"\" width=\"1000\" height=\"359\" srcset=\"https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-23-at-10.04.42-1000x359.png 1000w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-23-at-10.04.42-768x276.png 768w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-23-at-10.04.42-848x304.png 848w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-23-at-10.04.42-600x215.png 600w, https:\/\/sites.hslu.ch\/werkstatt\/wp-content\/uploads\/sites\/13\/2025\/04\/Screenshot-2025-04-23-at-10.04.42.png 1036w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/>Sobald du ihn gespeichert hast, kannst du von allen PCs mit Internetanschluss auf den Sampler zugreifen<\/strong>. Kopiere dazu nur den Link zum Projekt in die Adress-Zeile des gew\u00fcnschten Browsers.[\/vc_column_text][\/vc_column][vc_column width=&#187;1\/3&#8243; el_class=&#187;dkw-col-micro&#187; offset=&#187;vc_col-lg-3&#8243;][\/vc_column][\/vc_row][\/vc_section][vc_section el_class=&#187;dkw-dontprint&#187;][vc_row disable_element=&#187;yes&#187;][vc_column][vc_column_text]\u2014 \u2014 \u2014 INFO: In beiden nachfolgenden Post Grids die passenden Recipies und die passenden Talks\u00a0 ausw\u00e4hlen \u2014 \u2014 \u2014<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row][\/vc_section][vc_section el_class=&#187;dkw-dontprint&#187;][\/vc_section]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_section el_class=&#187;dkw-section-lead&#187;][vc_row][vc_column width=&#187;2\/3&#8243; offset=&#187;vc_col-sm-offset-2&#8243;][vc_column_text css=&#187;&#187;]P5.js ist eine JavaScript-Library, die speziell f\u00fcr kreatives Programmieren entwickelt wurde. Auf Glitch.com kannst du solche Arbeiten online hosten und [&hellip;]<\/p>\n","protected":false},"author":50,"featured_media":9441,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[15,11],"tags":[],"class_list":["post-9465","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mediadock","category-recipies"],"acf":[],"_links":{"self":[{"href":"https:\/\/sites.hslu.ch\/werkstatt\/wp-json\/wp\/v2\/posts\/9465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.hslu.ch\/werkstatt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.hslu.ch\/werkstatt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.hslu.ch\/werkstatt\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.hslu.ch\/werkstatt\/wp-json\/wp\/v2\/comments?post=9465"}],"version-history":[{"count":4,"href":"https:\/\/sites.hslu.ch\/werkstatt\/wp-json\/wp\/v2\/posts\/9465\/revisions"}],"predecessor-version":[{"id":9468,"href":"https:\/\/sites.hslu.ch\/werkstatt\/wp-json\/wp\/v2\/posts\/9465\/revisions\/9468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sites.hslu.ch\/werkstatt\/wp-json\/wp\/v2\/media\/9441"}],"wp:attachment":[{"href":"https:\/\/sites.hslu.ch\/werkstatt\/wp-json\/wp\/v2\/media?parent=9465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.hslu.ch\/werkstatt\/wp-json\/wp\/v2\/categories?post=9465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.hslu.ch\/werkstatt\/wp-json\/wp\/v2\/tags?post=9465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}