HACKING & 5D INTERACTION & MAGIC
In dit skills blok onderzoek je hoe je
![]()
Reference Processing Syntax
Libraries & Examples
Libraries can expand the functionality of processing and let you do cool things that processing normally can’t do. It can unlock worlds of really powerfull codes so i can really recommend browsing some libraries and checking out the basic examples to see if there is something you can use.
>HOW TO INSTALL A LIBRARY:
In the Processing app go to Sketch -> Import Library... -> Manage Libraries...
Here you can search for libraries. Select the library you want to install and press Install. You may need to restart Processing after install.
![]()
Brief 1
Het blok begint met een serie hands-on workshops waarbij je met betekenisvolle datastromen van knoppen en sensoren gaat experimenteren door middel van Arduino, Processing en AI enhanced coderen.
![]()
In dit skills blok onderzoek je hoe je
interactieve en generatieve tools in kan zetten
in de fysieke wereld om je verhaal te vertellen.
workshop 11: Processing
+ LLM supercharging
+ LLM supercharging
![]()
Mail Ymer:
![]()
Mail Cyanne:
![]()
1/2 PROCESSING TOOLKIT
Mail Ymer:
Mail Cyanne:
1/2 PROCESSING TOOLKIT
Reference Processing Syntax
In this link you can find all the syntax (the processing language) and simple examples of usage.
Here you can easily look up how a function is used. So this is nice to bookmark and keep at hand while coding.
︎︎︎https://processing.org/reference/
Here you can easily look up how a function is used. So this is nice to bookmark and keep at hand while coding.
︎︎︎https://processing.org/reference/
Libraries & Examples
Libraries can expand the functionality of processing and let you do cool things that processing normally can’t do. It can unlock worlds of really powerfull codes so i can really recommend browsing some libraries and checking out the basic examples to see if there is something you can use. >HOW TO INSTALL A LIBRARY:
In the Processing app go to Sketch -> Import Library... -> Manage Libraries...
Here you can search for libraries. Select the library you want to install and press Install. You may need to restart Processing after install.
>HOW TO FIND EXAMPLES OF A NEW LIBRARY:
In the Processing app go to File -> Examples...
Mostly when you install a new library it comes in Contributed Libraries. Here you can find some basic usages of the systems of that library.
In the Processing app go to File -> Examples...
Mostly when you install a new library it comes in Contributed Libraries. Here you can find some basic usages of the systems of that library.
Sublime Text Processing Autocomplete
Sublime text with autocomplete all the known processing language syntax helping you code much faster and not have to memorize all the different syntaxes.- Install Sublime Text: If you haven’t already, download and install Sublime Text on your Mac.
- Install Package Control: Package Control is a package manager for Sublime Text that makes it easy to install plugins. You can install it by following the instructions on this website.
- Install Processing Plugin: Once you have Package Control installed, you can install the Processing plugin. To do this:
- Open Sublime Text.
- Press
Cmd + Shift + Pto open the command palette. - Type
Install Packageand pressEnter. - In the search box that appears, type
Processingand pressEnterto install the Processing plugin.
4. In Processing go to tools -> install “processing-java”
And now you should be able to run Processing in sublime text using autocomplete.
to run a sketch use “command” + B (for build).
Some basic tips to work with the Processing sketch:
︎︎︎ Use // to uncomment(disable) parts of the code to see what changes.
︎︎︎ Use println(“whatever you want to print goes here”); to get insights into how the code works. Change numbers to see what they do in the code.
︎︎︎ If the code gives an error that its missing a library, check how to install a library on the top of this page.
2/2 LLM SUPERCHARGING
And now you should be able to run Processing in sublime text using autocomplete.
to run a sketch use “command” + B (for build).
Some basic tips to work with the Processing sketch:
︎︎︎ Use // to uncomment(disable) parts of the code to see what changes.
︎︎︎ Use println(“whatever you want to print goes here”); to get insights into how the code works. Change numbers to see what they do in the code.
︎︎︎ If the code gives an error that its missing a library, check how to install a library on the top of this page.
2/2 LLM SUPERCHARGING
LLM (Large Language Model) are Ai’s trained on loads of text. They are extremely powerfull with code. They can help you Sketch very fast and help you quickely get to see some stuff in action, Also they can explain how things work and help you as a tutor. They all are a bit different so sometimes its worth trying different ones.
︎︎︎https://chatgpt.com/
Edge browser chat (chatGpt4) (is called Copilot)
︎︎︎https://www.microsoft.com/nl-nl/edge/download?form=MA13FJ
Hugging Chat - (port different llms):
︎︎︎https://huggingface.co/chat/
Google Gemini:
︎︎︎https://gemini.google.com/app
TIP: Call it a Processing sketch. Use English as it is mostly trained on these data sets.
![Creates Life]()
![Display Text + Use Database]()
![Display Text + Scrape]()
![Draw Shapes]()
![Moves Along]()
![Play Sound]()
![Record Sound]()
![Scrapes Online]()
![Takes Picture]()
![]()
During this class we will be experimenting with the powers of code. Forget about the arduino for now, and focus on what you can do with Processing. You are free to go any direction with Processing and all the tools described above.
Do a lot of small experiments! Make seperate saves of all the different things so you can return to them later.
In the Drive link below are a bunch of starting points. You are free to use a starting point and starting messing around from there or go rogue and start with an LLM see if you can generate something that you can use.
We will start showing the results of our experimentations to the rest of the class an hour before the end of class.
So at 11:30 & 15:30.
TIP: Try to figure out what sub mechanisms are needed for your goal.
and tackle all of the sub usages one by one so that its easier to know what works and what does not.
What can really help is knowing what each piece of code does and only after that you string a bunch of workings together.
Example: first figure out how it shows an image, then how to measure when you press the space bar ,then generate a random number and meusure that. and once you have all the seperate parts you can string them together to make it change the image when you press a button.
︎︎︎https://drive.google.com/drive/folders/1EGPaOyPFFdbDCedt7zotk25Z7ihMbGnq?usp=sharing
(You can also work with the Oracle Processing code)
Download this folder: ︎︎︎ www.rb.gy/w2or8n
List of LLM’s you can use ✨
ChatGpt:︎︎︎https://chatgpt.com/
Edge browser chat (chatGpt4) (is called Copilot)
︎︎︎https://www.microsoft.com/nl-nl/edge/download?form=MA13FJ
Hugging Chat - (port different llms):
︎︎︎https://huggingface.co/chat/
Google Gemini:
︎︎︎https://gemini.google.com/app
TIP: Call it a Processing sketch. Use English as it is mostly trained on these data sets.
_ASSIGNMENT_ 06-05-2024
> Experimentation time 🎉 <
During this class we will be experimenting with the powers of code. Forget about the arduino for now, and focus on what you can do with Processing. You are free to go any direction with Processing and all the tools described above.
Do a lot of small experiments! Make seperate saves of all the different things so you can return to them later.
In the Drive link below are a bunch of starting points. You are free to use a starting point and starting messing around from there or go rogue and start with an LLM see if you can generate something that you can use.
We will start showing the results of our experimentations to the rest of the class an hour before the end of class.
So at 11:30 & 15:30.
TIP: Try to figure out what sub mechanisms are needed for your goal.
and tackle all of the sub usages one by one so that its easier to know what works and what does not.
What can really help is knowing what each piece of code does and only after that you string a bunch of workings together.
Example: first figure out how it shows an image, then how to measure when you press the space bar ,then generate a random number and meusure that. and once you have all the seperate parts you can string them together to make it change the image when you press a button.
︎︎︎https://drive.google.com/drive/folders/1EGPaOyPFFdbDCedt7zotk25Z7ihMbGnq?usp=sharing
(You can also work with the Oracle Processing code)
Download this folder: ︎︎︎ www.rb.gy/w2or8n
Brief 1
Het blok begint met een serie hands-on workshops waarbij je met betekenisvolle datastromen van knoppen en sensoren gaat experimenteren door middel van Arduino, Processing en AI enhanced coderen.
Uiteindelijk maak je een interactief werk waar je deze skills inzet om jouw verhaal te vertellen en versterken.
Hacking als werkwijze
Sommigen van jullie denken misschien dat je geen "technologie" gebruikt in je praktijk, maar dat doen we allemaal. Elke vorm van communicatie is een vorm van technologie. Hacken gaat over het gebruiken van onze creativiteit om deze technieken en technologieën te verkennen, te begrijpen en op een intentionele manier opnieuw toe te passen.
In dit blok hacken we interacties en systemen om ons heen, om te begrijpen hoe ze werken maar ook hoe ze voor jouw project kunnen werken. We claimen interacties terug, waardoor machtsdynamieken, alien aspecten en onverwachte magische werkingen van technologie centraal staan.
15 april (Ymer en Cyanne) - Introductie interactie en hacking
Een introductie in interactie, ontwerp en hacking door Telemagic
22 april (Cyanne) - Workshop 1: Arduino + button wiring 101
Hoe werkt een arduino? En hoe sluit je knoppen en sensoren hierop aan? Tijdens deze workshop soldeer je resistors aan je knop, en sluit je deze aan op de Arduino. Ook wordt uitgelegd hoe de Makey Makey (andere microcontroller) in te zetten is binnen projecten als toetsenbord.
6 Mei (Ymer) - Workshop 2: Basic introduction to Processing
In deze workshop leer je de basis van coderen in Processing. De knop die je hebt aangesloten in de vorige les ga je gebruiken om mee te interacteren. Aan de hand van voorbeelden maak je tijdens deze workshop een orakelende code, die met een druk op de knop nieuwe beelden en teksten laat zien. De voorbeelden zitten vol met simpele code structuren die zorgen dat je eindeloos verschillende uitkomsten kan genereren.
13 Mei (Ymer) - Workshop 3: AI enhanced LLm powered coding
Deze workshop start met de arduino, de knop en Processing – maar met hulp van AI assistentie ga je vrij schetsen. Large language models zijn heel erg handig om snel ideeën mee uit te werken, maar ze kunnen je ook helpen met het aansluiten van sensoren en het maken van complexe circuits. Je onderzoekt in deze workshop hoe je AI als assistent maar ook als co-creator kan inzetten. Tijdens deze workshop kan je vrij werken en experimenteren met verschillende sensor technologieën.
22 Mei (Cyanne) - Workshop 4: Embedding Streams and Finding Meaning
Hoe je kan omgaan met ontwerp en storytelling in het maken van een interactie. Onze eerder gemaakte interactieve circuits op de Arduino zijn het beginpunt voor deze les.
Hoe kan je een grafische laag, fysieke vorm of experimentele interface maken - die bijdraagt aan de immersie en daadkracht van wat jij wilt vertellen. Door kleine oefeningen prototype je hoe inhoud, interactie en vorm samen kunnen komen.
Hierbij worden diverse handige technieken behandeld zoals: 3D ontwerpen, printen, houtsnijden en lasersnijden bij het maken van op maat gemaakte behuizingen, om zo ook in de fysieke wereld een vorm te geven aan je project.
Op dit moment geven we een nieuwe opdracht uit: brief 2.
27 Mei (Ymer) - Coaching
3 Juni (Cyanne) - Coaching
11 Juni: Beoordeling (Ymer + Cyanne)
Sommigen van jullie denken misschien dat je geen "technologie" gebruikt in je praktijk, maar dat doen we allemaal. Elke vorm van communicatie is een vorm van technologie. Hacken gaat over het gebruiken van onze creativiteit om deze technieken en technologieën te verkennen, te begrijpen en op een intentionele manier opnieuw toe te passen.
In dit blok hacken we interacties en systemen om ons heen, om te begrijpen hoe ze werken maar ook hoe ze voor jouw project kunnen werken. We claimen interacties terug, waardoor machtsdynamieken, alien aspecten en onverwachte magische werkingen van technologie centraal staan.
Planning
15 april (Ymer en Cyanne) - Introductie interactie en hacking
Een introductie in interactie, ontwerp en hacking door Telemagic
22 april (Cyanne) - Workshop 1: Arduino + button wiring 101
Hoe werkt een arduino? En hoe sluit je knoppen en sensoren hierop aan? Tijdens deze workshop soldeer je resistors aan je knop, en sluit je deze aan op de Arduino. Ook wordt uitgelegd hoe de Makey Makey (andere microcontroller) in te zetten is binnen projecten als toetsenbord.
6 Mei (Ymer) - Workshop 2: Basic introduction to Processing
In deze workshop leer je de basis van coderen in Processing. De knop die je hebt aangesloten in de vorige les ga je gebruiken om mee te interacteren. Aan de hand van voorbeelden maak je tijdens deze workshop een orakelende code, die met een druk op de knop nieuwe beelden en teksten laat zien. De voorbeelden zitten vol met simpele code structuren die zorgen dat je eindeloos verschillende uitkomsten kan genereren.
13 Mei (Ymer) - Workshop 3: AI enhanced LLm powered coding
Deze workshop start met de arduino, de knop en Processing – maar met hulp van AI assistentie ga je vrij schetsen. Large language models zijn heel erg handig om snel ideeën mee uit te werken, maar ze kunnen je ook helpen met het aansluiten van sensoren en het maken van complexe circuits. Je onderzoekt in deze workshop hoe je AI als assistent maar ook als co-creator kan inzetten. Tijdens deze workshop kan je vrij werken en experimenteren met verschillende sensor technologieën.
22 Mei (Cyanne) - Workshop 4: Embedding Streams and Finding Meaning
Hoe je kan omgaan met ontwerp en storytelling in het maken van een interactie. Onze eerder gemaakte interactieve circuits op de Arduino zijn het beginpunt voor deze les.
Hoe kan je een grafische laag, fysieke vorm of experimentele interface maken - die bijdraagt aan de immersie en daadkracht van wat jij wilt vertellen. Door kleine oefeningen prototype je hoe inhoud, interactie en vorm samen kunnen komen.
Hierbij worden diverse handige technieken behandeld zoals: 3D ontwerpen, printen, houtsnijden en lasersnijden bij het maken van op maat gemaakte behuizingen, om zo ook in de fysieke wereld een vorm te geven aan je project.
Op dit moment geven we een nieuwe opdracht uit: brief 2.
27 Mei (Ymer) - Coaching
3 Juni (Cyanne) - Coaching
11 Juni: Beoordeling (Ymer + Cyanne)
Materiaal
- Arduino Uno R3 met USB kabel a €11.95
- Arcadeknop (roze, geel, rood, of groen) a €1,95
- Aansluit draadjes a €2,95
- Sensor naar keuze die je interessant lijkt a ca. €3
Kies iets wat je in een project zou willen gebruiken. Aanraders: afstandssensor, force sensor, tiltsensor, lichtsensor, temperatuursensor (NTC), infrarood-sensor + infrarood-zender (IR LED), magneetsensor (reed switch).
We beginnen met de arcade knop, dus je mag dit ook later in het blok aanschaffen!
Gebruik je liever een andere simpelere microcontroller? Overweeg de Makey Makey, deze gebruiken we in de eerste workshop - deze werkt direct als een toetsenbord op de computer.
https://hackerstore.nl/Artikel/435
