https://wiki.kabkimd.nl/api.php?action=feedcontributions&feedformat=atom&user=Leo 2026-05-06T14:18:28Z User contributions MediaWiki 1.44.0 https://wiki.kabkimd.nl/index.php?title=Main_Page&diff=119131 2026-03-05T09:51:12Z

<p>Leo: Undo revision 59873 by VFDHugh514136 (talk)</p> <hr /> <div><br /> == 🔵 [[User Pages]] 🔵 ==<br /> <br /> == Courses ==<br /> 🧵 [[Creative Coding]]<br /> <br /> 📃 [[Individual Study Track (IST)]]<br /> <br /> 📌 [[Study coaching]]<br /> <br /> 🎛️ [[Project Week 2026|Project Weeks 2026]]<br /> <br /> == Facilities ==<br /> <br /> 📚 [[Libraries in The Hague]]<br /> <br /> 🪵 [[Workshops in The Hague]]<br /> <br /> 🔨 [[Inventory]]<br /> <br /> 🍜 [[I/M/Digesting]]<br /> <br /> == How to ==<br /> :[[How to use a wiki]]<br /> <br /> == Archive ==<br /> [[Literature Review 2025]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Main_Page&diff=119130 2026-03-05T09:50:40Z

<p>Leo: Undo revision 101475 by RainaSimonetti (talk)</p> <hr /> <div>Error E009002 typically indicates a problem related to the network or connectivity in a system, often associated with issues such as server unavailability or ti&lt;br&gt;Read more&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;Statistics&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;What is favorable ankylosis?&lt;br&gt;&lt;br&gt;&lt;br&gt;Asked by Anonymous&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;Favorable ankylosis refers to a condition where the fusion of bones or [https://fillyourforms.com/comissions/ lanciao] joints results in a stable and functional alignment, often after an injury or [https://www.answers.com/search?q=surgery surgery]. In&lt;br&gt;Read more&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;Math and Arithmetic&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;+1&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;How many three digit combinations can be made?&lt;br&gt;&lt;br&gt;&lt;br&gt;Asked by Anonymous&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;To find the number of three-digit combinations, we consider the digits from 000 to 999. Each digit can range from 0 to 9, giving us 10 [https://www.homeclick.com/search.aspx?search=options options] for each of the t&lt;br&gt;Read more&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;Algebra&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;+1&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;Round 6.3 to the nearest tenth?&lt;br&gt;&lt;br&gt;&lt;br&gt;Asked by Anonymous&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;6.3 is the nearest tenth...</div>

Leo https://wiki.kabkimd.nl/index.php?title=User:Leonardo&diff=1675 2025-12-12T13:52:14Z

<p>Leo: </p> <hr /> <div>Leo loves wiki pages hates fascists<br /> <br /> :His face is at [https://leoscarin.com/face leoscarin.com/face] <br /> <br /> https://statics.cedscdn.it/photos/MED_LOW/28/90/8512890_01123917_gerry.jpg this is Gerry Scotti. not Leo.<br /> <br /> =Codes=<br /> :[[/p5js demos]]<br /> :[https://codeberg.org/scar git repositories]<br /> <br /> =Notes=<br /> =Readings=<br /> =Resources=<br /> :[https://www.naiveweekly.com/ Naive Weekly]<br /> :[https://knowingmachines.org Knowing Machines]<br /> :[https://jamesbridle.com/writing James Bridle's writings]<br /> <br /> [[/p5js demos | look at my p5js demos]]<br /> <br /> &lt;html&gt; &lt;img width=&quot;400&quot; src=&quot;&quot;&gt; &lt;/html&gt;<br /> <br /> [[/howtop5]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding&diff=867 2025-12-01T16:09:33Z

<p>Leo: </p> <hr /> <div>In this course code becomes both the tool and the craft that supports your creative practice. When designing interactive media, code exists at various levels: as the engine of your work, as the material forming and informing your process, and/or as the critical subject of your research.<br /> <br /> This course introduces the different languages and practices of Creative Coding, with a method that is applied, creative, and critical. The classes are designed to encourage collaborative, open-ended, inclusive, and sustainable approaches to computing in art and design.<br /> <br /> &lt;u&gt;No previous knowledge of coding is required&lt;/u&gt;<br /> <br /> <br /> [[File:Cat.png|thumb]]<br /> <br /> == Links &amp; Tools ==<br /> [https://wb.kabkimd.nl Excalidraw Whiteboard]<br /> <br /> [https://editor.p5js.org P5js Editor]<br /> <br /> [https://kabkimd.nl I/M/D Pages] &amp; [https://code.kabkimd.nl CodeDot]<br /> <br /> [https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing Booking Form]<br /> <br /> [https://wdka.codeberg.page/manifesting-interaction/ 🖐️ Leo's handmade TouchDesigner snippets]<br /> <br /> [https://codeberg.org/imd/python 🐍 Leo's handmade Python codes]<br /> <br /> [[/Trajectory|🗺️ Trajectory]]<br /> <br /> = Classes =<br /> &lt;h4&gt;Class #01&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Intro to Creative Coding &lt;br/&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting animation in P5js &lt;br /&gt;<br /> &lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Dynamic portrait|Dynamic Portrait]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #02&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting interaction in P5js &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Interactive poem|Interactive Poem]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #03&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Conditional Design &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Conditionals and loops &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/One-button game|One-button Game]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #04&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #05&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Forms, buttons, menus in HTML/CSS &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #06&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Hypertext design in HTML/CSS &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Browser-based story|Browser-based story]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #07&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #08&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Audiovisual programming in TouchDesigner &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Illuminated Interventions|Illuminated Interventions]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #09&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: [[/Computer Vision in TouchDesigner|Computer vision in TouchDesigner]] &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Digital Theremin|Digital Theremin]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #10&lt;/h4&gt;<br /> Guest Lecture with Pawel<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #11&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Machine Learning and Data Degrowth &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: transformers in Python &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[Creative Coding/Experimental Chatbot|Experimental Chatbot]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #12&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #13&lt;/h4&gt;<br /> Course Finals<br /> <br /> &lt;h4&gt;Class #14&lt;/h4&gt;<br /> Site visit at [https://v2.nl V2_Lab]<br /> <br /> = Lecturer =<br /> Leo Scarin | l.scarin@kabk.nl<br /> <br /> [[Category:Year 1]]<br /> [[Category:Semester 1]]<br /> [[Category:Creative Technologies]]<br /> [[Category:2025/26]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding/Interactive_poem&diff=864 2025-12-01T13:04:57Z

<p>Leo: </p> <hr /> <div>Using the tools from the class, '''write''', '''design''', and '''code''' an interactive word. <br /> <br /> The choice of the word, your definition of ''interactivity'', and the resulting form are all features you should author yourself.<br /> <br /> '''Deliverable''': upload a P5js sketch to the [https://wb.kabkimd.nl whiteboard] with your name and the assignment title.<br /> <br /> '''Reference''': [https://codeberg.org/wdka/words-on-a-string words-on-a-string]<br /> <br /> '''Deadlines'''<br /> <br /> * First deadline: 📅 22/09/2025<br /> * Second deadline: 📅 17/10/2025 (midterms)<br /> * Last deadline: 📅 08/12/2025 (course finals)<br /> <br /> [[Category:Creative Coding]] [[Category:Assignments]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding/Interactive_poem&diff=863 2025-12-01T11:45:49Z

<p>Leo: </p> <hr /> <div>Using the tools from the class, '''write''', '''design''', and '''code''' an interactive word. <br /> <br /> The choice of the word, your definition of ''interactivity'', and the resulting form are all features you should author yourself.<br /> <br /> '''Deliverable''': upload a P5js sketch to the [https://wb.kabkimd.nl whiteboard] with your name and the assignment title.<br /> <br /> '''Reference''': [https://wkda.codeberg.page/words-on-a-string words-on-a-string]<br /> <br /> '''Deadlines'''<br /> <br /> * First deadline: 📅 22/09/2025<br /> * Second deadline: 📅 17/10/2025 (midterms)<br /> * Last deadline: 📅 08/12/2025 (course finals)<br /> <br /> [[Category:Creative Coding]] [[Category:Assignments]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding/Interactive_poem&diff=862 2025-12-01T11:45:40Z

<p>Leo: </p> <hr /> <div>Using the tools from the class, '''write''', '''design''', and '''code''' an interactive word. <br /> <br /> The choice of the word, your definition of ''interactivity'', and the resulting form are all features you should author yourself.<br /> <br /> '''Deliverable''': upload a P5js sketch to the [https://wb.kabkimd.nl whiteboard] with your name and the assignment title.<br /> <br /> '''Reference''': [wkda.codeberg.page/words-on-a-string words-on-a-string]<br /> <br /> '''Deadlines'''<br /> <br /> * First deadline: 📅 22/09/2025<br /> * Second deadline: 📅 17/10/2025 (midterms)<br /> * Last deadline: 📅 08/12/2025 (course finals)<br /> <br /> [[Category:Creative Coding]] [[Category:Assignments]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding/Experimental_Chatbot&diff=861 2025-12-01T11:44:26Z

<p>Leo: </p> <hr /> <div>Using the tools from our class, '''design''' and '''code''' your own '''experimental chatbot'''.<br /> <br /> You can decide to ''train your own language model'' using text that you collect, or to ''code your own prompting system'' onto an existing model.<br /> <br /> The process, whether it includes text collection, training, interface, or prompt design, should be creatively owned by you.<br /> <br /> '''Deliverable''': in-class (document)<br /> <br /> '''Deadline''': 📅 08/12/2025 (course finals)<br /> <br /> [[Category:Creative Coding]][[Category:Assignments]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding&diff=860 2025-12-01T11:44:08Z

<p>Leo: </p> <hr /> <div>In this course code becomes both the tool and the craft that supports your creative practice. When designing interactive media, code exists at various levels: as the engine of your work, as the material forming and informing your process, and/or as the critical subject of your research.<br /> <br /> This course introduces the different languages and practices of Creative Coding, with a method that is applied, creative, and critical. The classes are designed to encourage collaborative, open-ended, inclusive, and sustainable approaches to computing in art and design.<br /> <br /> &lt;u&gt;No previous knowledge of coding is required&lt;/u&gt;<br /> [[File:Cat.png|thumb]]<br /> <br /> == Links &amp; Tools ==<br /> [https://wb.kabkimd.nl Excalidraw Whiteboard]<br /> <br /> [https://editor.p5js.org P5js Editor]<br /> <br /> [https://kabkimd.nl I/M/D Pages] &amp; [https://code.kabkimd.nl CodeDot]<br /> <br /> [https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing Booking Form]<br /> <br /> [https://wdka.codeberg.page/manifesting-interaction/ Leo's handmade TouchDesigner snippets]<br /> <br /> [[/Trajectory| 🗺️ Trajectory]]<br /> <br /> [https://codeberg.org/imd/python 🐍 Python codes]<br /> <br /> = Classes =<br /> &lt;h4&gt;Class #01&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Intro to Creative Coding &lt;br/&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting animation in P5js &lt;br /&gt;<br /> &lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Dynamic portrait|Dynamic Portrait]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #02&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting interaction in P5js &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Interactive poem|Interactive Poem]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #03&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Conditional Design &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Conditionals and loops &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/One-button game|One-button Game]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #04&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #05&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Forms, buttons, menus in HTML/CSS &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #06&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Hypertext design in HTML/CSS &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Browser-based story|Browser-based story]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #07&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #08&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Audiovisual programming in TouchDesigner &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Illuminated Interventions|Illuminated Interventions]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #09&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: [[/Computer Vision in TouchDesigner|Computer vision in TouchDesigner]] &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Digital Theremin|Digital Theremin]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #10&lt;/h4&gt;<br /> Guest Lecture with Pawel<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #11&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Machine Learning and Data Degrowth &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: transformers in Python &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[Creative Coding/Experimental Chatbot|Experimental Chatbot]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #12&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #13&lt;/h4&gt;<br /> Course Finals<br /> <br /> &lt;h4&gt;Class #14&lt;/h4&gt;<br /> Site visit at [https://v2.nl V2_Lab]<br /> <br /> = Lecturer =<br /> Leo Scarin | l.scarin@kabk.nl<br /> <br /> [[Category:Year 1]]<br /> [[Category:Semester 1]]<br /> [[Category:Creative Technologies]]<br /> [[Category:2025/26]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding&diff=859 2025-12-01T11:43:50Z

<p>Leo: </p> <hr /> <div>In this course code becomes both the tool and the craft that supports your creative practice. When designing interactive media, code exists at various levels: as the engine of your work, as the material forming and informing your process, and/or as the critical subject of your research.<br /> <br /> This course introduces the different languages and practices of Creative Coding, with a method that is applied, creative, and critical. The classes are designed to encourage collaborative, open-ended, inclusive, and sustainable approaches to computing in art and design.<br /> <br /> &lt;u&gt;No previous knowledge of coding is required&lt;/u&gt;<br /> [[File:Cat.png|thumb]]<br /> <br /> == Links &amp; Tools ==<br /> [https://wb.kabkimd.nl Excalidraw Whiteboard]<br /> <br /> [https://editor.p5js.org P5js Editor]<br /> <br /> [https://kabkimd.nl I/M/D Pages] &amp; [https://code.kabkimd.nl CodeDot]<br /> <br /> [https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing Booking Form]<br /> <br /> [https://wdka.codeberg.page/manifesting-interaction/ Leo's handmade TouchDesigner snippets]<br /> <br /> [[/Trajectory| 🗺️ Trajectory]]<br /> <br /> [https://codeberg.org/imd/python 🐍 Python codes]<br /> <br /> = Classes =<br /> &lt;h4&gt;Class #01&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Intro to Creative Coding &lt;br/&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting animation in P5js &lt;br /&gt;<br /> &lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Dynamic portrait|Dynamic Portrait]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #02&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting interaction in P5js &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Interactive poem|Interactive Poem]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #03&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Conditional Design &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Conditionals and loops &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/One-button game|One-button Game]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #04&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #05&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Forms, buttons, menus in HTML/CSS &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #06&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Hypertext design in HTML/CSS &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Browser-based story|Browser-based story]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #07&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #08&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Audiovisual programming in TouchDesigner &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Illuminated Interventions|Illuminated Interventions]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #09&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: [[/Computer Vision in TouchDesigner|Computer vision in TouchDesigner]] &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Digital Theremin|Digital Theremin]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #10&lt;/h4&gt;<br /> Guest Lecture with Pawel<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #11&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Machine Learning and Data Degrowth &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: transformers in Python &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[Creative Coding/Experimental Chatbot|Experimental Chatbot<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #12&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #13&lt;/h4&gt;<br /> Course Finals<br /> <br /> &lt;h4&gt;Class #14&lt;/h4&gt;<br /> Site visit at [https://v2.nl V2_Lab]<br /> <br /> = Lecturer =<br /> Leo Scarin | l.scarin@kabk.nl<br /> <br /> [[Category:Year 1]]<br /> [[Category:Semester 1]]<br /> [[Category:Creative Technologies]]<br /> [[Category:2025/26]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding&diff=858 2025-12-01T11:42:05Z

<p>Leo: </p> <hr /> <div>In this course code becomes both the tool and the craft that supports your creative practice. When designing interactive media, code exists at various levels: as the engine of your work, as the material forming and informing your process, and/or as the critical subject of your research.<br /> <br /> This course introduces the different languages and practices of Creative Coding, with a method that is applied, creative, and critical. The classes are designed to encourage collaborative, open-ended, inclusive, and sustainable approaches to computing in art and design.<br /> <br /> &lt;u&gt;No previous knowledge of coding is required&lt;/u&gt;<br /> [[File:Cat.png|thumb]]<br /> <br /> == Links &amp; Tools ==<br /> [https://wb.kabkimd.nl Excalidraw Whiteboard]<br /> <br /> [https://editor.p5js.org P5js Editor]<br /> <br /> [https://kabkimd.nl I/M/D Pages] &amp; [https://code.kabkimd.nl CodeDot]<br /> <br /> [https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing Booking Form]<br /> <br /> [https://wdka.codeberg.page/manifesting-interaction/ Leo's handmade TouchDesigner snippets]<br /> <br /> [[/Trajectory| 🗺️ Trajectory]]<br /> <br /> [https://codeberg.org/imd/python 🐍 Python codes]<br /> <br /> = Classes =<br /> &lt;h4&gt;Class #01&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Intro to Creative Coding &lt;br/&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting animation in P5js &lt;br /&gt;<br /> &lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Dynamic portrait|Dynamic Portrait]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #02&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting interaction in P5js &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Interactive poem|Interactive Poem]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #03&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Conditional Design &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Conditionals and loops &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/One-button game|One-button Game]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #04&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #05&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Forms, buttons, menus in HTML/CSS &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #06&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Hypertext design in HTML/CSS &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Browser-based story|Browser-based story]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #07&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #08&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Audiovisual programming in TouchDesigner &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Illuminated Interventions|Illuminated Interventions]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #09&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: [[/Computer Vision in TouchDesigner|Computer vision in TouchDesigner]] &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Digital Theremin|Digital Theremin]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #10&lt;/h4&gt;<br /> Guest Lecture with Pawel<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #11&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Machine Learning and Data Degrowth &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: transformers in Python &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[Creative Coding/Experimental Chatbot|Experimental Chatbot]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #12&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #13&lt;/h4&gt;<br /> Course Finals<br /> <br /> &lt;h4&gt;Class #14&lt;/h4&gt;<br /> Site visit at [https://v2.nl V2_Lab]<br /> <br /> = Lecturer =<br /> Leo Scarin | l.scarin@kabk.nl<br /> <br /> [[Category:Year 1]]<br /> [[Category:Semester 1]]<br /> [[Category:Creative Technologies]]<br /> [[Category:2025/26]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding&diff=844 2025-11-24T11:08:50Z

<p>Leo: </p> <hr /> <div>In this course code becomes both the tool and the craft that supports your creative practice. When designing interactive media, code exists at various levels: as the engine of your work, as the material forming and informing your process, and/or as the critical subject of your research.<br /> <br /> This course introduces the different languages and practices of Creative Coding, with a method that is applied, creative, and critical. The classes are designed to encourage collaborative, open-ended, inclusive, and sustainable approaches to computing in art and design.<br /> <br /> &lt;u&gt;No previous knowledge of coding is required&lt;/u&gt;<br /> [[File:Cat.png|thumb]]<br /> <br /> == Links &amp; Tools ==<br /> [https://wb.kabkimd.nl Excalidraw Whiteboard]<br /> <br /> [https://editor.p5js.org P5js Editor]<br /> <br /> [https://kabkimd.nl I/M/D Pages] &amp; [https://code.kabkimd.nl CodeDot]<br /> <br /> [https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing Booking Form]<br /> <br /> [https://wdka.codeberg.page/manifesting-interaction/ Leo's handmade TouchDesigner snippets]<br /> <br /> [[/Trajectory| 🗺️ Trajectory]]<br /> <br /> [[https://codeberg.org/imd/python | 🐍 python]]<br /> <br /> = Classes =<br /> &lt;h4&gt;Class #01&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Intro to Creative Coding &lt;br/&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting animation in P5js &lt;br /&gt;<br /> &lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Dynamic portrait|Dynamic Portrait]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #02&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting interaction in P5js &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Interactive poem|Interactive Poem]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #03&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Conditional Design &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Conditionals and loops &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/One-button game|One-button Game]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #04&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #05&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Forms, buttons, menus in HTML/CSS &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #06&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Hypertext design in HTML/CSS &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Browser-based story|Browser-based story]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #07&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #08&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Audiovisual programming in TouchDesigner &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Illuminated Interventions|Illuminated Interventions]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #09&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: [[/Computer Vision in TouchDesigner|Computer vision in TouchDesigner]] &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Digital Theremin|Digital Theremin]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #10&lt;/h4&gt;<br /> Guest Lecture with Pawel<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #11&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Machine Learning and Data Degrowth &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: transformers in Python &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[Creative Coding/Experimental Chatbot|Experimental Chatbot]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #12&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #13&lt;/h4&gt;<br /> Course Finals<br /> <br /> &lt;h4&gt;Class #14&lt;/h4&gt;<br /> Site visit at [https://v2.nl V2_Lab]<br /> <br /> = Lecturer =<br /> Leo Scarin | l.scarin@kabk.nl<br /> <br /> [[Category:Year 1]]<br /> [[Category:Semester 1]]<br /> [[Category:Creative Technologies]]<br /> [[Category:2025/26]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding&diff=832 2025-11-10T10:47:15Z

<p>Leo: </p> <hr /> <div>In this course code becomes both the tool and the craft that supports your creative practice. When designing interactive media, code exists at various levels: as the engine of your work, as the material forming and informing your process, and/or as the critical subject of your research.<br /> <br /> This course introduces the different languages and practices of Creative Coding, with a method that is applied, creative, and critical. The classes are designed to encourage collaborative, open-ended, inclusive, and sustainable approaches to computing in art and design.<br /> <br /> &lt;u&gt;No previous knowledge of coding is required&lt;/u&gt;<br /> [[File:Cat.png|thumb]]<br /> <br /> == Links &amp; Tools ==<br /> [https://wb.kabkimd.nl Excalidraw Whiteboard]<br /> <br /> [https://editor.p5js.org P5js Editor]<br /> <br /> [https://kabkimd.nl I/M/D Pages] &amp; [https://code.kabkimd.nl CodeDot]<br /> <br /> [https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing Booking Form]<br /> <br /> [https://wdka.codeberg.page/manifesting-interaction/ Leo's handmade TouchDesigner snippets]<br /> <br /> [[/Trajectory| 🗺️ Trajectory]]<br /> <br /> = Classes =<br /> &lt;h4&gt;Class #01&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Intro to Creative Coding &lt;br/&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting animation in P5js &lt;br /&gt;<br /> &lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Dynamic portrait|Dynamic Portrait]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #02&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting interaction in P5js &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Interactive poem|Interactive Poem]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #03&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Conditional Design &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Conditionals and loops &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/One-button game|One-button Game]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #04&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #05&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Forms, buttons, menus in HTML/CSS &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #06&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Hypertext design in HTML/CSS &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Browser-based story|Browser-based story]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #07&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #08&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Audiovisual programming in TouchDesigner &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Illuminated Interventions|Illuminated Interventions]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #09&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: [[/Computer Vision in TouchDesigner|Computer vision in TouchDesigner]] &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Digital Theremin|Digital Theremin]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #10&lt;/h4&gt;<br /> Guest Lecture with Pawel<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #11&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Machine Learning and Data Degrowth &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: transformers in Python &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[Creative Coding/Experimental Chatbot|Experimental Chatbot]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #12&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #13&lt;/h4&gt;<br /> Course Finals<br /> <br /> &lt;h4&gt;Class #14&lt;/h4&gt;<br /> Site visit at [https://v2.nl V2_Lab]<br /> <br /> = Lecturer =<br /> Leo Scarin | l.scarin@kabk.nl<br /> <br /> [[Category:Year 1]]<br /> [[Category:Semester 1]]<br /> [[Category:Creative Technologies]]<br /> [[Category:2025/26]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding/Computer_Vision_in_TouchDesigner&diff=830 2025-11-10T09:27:18Z

<p>Leo: Created page with &quot;= Useful Links = : [https://codeberg.org/wdka/manifesting-interaction/src/branch/main/04_body-as-interface Leo&#039;s handmade snippets] : [https://github.com/torinmb/mediapipe-touchdesigner Official Mediapipe TouchDesigner plugin]&quot;</p> <hr /> <div>= Useful Links =<br /> : [https://codeberg.org/wdka/manifesting-interaction/src/branch/main/04_body-as-interface Leo's handmade snippets]<br /> : [https://github.com/torinmb/mediapipe-touchdesigner Official Mediapipe TouchDesigner plugin]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding&diff=829 2025-11-10T09:25:59Z

<p>Leo: </p> <hr /> <div>In this course code becomes both the tool and the craft that supports your creative practice. When designing interactive media, code exists at various levels: as the engine of your work, as the material forming and informing your process, and/or as the critical subject of your research.<br /> <br /> This course introduces the different languages and practices of Creative Coding, with a method that is applied, creative, and critical. The classes are designed to encourage collaborative, open-ended, inclusive, and sustainable approaches to computing in art and design.<br /> <br /> &lt;u&gt;No previous knowledge of coding is required&lt;/u&gt;<br /> [[File:Cat.png|thumb]]<br /> <br /> == Links &amp; Tools ==<br /> [https://wb.kabkimd.nl Excalidraw Whiteboard]<br /> <br /> [https://editor.p5js.org P5js Editor]<br /> <br /> [https://kabkimd.nl I/M/D Pages] &amp; [https://code.kabkimd.nl CodeDot]<br /> <br /> [https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing Booking Form]<br /> <br /> [[/Trajectory| 🗺️ Trajectory]]<br /> <br /> = Classes =<br /> &lt;h4&gt;Class #01&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Intro to Creative Coding &lt;br/&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting animation in P5js &lt;br /&gt;<br /> &lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Dynamic portrait|Dynamic Portrait]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #02&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting interaction in P5js &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Interactive poem|Interactive Poem]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #03&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Conditional Design &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Conditionals and loops &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/One-button game|One-button Game]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #04&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #05&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Forms, buttons, menus in HTML/CSS &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #06&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Hypertext design in HTML/CSS &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Browser-based story|Browser-based story]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #07&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #08&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Audiovisual programming in TouchDesigner &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Illuminated Interventions|Illuminated Interventions]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #09&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: [[/Computer Vision in TouchDesigner|Computer vision in TouchDesigner]] &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Digital Theremin|Digital Theremin]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #10&lt;/h4&gt;<br /> Guest Lecture with Pawel<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #11&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Machine Learning and Data Degrowth &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: transformers in Python &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[Creative Coding/Experimental Chatbot|Experimental Chatbot]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #12&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #13&lt;/h4&gt;<br /> Course Finals<br /> <br /> &lt;h4&gt;Class #14&lt;/h4&gt;<br /> Site visit at [https://v2.nl V2_Lab]<br /> <br /> = Lecturer =<br /> Leo Scarin | l.scarin@kabk.nl<br /> <br /> [[Category:Year 1]]<br /> [[Category:Semester 1]]<br /> [[Category:Creative Technologies]]<br /> [[Category:2025/26]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding/Trajectory&diff=713 2025-10-22T08:10:26Z

<p>Leo: </p> <hr /> <div>&lt;span style=&quot;font-family: Georgia; color: magenta; font-size: 24pt;&quot;&gt;✨🌈 &lt;i&gt;do you know...&lt;/i&gt; 🌈✨&lt;/span&gt;<br /> <br /> == Class #01 ==<br /> <br /> === Interface ===<br /> <br /> * how to open P5<br /> * how to save and share a P5 sketch<br /> * how to upload it in Excalidraw<br /> <br /> === Functions (beginner) ===<br /> <br /> * the difference between &lt;code&gt;setup()&lt;/code&gt; and &lt;code&gt;draw()&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/5bCtRn_it example]]<br /> * how to use [https://p5js.org/reference/#Shape shape functions] 👉 [[https://editor.p5js.org/leoscarin/sketches/q1cTX8MPZ example]]<br /> * how to use [https://p5js.org/reference/#Setting color functions] 👉 [[https://editor.p5js.org/leoscarin/sketches/Foyl8ROcp example]]<br /> * how to use &lt;code&gt;[https://p5js.org/reference/p5/map/ map()]&lt;/code&gt; and &lt;code&gt;[https://p5js.org/reference/p5/sin/ sin()]&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/nAeX9poBL example]]<br /> <br /> === Variables (beginner) ===<br /> <br /> * how to use an ''environment variable'' (e.g. &lt;code&gt;width&lt;/code&gt;, &lt;code&gt;height&lt;/code&gt;, &lt;code&gt;mouseX&lt;/code&gt;, &lt;code&gt;mouseY&lt;/code&gt;, &lt;code&gt;frameCount&lt;/code&gt;, etc) 👉 [[https://editor.p5js.org/leoscarin/sketches/matnmaFaD example]]<br /> * how to declare a variable (e.g. &lt;code&gt;let x = 0&lt;/code&gt;) <br /> * how to update a variable (e.g. &lt;code&gt;x++&lt;/code&gt;, &lt;code&gt;x = x - 2&lt;/code&gt;, &lt;code&gt;x = mouseX&lt;/code&gt;, etc) 👉 [[https://editor.p5js.org/leoscarin/sketches/GzxZsviBH example]]<br /> * how to use variables as ''arguments'' of a function (e.g. &lt;code&gt;circle(mouseX, mouseY, s)&lt;/code&gt; )<br /> <br /> === Dynamic Portrait ===<br /> <br /> * how to use the previous concepts to make a ''dynamic portrait'' 👉 [[https://editor.p5js.org/noortaba/sketches/AlK95q2ak example] by Noor, [https://editor.p5js.org/lexitron/sketches/WUpKlCO12 example] by Alex, [https://editor.p5js.org/patriciasaez/sketches/OXPsvEydD example] by Patricia]<br /> <br /> == Class #02 ==<br /> <br /> === Functions (medium) ===<br /> <br /> * how to use [https://p5js.org/reference/#Typography text functions] 👉 [[https://editor.p5js.org/leoscarin/sketches/ZujpbMIHX example]]<br /> * how to [https://p5js.org/reference/p5/loadImage/ load] and [https://p5js.org/reference/p5/image/ display] images 👉 [[https://editor.p5js.org/leoscarin/sketches/ydcQKi2Fo example]]<br /> * how to [https://p5js.org/reference/p5/loadFont/ load] and [https://p5js.org/reference/p5/textFont/ display] fonts 👉 [[https://editor.p5js.org/leoscarin/sketches/cQhOMqzqt example]]<br /> * how to use &lt;code&gt;[https://p5js.org/reference/p5/random/ random()]&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/OmpPOf5WR example]]<br /> <br /> === Variables (medium) ===<br /> <br /> * how to run a ''modulo'' cycle (e.g. &lt;code&gt;x = (x + 1) % 400&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/L8lmpZ3Qz example]]<br /> <br /> === Conditions ===<br /> <br /> * how to write an ''if statement'' 👉 [[https://editor.p5js.org/leoscarin/sketches/HdyahrbaG example]]<br /> * how to write an ''if-else statement'' 👉 [[https://editor.p5js.org/leoscarin/sketches/u7IeNxlTE example]]<br /> * how to use ''booleans'' (&lt;code&gt;mouseIsPressed&lt;/code&gt;)<br /> * how to create booleans (e.g. &lt;code&gt;let state = false&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/EPsOQ5hwn example]]<br /> * how to use mouse coordinates as a condition (e.g. &lt;code&gt;if(mouseX &gt; width/2){...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/o7aJnB0Pf example]]<br /> <br /> === Interactive poem ===<br /> <br /> * how to combine ''conditions'' and ''text functions'' to create an interactive poem 👉 [[https://editor.p5js.org/enojeon2/sketches/YuuZ1BPOS example] by Inho, [https://editor.p5js.org/HasseVisser04/sketches/dS3B4P4eo example] by Hasse, [https://editor.p5js.org/FlorisKabk/sketches/FsiCeAOIQ example] by Floris, [https://wdka.codeberg.page/words-on-a-string/slide_11/ examples] by Leo]<br /> <br /> == Class #03 ==<br /> <br /> === Variables (Advanced) ===<br /> <br /> * how to create lists (e.g. &lt;code&gt;let list = [&quot;cat&quot;, &quot;dog&quot;, &quot;potato&quot;]&lt;/code&gt;)<br /> * how to use a variable from a list (e.g. &lt;code&gt;text(list[0], width/2, height/2)&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/sHFPkLjKg example]]<br /> * how to use an index variable (e.g. &lt;code&gt;list[i]&lt;/code&gt;)<br /> * how to load ''json'' datasets👉 [[https://editor.p5js.org/scarscarin/sketches/e5Wf3Kn_W example]]<br /> * how to create your own ''json'' dataset👉 [[https://editor.p5js.org/leoscarin/sketches/QiMkO0fn4 example]]<br /> <br /> === Functions (Advanced) ===<br /> <br /> * how to use &lt;code&gt;mouseClicked()&lt;/code&gt;, &lt;code&gt;keyPressed()&lt;/code&gt; and &lt;code&gt;keyReleased()&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/r1gEJ3BGp example]]<br /> * how to declare a new function (e.g. &lt;code&gt;function myFunction() {...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/nIY213a-Z example]]<br /> * how to use &lt;code&gt;createButton()&lt;/code&gt; and &lt;code&gt;''button''.'''mousePressed'''(''callback'')&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/5L4GLk0uT example]]<br /> <br /> === Loops ===<br /> <br /> * how to make a ''for loop'' (e.g. &lt;code&gt;for (x = 0; x &lt; width; x+= 50) {...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/covbcckcT example]]<br /> * how to use a ''for loop'' with a list (e.g. &lt;code&gt;for (''element'' of ''list'') {...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/_i41t7nza example]]<br /> <br /> === One-button Game ===<br /> <br /> * how to combine these to create a digital experience constrained to one button only 👉 [[https://editor.p5js.org/leoscarin/sketches/NyF6DESHc example] by Leo, [https://editor.p5js.org/vvvvvvv.q/sketches/mAG2D-wAi example] by Vanessa, Minjae, Anabel]<br /> <br /> == Class #04 ==<br /> <br /> === Buttons (P5) ===<br /> * how to create a button and make it clickable in P5 👉 [[https://editor.p5js.org/scarscarin/sketches/wRwjjqdGx example]<br /> * how to make a counter from the button 👉 [[https://editor.p5js.org/scarscarin/sketches/SnwSWylYj example]]<br /> * how to make conditional statements with the counter 👉 [[https://editor.p5js.org/scarscarin/sketches/MpEMwpxE5 example]]<br /> * how to use the counter for size values 👉 [[https://editor.p5js.org/scarscarin/sketches/BYIv100ZR example]]<br /> * how to map the counter to other ranges of values 👉 [[https://editor.p5js.org/scarscarin/sketches/H3cck39VP example]]<br /> * how to style a button 👉 [[https://editor.p5js.org/scarscarin/sketches/JraN0Ilj5 example]]<br /> <br /> === Text Inputs (P5) ===<br /> * how to create a text input and retrieve its value [[https://editor.p5js.org/scarscarin/sketches/MmDKL5DlX example]]<br /> * how to create an HTML element from a text input [[https://editor.p5js.org/scarscarin/sketches/fqBtc9Vg0 example]]<br /> <br /> === Chatbot ===<br /> * how this sketch works 👉 [[https://editor.p5js.org/scarscarin/sketches/w7vOMLsj1 chatdog (bare)]]<br /> * ... with some CSS knowledge, you also understand how this one works too 👉 [[https://editor.p5js.org/scarscarin/sketches/doJuXup6M chatdog (with css)]]<br /> <br /> == Class #05 ==<br /> <br /> === HTML ===<br /> * how HTML works [[https://website-house.netlify.app/ Website House]]<br /> * how to create a simple HTML document [[https://editor.p5js.org/scarscarin/sketches/VXE0gd7uD example]]<br /> * how to use media elements in HTML [[https://editor.p5js.org/scarscarin/sketches/BlXlracuC example]]<br /> * how to use the &lt;a&gt; tag [[https://editor.p5js.org/scarscarin/sketches/5D-D7-NKn example]]<br /> <br /> === CSS ===<br /> * how CSS works [[https://website-house.netlify.app/ Website House]]<br /> * how to apply CSS in &lt;head&gt;&lt;style&gt; [[https://editor.p5js.org/scarscarin/sketches/g0QBbWWxc example]]<br /> * how to apply CSS in style.css [[https://editor.p5js.org/scarscarin/sketches/yGzvLmVXp example]]<br /> * how selectors work [[https://www.w3schools.com/css/css_selectors.asp CSS selectors]]<br /> * how [https://www.w3schools.com/css/css_margin.asp margins] and [https://www.w3schools.com/css/css_padding.asp paddings] work [[https://www.w3schools.com/css/css_boxmodel.asp box model]]<br /> * how the display property works [[https://www.w3schools.com/css/css_display_visibility.asp CSS Display]]<br /> * how the position property works [[https://www.w3schools.com/css/css_positioning.asp CSS Position]]<br /> <br /> === Coding environment ===<br /> * how to code in the P5 editor<br /> * how to code in a local code editor (VS Code, VS Codium, Pulsar, Brackets, Sublime, etc)<br /> * how to code in the [https://code.kabkimd.nl code.kabkimd.nl] editor<br /> <br /> === Hypertext Narrative ===<br /> * how to combine all the knowledge from the previous classes into the design and development of a &quot;hyper-narrative&quot;. That is a narrative piece told through hyper-text, or the use of multiple HTML pages interconnected through &lt;code&gt;&lt;a&gt;&lt;/code&gt; tags.</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding/Trajectory&diff=712 2025-10-22T07:50:08Z

<p>Leo: </p> <hr /> <div>&lt;span style=&quot;font-family: Georgia; color: magenta; font-size: 24pt;&quot;&gt;✨🌈 &lt;i&gt;do you know...&lt;/i&gt; 🌈✨&lt;/span&gt;<br /> <br /> == Class #01 ==<br /> <br /> === Interface ===<br /> <br /> * how to open P5<br /> * how to save and share a P5 sketch<br /> * how to upload it in Excalidraw<br /> <br /> === Functions (beginner) ===<br /> <br /> * the difference between &lt;code&gt;setup()&lt;/code&gt; and &lt;code&gt;draw()&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/5bCtRn_it example]]<br /> * how to use [https://p5js.org/reference/#Shape shape functions] 👉 [[https://editor.p5js.org/leoscarin/sketches/q1cTX8MPZ example]]<br /> * how to use [https://p5js.org/reference/#Setting color functions] 👉 [[https://editor.p5js.org/leoscarin/sketches/Foyl8ROcp example]]<br /> * how to use &lt;code&gt;[https://p5js.org/reference/p5/map/ map()]&lt;/code&gt; and &lt;code&gt;[https://p5js.org/reference/p5/sin/ sin()]&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/nAeX9poBL example]]<br /> <br /> === Variables (beginner) ===<br /> <br /> * how to use an ''environment variable'' (e.g. &lt;code&gt;width&lt;/code&gt;, &lt;code&gt;height&lt;/code&gt;, &lt;code&gt;mouseX&lt;/code&gt;, &lt;code&gt;mouseY&lt;/code&gt;, &lt;code&gt;frameCount&lt;/code&gt;, etc) 👉 [[https://editor.p5js.org/leoscarin/sketches/matnmaFaD example]]<br /> * how to declare a variable (e.g. &lt;code&gt;let x = 0&lt;/code&gt;) <br /> * how to update a variable (e.g. &lt;code&gt;x++&lt;/code&gt;, &lt;code&gt;x = x - 2&lt;/code&gt;, &lt;code&gt;x = mouseX&lt;/code&gt;, etc) 👉 [[https://editor.p5js.org/leoscarin/sketches/GzxZsviBH example]]<br /> * how to use variables as ''arguments'' of a function (e.g. &lt;code&gt;circle(mouseX, mouseY, s)&lt;/code&gt; )<br /> <br /> === Dynamic Portrait ===<br /> <br /> * how to use the previous concepts to make a ''dynamic portrait'' 👉 [[https://editor.p5js.org/noortaba/sketches/AlK95q2ak example] by Noor, [https://editor.p5js.org/lexitron/sketches/WUpKlCO12 example] by Alex, [https://editor.p5js.org/patriciasaez/sketches/OXPsvEydD example] by Patricia]<br /> <br /> == Class #02 ==<br /> <br /> === Functions (medium) ===<br /> <br /> * how to use [https://p5js.org/reference/#Typography text functions] 👉 [[https://editor.p5js.org/leoscarin/sketches/ZujpbMIHX example]]<br /> * how to [https://p5js.org/reference/p5/loadImage/ load] and [https://p5js.org/reference/p5/image/ display] images 👉 [[https://editor.p5js.org/leoscarin/sketches/ydcQKi2Fo example]]<br /> * how to [https://p5js.org/reference/p5/loadFont/ load] and [https://p5js.org/reference/p5/textFont/ display] fonts 👉 [[https://editor.p5js.org/leoscarin/sketches/cQhOMqzqt example]]<br /> * how to use &lt;code&gt;[https://p5js.org/reference/p5/random/ random()]&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/OmpPOf5WR example]]<br /> <br /> === Variables (medium) ===<br /> <br /> * how to run a ''modulo'' cycle (e.g. &lt;code&gt;x = (x + 1) % 400&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/L8lmpZ3Qz example]]<br /> <br /> === Conditions ===<br /> <br /> * how to write an ''if statement'' 👉 [[https://editor.p5js.org/leoscarin/sketches/HdyahrbaG example]]<br /> * how to write an ''if-else statement'' 👉 [[https://editor.p5js.org/leoscarin/sketches/u7IeNxlTE example]]<br /> * how to use ''booleans'' (&lt;code&gt;mouseIsPressed&lt;/code&gt;)<br /> * how to create booleans (e.g. &lt;code&gt;let state = false&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/EPsOQ5hwn example]]<br /> * how to use mouse coordinates as a condition (e.g. &lt;code&gt;if(mouseX &gt; width/2){...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/o7aJnB0Pf example]]<br /> <br /> === Interactive poem ===<br /> <br /> * how to combine ''conditions'' and ''text functions'' to create an interactive poem 👉 [[https://editor.p5js.org/enojeon2/sketches/YuuZ1BPOS example] by Inho, [https://editor.p5js.org/HasseVisser04/sketches/dS3B4P4eo example] by Hasse, [https://editor.p5js.org/FlorisKabk/sketches/FsiCeAOIQ example] by Floris, [https://wdka.codeberg.page/words-on-a-string/slide_11/ examples] by Leo]<br /> <br /> == Class #03 ==<br /> <br /> === Variables (Advanced) ===<br /> <br /> * how to create lists (e.g. &lt;code&gt;let list = [&quot;cat&quot;, &quot;dog&quot;, &quot;potato&quot;]&lt;/code&gt;)<br /> * how to use a variable from a list (e.g. &lt;code&gt;text(list[0], width/2, height/2)&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/sHFPkLjKg example]]<br /> * how to use an index variable (e.g. &lt;code&gt;list[i]&lt;/code&gt;)<br /> * how to load ''json'' datasets👉 [[https://editor.p5js.org/scarscarin/sketches/e5Wf3Kn_W example]]<br /> * how to create your own ''json'' dataset👉 [[https://editor.p5js.org/leoscarin/sketches/QiMkO0fn4 example]]<br /> <br /> === Functions (Advanced) ===<br /> <br /> * how to use &lt;code&gt;mouseClicked()&lt;/code&gt;, &lt;code&gt;keyPressed()&lt;/code&gt; and &lt;code&gt;keyReleased()&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/r1gEJ3BGp example]]<br /> * how to declare a new function (e.g. &lt;code&gt;function myFunction() {...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/nIY213a-Z example]]<br /> * how to use &lt;code&gt;createButton()&lt;/code&gt; and &lt;code&gt;''button''.'''mousePressed'''(''callback'')&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/5L4GLk0uT example]]<br /> <br /> === Loops ===<br /> <br /> * how to make a ''for loop'' (e.g. &lt;code&gt;for (x = 0; x &lt; width; x+= 50) {...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/covbcckcT example]]<br /> * how to use a ''for loop'' with a list (e.g. &lt;code&gt;for (''element'' of ''list'') {...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/_i41t7nza example]]<br /> <br /> === One-button Game ===<br /> <br /> * how to combine these to create a digital experience constrained to one button only 👉 [[https://editor.p5js.org/leoscarin/sketches/NyF6DESHc example] by Leo, [https://editor.p5js.org/vvvvvvv.q/sketches/mAG2D-wAi example] by Vanessa, Minjae, Anabel]<br /> <br /> == Class #04 ==<br /> <br /> === Buttons (P5) ===<br /> * how to create a button and make it clickable in P5 👉 [[https://editor.p5js.org/scarscarin/sketches/wRwjjqdGx example]<br /> * how to make a counter from the button 👉 [[https://editor.p5js.org/scarscarin/sketches/SnwSWylYj example]]<br /> * how to make conditional statements with the counter 👉 [[https://editor.p5js.org/scarscarin/sketches/MpEMwpxE5 example]]<br /> * how to use the counter for size values 👉 [[https://editor.p5js.org/scarscarin/sketches/BYIv100ZR example]]<br /> * how to map the counter to other ranges of values 👉 [[https://editor.p5js.org/scarscarin/sketches/H3cck39VP example]]<br /> * how to style a button 👉 [[https://editor.p5js.org/scarscarin/sketches/JraN0Ilj5 example]]<br /> <br /> === Text Inputs (P5) ===<br /> * how to create a text input and retrieve its value [[https://editor.p5js.org/scarscarin/sketches/MmDKL5DlX example]]<br /> * how to create an HTML element from a text input [[https://editor.p5js.org/scarscarin/sketches/fqBtc9Vg0 example]]<br /> <br /> === Chatbot ===<br /> * how this sketch works 👉 [[https://editor.p5js.org/scarscarin/sketches/w7vOMLsj1 chatdog (bare)]]<br /> * ... with some CSS knowledge, you also understand how this one works too 👉 [[https://editor.p5js.org/scarscarin/sketches/doJuXup6M chatdog (with css)]]<br /> <br /> == Class #05 ==<br /> <br /> === HTML ===<br /> * how HTML works [[https://website-house.netlify.app/ Website House]]<br /> * how to create a simple HTML document [[https://editor.p5js.org/scarscarin/sketches/VXE0gd7uD example]]<br /> * how to use media elements in HTML [[https://editor.p5js.org/scarscarin/sketches/BlXlracuC example]]<br /> <br /> === CSS ===<br /> <br /> === Coding environment ===<br /> * how to code in the P5 editor<br /> * how to code in a local code editor (VS Code, VS Codium, Pulsar, Brackets, Sublime, etc)<br /> * how to code in the [https://code.kabkimd.nl code.kabkimd.nl] editor</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding/Trajectory&diff=711 2025-10-22T07:46:28Z

<p>Leo: </p> <hr /> <div>&lt;span style=&quot;font-family: Georgia; color: magenta; font-size: 24pt;&quot;&gt;✨🌈 &lt;i&gt;do you know...&lt;/i&gt; 🌈✨&lt;/span&gt;<br /> <br /> == Class #01 ==<br /> <br /> === Interface ===<br /> <br /> * how to open P5<br /> * how to save and share a P5 sketch<br /> * how to upload it in Excalidraw<br /> <br /> === Functions (beginner) ===<br /> <br /> * the difference between &lt;code&gt;setup()&lt;/code&gt; and &lt;code&gt;draw()&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/5bCtRn_it example]]<br /> * how to use [https://p5js.org/reference/#Shape shape functions] 👉 [[https://editor.p5js.org/leoscarin/sketches/q1cTX8MPZ example]]<br /> * how to use [https://p5js.org/reference/#Setting color functions] 👉 [[https://editor.p5js.org/leoscarin/sketches/Foyl8ROcp example]]<br /> * how to use &lt;code&gt;[https://p5js.org/reference/p5/map/ map()]&lt;/code&gt; and &lt;code&gt;[https://p5js.org/reference/p5/sin/ sin()]&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/nAeX9poBL example]]<br /> <br /> === Variables (beginner) ===<br /> <br /> * how to use an ''environment variable'' (e.g. &lt;code&gt;width&lt;/code&gt;, &lt;code&gt;height&lt;/code&gt;, &lt;code&gt;mouseX&lt;/code&gt;, &lt;code&gt;mouseY&lt;/code&gt;, &lt;code&gt;frameCount&lt;/code&gt;, etc) 👉 [[https://editor.p5js.org/leoscarin/sketches/matnmaFaD example]]<br /> * how to declare a variable (e.g. &lt;code&gt;let x = 0&lt;/code&gt;) <br /> * how to update a variable (e.g. &lt;code&gt;x++&lt;/code&gt;, &lt;code&gt;x = x - 2&lt;/code&gt;, &lt;code&gt;x = mouseX&lt;/code&gt;, etc) 👉 [[https://editor.p5js.org/leoscarin/sketches/GzxZsviBH example]]<br /> * how to use variables as ''arguments'' of a function (e.g. &lt;code&gt;circle(mouseX, mouseY, s)&lt;/code&gt; )<br /> <br /> === Dynamic Portrait ===<br /> <br /> * how to use the previous concepts to make a ''dynamic portrait'' 👉 [[https://editor.p5js.org/noortaba/sketches/AlK95q2ak example] by Noor, [https://editor.p5js.org/lexitron/sketches/WUpKlCO12 example] by Alex, [https://editor.p5js.org/patriciasaez/sketches/OXPsvEydD example] by Patricia]<br /> <br /> == Class #02 ==<br /> <br /> === Functions (medium) ===<br /> <br /> * how to use [https://p5js.org/reference/#Typography text functions] 👉 [[https://editor.p5js.org/leoscarin/sketches/ZujpbMIHX example]]<br /> * how to [https://p5js.org/reference/p5/loadImage/ load] and [https://p5js.org/reference/p5/image/ display] images 👉 [[https://editor.p5js.org/leoscarin/sketches/ydcQKi2Fo example]]<br /> * how to [https://p5js.org/reference/p5/loadFont/ load] and [https://p5js.org/reference/p5/textFont/ display] fonts 👉 [[https://editor.p5js.org/leoscarin/sketches/cQhOMqzqt example]]<br /> * how to use &lt;code&gt;[https://p5js.org/reference/p5/random/ random()]&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/OmpPOf5WR example]]<br /> <br /> === Variables (medium) ===<br /> <br /> * how to run a ''modulo'' cycle (e.g. &lt;code&gt;x = (x + 1) % 400&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/L8lmpZ3Qz example]]<br /> <br /> === Conditions ===<br /> <br /> * how to write an ''if statement'' 👉 [[https://editor.p5js.org/leoscarin/sketches/HdyahrbaG example]]<br /> * how to write an ''if-else statement'' 👉 [[https://editor.p5js.org/leoscarin/sketches/u7IeNxlTE example]]<br /> * how to use ''booleans'' (&lt;code&gt;mouseIsPressed&lt;/code&gt;)<br /> * how to create booleans (e.g. &lt;code&gt;let state = false&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/EPsOQ5hwn example]]<br /> * how to use mouse coordinates as a condition (e.g. &lt;code&gt;if(mouseX &gt; width/2){...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/o7aJnB0Pf example]]<br /> <br /> === Interactive poem ===<br /> <br /> * how to combine ''conditions'' and ''text functions'' to create an interactive poem 👉 [[https://editor.p5js.org/enojeon2/sketches/YuuZ1BPOS example] by Inho, [https://editor.p5js.org/HasseVisser04/sketches/dS3B4P4eo example] by Hasse, [https://editor.p5js.org/FlorisKabk/sketches/FsiCeAOIQ example] by Floris, [https://wdka.codeberg.page/words-on-a-string/slide_11/ examples] by Leo]<br /> <br /> == Class #03 ==<br /> <br /> === Variables (Advanced) ===<br /> <br /> * how to create lists (e.g. &lt;code&gt;let list = [&quot;cat&quot;, &quot;dog&quot;, &quot;potato&quot;]&lt;/code&gt;)<br /> * how to use a variable from a list (e.g. &lt;code&gt;text(list[0], width/2, height/2)&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/sHFPkLjKg example]]<br /> * how to use an index variable (e.g. &lt;code&gt;list[i]&lt;/code&gt;)<br /> * how to load ''json'' datasets👉 [[https://editor.p5js.org/scarscarin/sketches/e5Wf3Kn_W example]]<br /> * how to create your own ''json'' dataset👉 [[https://editor.p5js.org/leoscarin/sketches/QiMkO0fn4 example]]<br /> <br /> === Functions (Advanced) ===<br /> <br /> * how to use &lt;code&gt;mouseClicked()&lt;/code&gt;, &lt;code&gt;keyPressed()&lt;/code&gt; and &lt;code&gt;keyReleased()&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/r1gEJ3BGp example]]<br /> * how to declare a new function (e.g. &lt;code&gt;function myFunction() {...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/nIY213a-Z example]]<br /> * how to use &lt;code&gt;createButton()&lt;/code&gt; and &lt;code&gt;''button''.'''mousePressed'''(''callback'')&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/5L4GLk0uT example]]<br /> <br /> === Loops ===<br /> <br /> * how to make a ''for loop'' (e.g. &lt;code&gt;for (x = 0; x &lt; width; x+= 50) {...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/covbcckcT example]]<br /> * how to use a ''for loop'' with a list (e.g. &lt;code&gt;for (''element'' of ''list'') {...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/_i41t7nza example]]<br /> <br /> === One-button Game ===<br /> <br /> * how to combine these to create a digital experience constrained to one button only 👉 [[https://editor.p5js.org/leoscarin/sketches/NyF6DESHc example] by Leo, [https://editor.p5js.org/vvvvvvv.q/sketches/mAG2D-wAi example] by Vanessa, Minjae, Anabel]<br /> <br /> == Class #04 ==<br /> <br /> === Buttons (P5) ===<br /> * how to create a button and make it clickable in P5 👉 [[https://editor.p5js.org/scarscarin/sketches/wRwjjqdGx example]<br /> * how to make a counter from the button 👉 [[https://editor.p5js.org/scarscarin/sketches/SnwSWylYj example]]<br /> * how to make conditional statements with the counter 👉 [[https://editor.p5js.org/scarscarin/sketches/MpEMwpxE5 example]]<br /> * how to use the counter for size values 👉 [[https://editor.p5js.org/scarscarin/sketches/BYIv100ZR example]]<br /> * how to map the counter to other ranges of values 👉 [[https://editor.p5js.org/scarscarin/sketches/H3cck39VP example]]<br /> * how to style a button 👉 [[https://editor.p5js.org/scarscarin/sketches/JraN0Ilj5 example]]<br /> <br /> === Text Inputs (P5) ===<br /> * how to create a text input and retrieve its value [[https://editor.p5js.org/scarscarin/sketches/MmDKL5DlX example]]<br /> * how to create an HTML element from a text input [[https://editor.p5js.org/scarscarin/sketches/fqBtc9Vg0 example]]<br /> <br /> === Chatbot ===<br /> * how this sketch works 👉 [[https://editor.p5js.org/scarscarin/sketches/w7vOMLsj1 chatdog (bare)]]<br /> * ... with some CSS knowledge, you also understand how this one works too 👉 [[https://editor.p5js.org/scarscarin/sketches/doJuXup6M chatdog (with css)]]<br /> <br /> == Class #05 ==<br /> <br /> === HTML ===<br /> * how HTML works [[https://website-house.netlify.app/ Website House]]<br /> * how to create a simple HTML document [[https://editor.p5js.org/scarscarin/sketches/VXE0gd7uD example]]<br /> * how to use media elements in HTML [[https://editor.p5js.org/scarscarin/sketches/BlXlracuC example]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding/Trajectory&diff=710 2025-10-22T07:31:51Z

<p>Leo: </p> <hr /> <div>&lt;span style=&quot;font-family: Georgia; color: magenta; font-size: 24pt;&quot;&gt;✨🌈 &lt;i&gt;do you know...&lt;/i&gt; 🌈✨&lt;/span&gt;<br /> <br /> == Class #01 ==<br /> <br /> === Interface ===<br /> <br /> * how to open P5<br /> * how to save and share a P5 sketch<br /> * how to upload it in Excalidraw<br /> <br /> === Functions (beginner) ===<br /> <br /> * the difference between &lt;code&gt;setup()&lt;/code&gt; and &lt;code&gt;draw()&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/5bCtRn_it example]]<br /> * how to use [https://p5js.org/reference/#Shape shape functions] 👉 [[https://editor.p5js.org/leoscarin/sketches/q1cTX8MPZ example]]<br /> * how to use [https://p5js.org/reference/#Setting color functions] 👉 [[https://editor.p5js.org/leoscarin/sketches/Foyl8ROcp example]]<br /> * how to use &lt;code&gt;[https://p5js.org/reference/p5/map/ map()]&lt;/code&gt; and &lt;code&gt;[https://p5js.org/reference/p5/sin/ sin()]&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/nAeX9poBL example]]<br /> <br /> === Variables (beginner) ===<br /> <br /> * how to use an ''environment variable'' (e.g. &lt;code&gt;width&lt;/code&gt;, &lt;code&gt;height&lt;/code&gt;, &lt;code&gt;mouseX&lt;/code&gt;, &lt;code&gt;mouseY&lt;/code&gt;, &lt;code&gt;frameCount&lt;/code&gt;, etc) 👉 [[https://editor.p5js.org/leoscarin/sketches/matnmaFaD example]]<br /> * how to declare a variable (e.g. &lt;code&gt;let x = 0&lt;/code&gt;) <br /> * how to update a variable (e.g. &lt;code&gt;x++&lt;/code&gt;, &lt;code&gt;x = x - 2&lt;/code&gt;, &lt;code&gt;x = mouseX&lt;/code&gt;, etc) 👉 [[https://editor.p5js.org/leoscarin/sketches/GzxZsviBH example]]<br /> * how to use variables as ''arguments'' of a function (e.g. &lt;code&gt;circle(mouseX, mouseY, s)&lt;/code&gt; )<br /> <br /> === Dynamic Portrait ===<br /> <br /> * how to use the previous concepts to make a ''dynamic portrait'' 👉 [[https://editor.p5js.org/noortaba/sketches/AlK95q2ak example] by Noor, [https://editor.p5js.org/lexitron/sketches/WUpKlCO12 example] by Alex, [https://editor.p5js.org/patriciasaez/sketches/OXPsvEydD example] by Patricia]<br /> <br /> == Class #02 ==<br /> <br /> === Functions (medium) ===<br /> <br /> * how to use [https://p5js.org/reference/#Typography text functions] 👉 [[https://editor.p5js.org/leoscarin/sketches/ZujpbMIHX example]]<br /> * how to [https://p5js.org/reference/p5/loadImage/ load] and [https://p5js.org/reference/p5/image/ display] images 👉 [[https://editor.p5js.org/leoscarin/sketches/ydcQKi2Fo example]]<br /> * how to [https://p5js.org/reference/p5/loadFont/ load] and [https://p5js.org/reference/p5/textFont/ display] fonts 👉 [[https://editor.p5js.org/leoscarin/sketches/cQhOMqzqt example]]<br /> * how to use &lt;code&gt;[https://p5js.org/reference/p5/random/ random()]&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/OmpPOf5WR example]]<br /> <br /> === Variables (medium) ===<br /> <br /> * how to run a ''modulo'' cycle (e.g. &lt;code&gt;x = (x + 1) % 400&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/L8lmpZ3Qz example]]<br /> <br /> === Conditions ===<br /> <br /> * how to write an ''if statement'' 👉 [[https://editor.p5js.org/leoscarin/sketches/HdyahrbaG example]]<br /> * how to write an ''if-else statement'' 👉 [[https://editor.p5js.org/leoscarin/sketches/u7IeNxlTE example]]<br /> * how to use ''booleans'' (&lt;code&gt;mouseIsPressed&lt;/code&gt;)<br /> * how to create booleans (e.g. &lt;code&gt;let state = false&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/EPsOQ5hwn example]]<br /> * how to use mouse coordinates as a condition (e.g. &lt;code&gt;if(mouseX &gt; width/2){...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/o7aJnB0Pf example]]<br /> <br /> === Interactive poem ===<br /> <br /> * how to combine ''conditions'' and ''text functions'' to create an interactive poem 👉 [[https://editor.p5js.org/enojeon2/sketches/YuuZ1BPOS example] by Inho, [https://editor.p5js.org/HasseVisser04/sketches/dS3B4P4eo example] by Hasse, [https://editor.p5js.org/FlorisKabk/sketches/FsiCeAOIQ example] by Floris, [https://wdka.codeberg.page/words-on-a-string/slide_11/ examples] by Leo]<br /> <br /> == Class #03 ==<br /> <br /> === Variables (Advanced) ===<br /> <br /> * how to create lists (e.g. &lt;code&gt;let list = [&quot;cat&quot;, &quot;dog&quot;, &quot;potato&quot;]&lt;/code&gt;)<br /> * how to use a variable from a list (e.g. &lt;code&gt;text(list[0], width/2, height/2)&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/sHFPkLjKg example]]<br /> * how to use an index variable (e.g. &lt;code&gt;list[i]&lt;/code&gt;)<br /> * how to load ''json'' datasets👉 [[https://editor.p5js.org/scarscarin/sketches/e5Wf3Kn_W example]]<br /> * how to create your own ''json'' dataset👉 [[https://editor.p5js.org/leoscarin/sketches/QiMkO0fn4 example]]<br /> <br /> === Functions (Advanced) ===<br /> <br /> * how to use &lt;code&gt;mouseClicked()&lt;/code&gt;, &lt;code&gt;keyPressed()&lt;/code&gt; and &lt;code&gt;keyReleased()&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/r1gEJ3BGp example]]<br /> * how to declare a new function (e.g. &lt;code&gt;function myFunction() {...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/nIY213a-Z example]]<br /> * how to use &lt;code&gt;createButton()&lt;/code&gt; and &lt;code&gt;''button''.'''mousePressed'''(''callback'')&lt;/code&gt; 👉 [[https://editor.p5js.org/leoscarin/sketches/5L4GLk0uT example]]<br /> <br /> === Loops ===<br /> <br /> * how to make a ''for loop'' (e.g. &lt;code&gt;for (x = 0; x &lt; width; x+= 50) {...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/covbcckcT example]]<br /> * how to use a ''for loop'' with a list (e.g. &lt;code&gt;for (''element'' of ''list'') {...}&lt;/code&gt;) 👉 [[https://editor.p5js.org/leoscarin/sketches/_i41t7nza example]]<br /> <br /> === One-button Game ===<br /> <br /> * how to combine these to create a digital experience constrained to one button only 👉 [[https://editor.p5js.org/leoscarin/sketches/NyF6DESHc example] by Leo, [https://editor.p5js.org/vvvvvvv.q/sketches/mAG2D-wAi example] by Vanessa, Minjae, Anabel]<br /> <br /> == Class #04 ==<br /> <br /> === Buttons (P5) ===<br /> * how to create a button and make it clickable in P5 👉 [[https://editor.p5js.org/scarscarin/sketches/wRwjjqdGx example]<br /> * how to make a counter from the button 👉 [[https://editor.p5js.org/scarscarin/sketches/SnwSWylYj example]]<br /> * how to make conditional statements with the counter 👉 [[https://editor.p5js.org/scarscarin/sketches/MpEMwpxE5 example]]<br /> * how to use the counter for size values 👉 [[https://editor.p5js.org/scarscarin/sketches/BYIv100ZR example]]<br /> * how to map the counter to other ranges of values 👉 [[https://editor.p5js.org/scarscarin/sketches/H3cck39VP example]]<br /> * how to style a button 👉 [[https://editor.p5js.org/scarscarin/sketches/JraN0Ilj5 example]]<br /> <br /> === Text Inputs (P5) ===<br /> * how to create a text input and retrieve its value [[https://editor.p5js.org/scarscarin/sketches/MmDKL5DlX example]]<br /> * how to create an HTML element from a text input [[https://editor.p5js.org/scarscarin/sketches/fqBtc9Vg0 example]]<br /> <br /> === Chatbot ===<br /> * how this sketch works 👉 [[https://editor.p5js.org/scarscarin/sketches/w7vOMLsj1 chatdog (bare)]]<br /> * ... with some CSS knowledge, you also understand how this one works too 👉 [[https://editor.p5js.org/scarscarin/sketches/doJuXup6M chatdog (with css)]]<br /> <br /> == Class #05 ==<br /> <br /> === HTML ===<br /> * how HTML works [[https://website-house.netlify.app/ Website House]<br /> * how to create a simple HTML document [[https://editor.p5js.org/scarscarin/sketches/VXE0gd7uD example]]<br /> * how to use media elements in HTML [[</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding&diff=707 2025-10-21T07:24:00Z

<p>Leo: </p> <hr /> <div>In this course code becomes both the tool and the craft that supports your creative practice. When designing interactive media, code exists at various levels: as the engine of your work, as the material forming and informing your process, and/or as the critical subject of your research.<br /> <br /> This course introduces the different languages and practices of Creative Coding, with a method that is applied, creative, and critical. The classes are designed to encourage collaborative, open-ended, inclusive, and sustainable approaches to computing in art and design.<br /> <br /> &lt;u&gt;No previous knowledge of coding is required&lt;/u&gt;<br /> [[File:Cat.png|thumb]]<br /> <br /> == Links &amp; Tools ==<br /> [https://wb.kabkimd.nl Excalidraw Whiteboard]<br /> <br /> [https://editor.p5js.org P5js Editor]<br /> <br /> [https://kabkimd.nl I/M/D Pages] &amp; [https://code.kabkimd.nl CodeDot]<br /> <br /> [https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing Booking Form]<br /> <br /> [[/Trajectory| 🗺️ Trajectory]]<br /> <br /> = Classes =<br /> &lt;h4&gt;Class #01&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Intro to Creative Coding &lt;br/&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting animation in P5js &lt;br /&gt;<br /> &lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Dynamic portrait|Dynamic Portrait]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #02&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Scripting interaction in P5js &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Interactive poem|Interactive Poem]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #03&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Conditional Design &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Conditionals and loops &lt;br /&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/One-button game|One-button Game]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #04&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #05&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Forms, buttons, menus in HTML/CSS &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #06&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Hypertext design in HTML/CSS &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Browser-based story|Browser-based story]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #07&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #08&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Audiovisual programming in TouchDesigner &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Illuminated Interventions|Illuminated Interventions]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #09&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Computer vision in TouchDesigner &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Digital Theremin|Digital Theremin]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #10&lt;/h4&gt;<br /> Guest Lecture with Pawel<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #11&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Machine Learning and Data Degrowth &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: transformers in Python &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[Creative Coding/Experimental Chatbot|Experimental Chatbot]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #12&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #13&lt;/h4&gt;<br /> Course Finals<br /> <br /> &lt;h4&gt;Class #14&lt;/h4&gt;<br /> Site visit at [https://v2.nl V2_Lab]<br /> <br /> = Lecturer =<br /> Leo Scarin | l.scarin@kabk.nl<br /> <br /> [[Category:Year 1]]<br /> [[Category:Semester 1]]<br /> [[Category:Creative Technologies]]<br /> [[Category:2025/26]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding&diff=706 2025-10-21T07:22:51Z

<p>Leo: </p> <hr /> <div>In this course code becomes both the tool and the craft that supports your creative practice. When designing interactive media, code exists at various levels: as the engine of your work, as the material forming and informing your process, and/or as the critical subject of your research.<br /> <br /> This course introduces the different languages and practices of Creative Coding, with a method that is applied, creative, and critical. The classes are designed to encourage collaborative, open-ended, inclusive, and sustainable approaches to computing in art and design.<br /> <br /> &lt;u&gt;No previous knowledge of coding is required&lt;/u&gt;<br /> [[File:Cat.png|thumb]]<br /> <br /> == Links &amp; Tools ==<br /> [https://wb.kabkimd.nl Excalidraw Whiteboard]<br /> <br /> [https://editor.p5js.org P5js Editor]<br /> <br /> [https://kabkimd.nl I/M/D Pages] &amp; [https://code.kabkimd.nl CodeDot]<br /> <br /> [https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing Booking Form]<br /> <br /> [[/Trajectory| 🗺️ Trajectory]]<br /> <br /> = Classes =<br /> &lt;h4&gt;Class #01&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Intro to Creative Coding &lt;br/&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: [[/Scripting animation in P5js|Scripting animation in P5js]] &lt;br/&gt;<br /> &lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Dynamic portrait|Dynamic Portrait]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #02&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: [[/Scripting Interaction in P5js | Scripting interaction in P5js]] &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Interactive poem|Interactive Poem]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #03&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Conditional Design &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: [[/Conditionals and loops|Conditionals and loops]] &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/One-button game|One-button Game]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #04&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #05&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Forms, buttons, menus in HTML/CSS &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #06&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Hypertext design in HTML/CSS &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[/Browser-based story|Browser-based story]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #07&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #08&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Audiovisual programming in TouchDesigner &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Illuminated Interventions|Illuminated Interventions]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #09&lt;/h4&gt;<br /> &lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: Computer vision in TouchDesigner &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Exercise'''&lt;/span&gt;: [[/Digital Theremin|Digital Theremin]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #10&lt;/h4&gt;<br /> Guest Lecture with Pawel<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #11&lt;/h4&gt;<br /> &lt;span style=&quot;color:red&quot;&gt;'''Lecture'''&lt;/span&gt;: Machine Learning and Data Degrowth &lt;br/&gt;&lt;span style=&quot;color:blue&quot;&gt;'''Tutorial'''&lt;/span&gt;: transformers in Python &lt;br/&gt;&lt;span style=&quot;color:green&quot;&gt;'''Assignment'''&lt;/span&gt;: [[Creative Coding/Experimental Chatbot|Experimental Chatbot]]<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #12&lt;/h4&gt;<br /> Group &amp; individual check-in ([https://docs.google.com/spreadsheets/d/1GUcWZ3QT_z2DlxUpW_ojUZJqbVOlMhlbVcRq4gmCtr4/edit?usp=sharing book your slot])<br /> &lt;br/&gt;<br /> <br /> &lt;h4&gt;Class #13&lt;/h4&gt;<br /> Course Finals<br /> <br /> &lt;h4&gt;Class #14&lt;/h4&gt;<br /> Site visit at [https://v2.nl V2_Lab]<br /> <br /> = Lecturer =<br /> Leo Scarin | l.scarin@kabk.nl<br /> <br /> [[Category:Year 1]]<br /> [[Category:Semester 1]]<br /> [[Category:Creative Technologies]]<br /> [[Category:2025/26]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding/Browser-based_story&diff=705 2025-10-21T07:21:50Z

<p>Leo: </p> <hr /> <div>Using the hypertext tools we learned in class, '''write''', '''design''', and '''code''' a '''browser-based story'''.<br /> <br /> The story, its relation to the browser medium, and the emerging interaction with the reader are all features you should author yourself.<br /> <br /> '''Deliverable''': share the browser-story in your kabkimd webpage!<br /> <br /> '''Deadlines'''<br /> <br /> * First deadline: 📅 13/10/2025 (in-class)<br /> * Second deadline: 📅 17/10/2025 (midterms)<br /> * Last deadline: 📅 08/12/2025 (course finals)<br /> <br /> [[Category:Creative Coding]][[Category:Assignments]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Creative_Coding/Browser-based_story&diff=704 2025-10-21T07:21:34Z

<p>Leo: </p> <hr /> <div>During the class, '''write''', '''design''', and '''code''' a '''browser-based story'''.<br /> <br /> The story, its relation to the browser medium, and the emerging interaction with the reader are all features you should author yourself.<br /> <br /> '''Deliverable''': share the browser-story in your kabkimd webpage!<br /> <br /> '''Deadlines'''<br /> <br /> * First deadline: 📅 13/10/2025 (in-class)<br /> * Second deadline: 📅 17/10/2025 (midterms)<br /> * Last deadline: 📅 08/12/2025 (course finals)<br /> <br /> [[Category:Creative Coding]][[Category:Assignments]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=How_to_use_a_wiki&diff=615 2025-10-08T19:10:21Z

<p>Leo: </p> <hr /> <div>&lt;html&gt;<br /> &lt;style&gt;<br /> blockquote{ <br /> display: block;<br /> margin-top: 1em;<br /> margin-bottom: 1em;<br /> margin-left: 40px;<br /> margin-right: 40px;<br /> padding: 10px;<br /> border: 1px dotted black;<br /> }<br /> &lt;/style&gt;<br /> &lt;/html&gt;<br /> <br /> &lt;blockquote cite=&quot;https://en.wikipedia.org/wiki/Wiki&quot;&gt; A [https://en.wikipedia.org/wiki/Wiki wiki] is a form of hypertext publication on the internet, collaboratively edited and managed by its audience directly through a web browser. A typical wiki contains multiple pages that can either be edited by the public or limited to use within an organization for maintaining its internal knowledge base. &lt;/blockquote&gt;<br /> &lt;p style=&quot;text-align: right; font-style: italic&quot;&gt; from Wikipedia's article on wiki&lt;/p&gt;<br /> <br /> = I/M/D wiki =<br /> <br /> I/M/D is a community that's full of knowledge, skills, and stories to tell. The &lt;b&gt;wiki&lt;/b&gt;, here, becomes not only a tool for publishing and preserving this knowledge, but an artistic medium to play and learn with. The question, developing this forward, is what and how knowledge is generated this way.<br /> <br /> = How to use =<br /> <br /> This wiki is not made from scratch. It's using the [https://www.mediawiki.org/wiki/MediaWiki MediaWiki] software. Navigation, editing, and customisation are the same as any MediaWiki-powered sites such as Wikipedia.<br /> <br /> == Navigate ==<br /> Check Mediawiki's [https://www.mediawiki.org/wiki/Help:Navigation Help:Navigation] page.<br /> <br /> '''Sidebar:'''<br /> :The sidebar gives you access to important pages in the wiki (main page, recent changes, upload file). You need to be logged in to use all the options.<br /> '''Log in:'''<br /> :Log in from the profile icon in the bottom-right corner. Use the credentials you got from Leo. To reset your password, go to [https://code.kabkimd.nl code.kabkimd.nl]<br /> '''Pages'''<br /> :Pages come in different flavours. Some are important pages in the main page, some are sub-pages, some are user pages, some are category pages. The url of the page tells you!<br /> <br /> to be continued...</div>

Leo https://wiki.kabkimd.nl/index.php?title=User:Floris&diff=614 2025-10-08T18:10:06Z

<p>Leo: </p> <hr /> <div>&lt;html&gt; <br /> &lt;iframe width=&quot;400&quot; height=&quot;400&quot; src=&quot;https://editor.p5js.org/FlorisKabk/full/FsiCeAOIQ&quot;&gt;&lt;/iframe&gt;<br /> &lt;/html&gt;<br /> =Notes=<br /> [[/Biatsh]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=File:Screenshot_2025-10-08_185437.png&diff=613 2025-10-08T17:13:06Z

<p>Leo: </p> <hr /> <div></div>

Leo https://wiki.kabkimd.nl/index.php?title=File:Profile_icon.png&diff=612 2025-10-08T16:58:21Z

<p>Leo: </p> <hr /> <div></div>

Leo https://wiki.kabkimd.nl/index.php?title=How_to_use_a_wiki&diff=611 2025-10-08T16:54:15Z

<p>Leo: </p> <hr /> <div>&lt;html&gt;<br /> &lt;style&gt;<br /> blockquote{ <br /> display: block;<br /> margin-top: 1em;<br /> margin-bottom: 1em;<br /> margin-left: 40px;<br /> margin-right: 40px;<br /> padding: 10px;<br /> border: 1px dotted black;<br /> }<br /> &lt;/style&gt;<br /> &lt;/html&gt;<br /> <br /> &lt;blockquote cite=&quot;https://en.wikipedia.org/wiki/Wiki&quot;&gt; A [https://en.wikipedia.org/wiki/Wiki wiki] is a form of hypertext publication on the internet, collaboratively edited and managed by its audience directly through a web browser. A typical wiki contains multiple pages that can either be edited by the public or limited to use within an organization for maintaining its internal knowledge base. &lt;/blockquote&gt;<br /> &lt;p style=&quot;text-align: right; font-style: italic&quot;&gt; from Wikipedia's article on wiki&lt;/p&gt;<br /> <br /> = I/M/D wiki =<br /> <br /> I/M/D is a community that's full of knowledge, skills, and stories to tell. The &lt;b&gt;wiki&lt;/b&gt;, here, becomes not only a tool for publishing and preserving this knowledge, but an artistic medium to play and learn with. The question, developing this forward, is what and how knowledge is generated this way.<br /> <br /> = How to use =<br /> <br /> This wiki is not made from scratch. It's using the [https://www.mediawiki.org/wiki/MediaWiki MediaWiki] software. Navigation, editing, and customisation are the same as any MediaWiki-powered sites such as Wikipedia.<br /> <br /> The sidebar gives you access to important pages in the wiki such as recent changes or upload file. MediaWiki requires you to log in before seeing all of the sidebar options.<br /> Links (often called tabs) which relate to the page currently displayed: its associated discussion page, the version history, and – most notably – the edit link.<br /> User links; as an anonymous user, you'll see a link to create an account or log in. As a logged-in user you have a collection of personal links, including ones to your user page and preferences.<br /> <br /> == Navigate ==<br /> Check Mediawiki's [https://www.mediawiki.org/wiki/Help:Navigation Help:Navigation] page.<br /> <br /> '''Sidebar:'''<br /> :The sidebar gives you access to important pages in the wiki (main page, recent changes, upload file). You need to be logged in to use all the options.<br /> '''Log in:'''<br /> :Log in from the profile icon in the bottom-right corner. Use the credentials you got from Leo. To reset your password, go to [https://code.kabkimd.nl code.kabkimd.nl]<br /> '''Pages'''<br /> :Pages come in different flavours. Some are important pages in the main page, some are sub-pages, some are user pages, some are category pages. The url of the page tells you!<br /> '''</div>

Leo https://wiki.kabkimd.nl/index.php?title=How_to_use_a_wiki&diff=610 2025-10-08T16:33:30Z

<p>Leo: Created page with &quot;&lt;html&gt; &lt;style&gt; blockquote{ display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; padding: 10px; border: 1px dotted black; } &lt;/style&gt; &lt;/html&gt; &lt;blockquote cite=&quot;https://en.wikipedia.org/wiki/Wiki&quot;&gt; A [https://en.wikipedia.org/wiki/Wiki wiki] is a form of hypertext publication on the internet, collaboratively edited and managed by its audience directly through a web browser. A typical...&quot;</p> <hr /> <div>&lt;html&gt;<br /> &lt;style&gt;<br /> blockquote{ <br /> display: block;<br /> margin-top: 1em;<br /> margin-bottom: 1em;<br /> margin-left: 40px;<br /> margin-right: 40px;<br /> padding: 10px;<br /> border: 1px dotted black;<br /> }<br /> &lt;/style&gt;<br /> &lt;/html&gt;<br /> <br /> &lt;blockquote cite=&quot;https://en.wikipedia.org/wiki/Wiki&quot;&gt; A [https://en.wikipedia.org/wiki/Wiki wiki] is a form of hypertext publication on the internet, collaboratively edited and managed by its audience directly through a web browser. A typical wiki contains multiple pages that can either be edited by the public or limited to use within an organization for maintaining its internal knowledge base. &lt;/blockquote&gt;<br /> &lt;p style=&quot;text-align: right; font-style: italic&quot;&gt; from Wikipedia's article on wiki&lt;/p&gt;<br /> <br /> = I/M/D wiki =<br /> <br /> I/M/D is a community that's full of knowledge, skills, and stories to tell. The &lt;b&gt;wiki&lt;/b&gt;, here, becomes not only a tool for publishing and preserving this knowledge, but an artistic medium to play and learn with. The question, developing this forward, is what and how knowledge is generated this way.<br /> <br /> = How to use =</div>

Leo https://wiki.kabkimd.nl/index.php?title=Main_Page&diff=609 2025-10-08T16:18:10Z

<p>Leo: </p> <hr /> <div><br /> == 🔵 [[User Pages]] 🔵 ==<br /> <br /> == Courses ==<br /> 🧵 [[Creative Coding]]<br /> <br /> 📃 [[Individual Study Track (IST)]]<br /> <br /> 📌 [[Study coaching]]<br /> <br /> == Facilities ==<br /> <br /> 📚 [[Libraries in The Hague]]<br /> <br /> 🪵 [[Workshops in The Hague]]<br /> <br /> 🔨 [[Inventory]]<br /> <br /> 🍜 [[I/M/Digesting]]<br /> <br /> == How to ==<br /> :[[How to use a wiki]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Main_Page&diff=608 2025-10-08T07:31:52Z

<p>Leo: </p> <hr /> <div><br /> == 🔵 [[User Pages]] 🔵 ==<br /> <br /> == Courses ==<br /> 🧵 [[Creative Coding]]<br /> <br /> 📃 [[Individual Study Track (IST)]]<br /> <br /> 📌 [[Study coaching]]<br /> <br /> == Facilities ==<br /> <br /> 📚 [[Libraries in The Hague]]<br /> <br /> 🪵 [[Workshops in The Hague]]<br /> <br /> 🔨 [[Inventory]]<br /> <br /> 🍜 [[I/M/Digesting]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Main_Page&diff=607 2025-10-08T07:31:10Z

<p>Leo: </p> <hr /> <div><br /> == 🔵 [[User Pages]] ==<br /> <br /> == Courses ==<br /> 🧵 [[Creative Coding]]<br /> <br /> 📃 [[Individual Study Track (IST)]]<br /> <br /> 📌 [[Study coaching]]<br /> <br /> == Facilities ==<br /> <br /> 📚 [[Libraries in The Hague]]<br /> <br /> 🪵 [[Workshops in The Hague]]<br /> <br /> 🔨 [[Inventory]]<br /> <br /> 🍜 [[I/M/Digesting]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=User:Leonardo&diff=567 2025-10-06T09:04:11Z

<p>Leo: </p> <hr /> <div>Leo loves wiki pages hates fascists<br /> <br /> :His face is at [https://leoscarin.com/face leoscarin.com/face] <br /> <br /> https://statics.cedscdn.it/photos/MED_LOW/28/90/8512890_01123917_gerry.jpg this is Gerry Scotti. not Leo.<br /> <br /> =Codes=<br /> :[[/p5js demos]]<br /> :[https://codeberg.org/scar git repositories]<br /> <br /> =Notes=<br /> =Readings=<br /> =Resources=<br /> :[https://www.naiveweekly.com/ Naive Weekly]<br /> :[https://knowingmachines.org Knowing Machines]<br /> :[https://jamesbridle.com/writing James Bridle's writings]<br /> <br /> [[/p5js demos | look at my p5js demos]]<br /> <br /> &lt;html&gt; &lt;img width=&quot;400&quot; src=&quot;&quot;&gt; &lt;/html&gt;</div>

Leo https://wiki.kabkimd.nl/index.php?title=User:Leonardo&diff=564 2025-10-06T09:03:42Z

<p>Leo: </p> <hr /> <div>Leo loves wiki pages hates fascists<br /> <br /> :His face is at [https://leoscarin.com/face leoscarin.com/face] <br /> <br /> https://statics.cedscdn.it/photos/MED_LOW/28/90/8512890_01123917_gerry.jpgthis is Gerry Scotti. not Leo.<br /> <br /> =Codes=<br /> :[[/p5js demos]]<br /> :[https://codeberg.org/scar git repositories]<br /> <br /> =Notes=<br /> =Readings=<br /> =Resources=<br /> :[https://www.naiveweekly.com/ Naive Weekly]<br /> :[https://knowingmachines.org Knowing Machines]<br /> :[https://jamesbridle.com/writing James Bridle's writings]<br /> <br /> [[/p5js demos | look at my p5js demos]]<br /> <br /> &lt;html&gt; &lt;img width=&quot;400&quot; src=&quot;&quot;&gt; &lt;/html&gt;</div>

Leo https://wiki.kabkimd.nl/index.php?title=User:Leonardo&diff=550 2025-10-06T08:56:28Z

<p>Leo: </p> <hr /> <div>Leo loves wiki pages hates fascists<br /> <br /> :His face is at [https://leoscarin.com/face leoscarin.com/face] <br /> <br /> https://statics.cedscdn.it/photos/MED_LOW/28/90/8512890_01123917_gerry.jpg this is Gerry Scotti. not Leo.<br /> <br /> =Codes=<br /> :[[/p5js demos]]<br /> :[https://codeberg.org/scar git repositories]<br /> <br /> =Notes=<br /> =Readings=<br /> =Resources=<br /> :[https://www.naiveweekly.com/ Naive Weekly]<br /> :[https://knowingmachines.org Knowing Machines]<br /> :[https://jamesbridle.com/writing James Bridle's writings]</div>

Leo https://wiki.kabkimd.nl/index.php?title=User:Leonardo&diff=547 2025-10-06T08:55:45Z

<p>Leo: </p> <hr /> <div>&lt;html&gt;<br /> &lt;div style=&quot;width:100%; height:100vh; background-image:url(&quot;https://statics.cedscdn.it/photos/MED_LOW/28/90/8512890_01123917_gerry.jpg&quot;)&quot;&gt;something&lt;/div&gt;<br /> <br /> &lt;/html&gt;<br /> <br /> <br /> Leo loves wiki pages hates fascists<br /> <br /> :His face is at [https://leoscarin.com/face leoscarin.com/face] <br /> <br /> https://statics.cedscdn.it/photos/MED_LOW/28/90/8512890_01123917_gerry.jpg this is Gerry Scotti. not Leo.<br /> <br /> =Codes=<br /> :[[/p5js demos]]<br /> :[https://codeberg.org/scar git repositories]<br /> <br /> =Notes=<br /> =Readings=<br /> =Resources=<br /> :[https://www.naiveweekly.com/ Naive Weekly]<br /> :[https://knowingmachines.org Knowing Machines]<br /> :[https://jamesbridle.com/writing James Bridle's writings]</div>

Leo https://wiki.kabkimd.nl/index.php?title=User:Leonardo&diff=546 2025-10-06T08:55:08Z

<p>Leo: </p> <hr /> <div>&lt;html&gt;<br /> &lt;div style=&quot;width:100%; height:100vh; background: green&quot;&gt;something&lt;/div&gt;<br /> <br /> &lt;/html&gt;<br /> <br /> <br /> Leo loves wiki pages hates fascists<br /> <br /> :His face is at [https://leoscarin.com/face leoscarin.com/face] <br /> <br /> https://statics.cedscdn.it/photos/MED_LOW/28/90/8512890_01123917_gerry.jpg this is Gerry Scotti. not Leo.<br /> <br /> =Codes=<br /> :[[/p5js demos]]<br /> :[https://codeberg.org/scar git repositories]<br /> <br /> =Notes=<br /> =Readings=<br /> =Resources=<br /> :[https://www.naiveweekly.com/ Naive Weekly]<br /> :[https://knowingmachines.org Knowing Machines]<br /> :[https://jamesbridle.com/writing James Bridle's writings]</div>

Leo https://wiki.kabkimd.nl/index.php?title=User:Leonardo/newpage&diff=522 2025-10-06T08:48:20Z

<p>Leo: Created page with &quot;Category:notes from leopard&quot;</p> <hr /> <div>[[Category:notes from leopard]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Template:Html&diff=505 2025-10-04T18:54:11Z

<p>Leo: Blanked the page</p> <hr /> <div></div>

Leo https://wiki.kabkimd.nl/index.php?title=Template:Html&diff=504 2025-10-04T18:53:11Z

<p>Leo: </p> <hr /> <div>&lt;includeonly&gt;{{#tag:html|{{{1|}}}}}&lt;/includeonly&gt;<br /> &lt;noinclude&gt;<br /> Usage:<br /> {{Html|&lt;iframe src=&quot;https://www.youtube.com/embed/dQw4w9WgXcQ&quot; width=&quot;800&quot; height=&quot;450&quot;&gt;&lt;/iframe&gt;}}<br /> &lt;/noinclude&gt;</div>

Leo https://wiki.kabkimd.nl/index.php?title=Template:Html&diff=503 2025-10-04T18:51:01Z

<p>Leo: </p> <hr /> <div>&lt;includeonly&gt;&lt;html&gt;{{{1|}}}&lt;/html&gt;&lt;/includeonly&gt;</div>

Leo https://wiki.kabkimd.nl/index.php?title=Template:Html&diff=502 2025-10-04T18:49:56Z

<p>Leo: </p> <hr /> <div>&lt;includeonly&gt;<br /> &lt;html&gt;<br /> {{{src}}}<br /> &lt;/html&gt;<br /> &lt;/includeonly&gt;</div>

Leo https://wiki.kabkimd.nl/index.php?title=Template:Html&diff=501 2025-10-04T18:49:15Z

<p>Leo: </p> <hr /> <div>&lt;includeonly&gt;<br /> &lt;html&gt;<br /> {{{}}}<br /> &lt;/html&gt;<br /> &lt;/includeonly&gt;</div>

Leo https://wiki.kabkimd.nl/index.php?title=Template:Iframe&diff=500 2025-10-04T18:48:58Z

<p>Leo: Leo moved page Template:Iframe to Template:Html</p> <hr /> <div>#REDIRECT [[Template:Html]]</div>

Leo https://wiki.kabkimd.nl/index.php?title=Template:Html&diff=499 2025-10-04T18:48:58Z

<p>Leo: Leo moved page Template:Iframe to Template:Html</p> <hr /> <div>&lt;includeonly&gt;<br /> &lt;html&gt;<br /> &lt;iframe <br /> src=&quot;{{{src}}}&quot; <br /> width=&quot;{{{width|400}}}&quot; <br /> height=&quot;{{{height|400}}}&quot; <br /> frameborder=&quot;{{{frameborder|0}}}&quot; <br /> allowfullscreen<br /> style=&quot;border:0;&quot;&gt;<br /> &lt;/iframe&gt;<br /> &lt;/html&gt;<br /> &lt;/includeonly&gt;</div>

Leo https://wiki.kabkimd.nl/index.php?title=User:Leonardo/p5js_demos&diff=498 2025-10-04T18:47:06Z

<p>Leo: </p> <hr /> <div>&lt;html&gt;&lt;iframe width=&quot;800&quot; height=&quot;800&quot; src=&quot;https://editor.p5js.org/scarscarin/full/-v1inlFmD&quot;&gt;&lt;/iframe&gt;&lt;/html&gt;</div>

Leo https://wiki.kabkimd.nl/index.php?title=User:Leonardo/p5js_demos&diff=497 2025-10-04T18:39:24Z

<p>Leo: Created page with &quot;{{iframe|src:https://leoscarin.com}}&quot;</p> <hr /> <div>{{iframe|src:https://leoscarin.com}}</div>

Leo https://wiki.kabkimd.nl/index.php?title=Template:Html&diff=496 2025-10-04T18:37:18Z

<p>Leo: Created page with &quot;&lt;includeonly&gt; &lt;html&gt; &lt;iframe src=&quot;{{{src}}}&quot; width=&quot;{{{width|400}}}&quot; height=&quot;{{{height|400}}}&quot; frameborder=&quot;{{{frameborder|0}}}&quot; allowfullscreen style=&quot;border:0;&quot;&gt; &lt;/iframe&gt; &lt;/html&gt; &lt;/includeonly&gt;&quot;</p> <hr /> <div>&lt;includeonly&gt;<br /> &lt;html&gt;<br /> &lt;iframe <br /> src=&quot;{{{src}}}&quot; <br /> width=&quot;{{{width|400}}}&quot; <br /> height=&quot;{{{height|400}}}&quot; <br /> frameborder=&quot;{{{frameborder|0}}}&quot; <br /> allowfullscreen<br /> style=&quot;border:0;&quot;&gt;<br /> &lt;/iframe&gt;<br /> &lt;/html&gt;<br /> &lt;/includeonly&gt;</div>

Leo https://wiki.kabkimd.nl/index.php?title=User:Leonardo&diff=495 2025-10-04T18:33:35Z

<p>Leo: </p> <hr /> <div>Leo loves wiki pages hates fascists<br /> <br /> :His face is at [https://leoscarin.com/face leoscarin.com/face] <br /> <br /> https://statics.cedscdn.it/photos/MED_LOW/28/90/8512890_01123917_gerry.jpg this is Gerry Scotti. not Leo.<br /> <br /> =Codes=<br /> :[[/p5js demos]]<br /> :[https://codeberg.org/scar git repositories]<br /> <br /> =Notes=<br /> =Readings=<br /> =Resources=<br /> :[https://www.naiveweekly.com/ Naive Weekly]<br /> :[https://knowingmachines.org Knowing Machines]<br /> :[https://jamesbridle.com/writing James Bridle's writings]</div>

Leo https://wiki.kabkimd.nl/index.php?title=User:Leonardo&diff=494 2025-10-04T18:33:21Z

<p>Leo: </p> <hr /> <div>Leo loves wiki pages hates fascists<br /> <br /> :His face is at [https://leoscarin.com/face leoscarin.com/face] <br /> <br /> https://statics.cedscdn.it/photos/MED_LOW/28/90/8512890_01123917_gerry.jpg this is Gerry Scotti. <br /> <br /> =Codes=<br /> :[[/p5js demos]]<br /> :[https://codeberg.org/scar git repositories]<br /> <br /> =Notes=<br /> =Readings=<br /> =Resources=<br /> :[https://www.naiveweekly.com/ Naive Weekly]<br /> :[https://knowingmachines.org Knowing Machines]<br /> :[https://jamesbridle.com/writing James Bridle's writings]</div>

Leo