Processing is a langage for creating visual art with code. This February Martin Pirson and I organised a working session to gather the community in Brussels during which Frederik Vanhoutte accepted to come to present some of his work. We were kindly hosted by Hackerspace Brussels .
Here are some of the ressources and exercises we played around with.
Processing Community Day Brussels
Editor: P5.js online editor - please make an account
Offical ressources: P5.js website / P5.js reference / P5.js examples
Artistic ressources: Generative Design P5.js / OpenProcessing
Tutorials: Coordinate System and Shapes & Interactivity / P5.js cheat sheet pdf
Most Sketches ressources based on Andreas Refsgaard course on Machine Learning for Designers andreasrefsgaard.dk ——> Machine Learning and P5.js
Basics
Exercise: Draw a face using the simple in 1_1_Basic_Shapes. Remember to save it!
Exercise: Color your face using the 1_2_Basic_Shapes_colors. Remember to save it!
Interactivity
3_1_Interactivity_Mouse (press mouse to draw)
3_2_Interactivity_Keys (press ‘r’, ‘g’ or ‘b’)
Math
4_4_Math_Map (controlled by mouse position)
Exercise: Control some aspect of your face from the first exercise with mouse, keyboard, noise, random, sin and/or map
Machine Learning
ml5js templates, examples and exercises
1) Train a classification algorithm
Simple template: Webcam classifier
Advanced example: Trainable Camera
Exercise: Train a classifier to distinguish between two different classes. Make something happen (visuals or sound) for one or both the classes.
2) MobileNet pretrained classification
Simple template: Mobilenet pretrained classification
Advanced example: Classification to speech
Exercise: Pick an object (or a few objects) for the model to recognise. Make something happen when your object(s) gets detected.
3) Train a regression algorithm
Simple template: Webcam regressor
Advanced example: Playback rate camera
Exercise: Train the regressor and use the continuous output value to control something.
4) PoseNet pose detection
Simple template: Webcam PoseNet
Advanced example: Draw with your nose
Exercise: Get the values of one or more bodyparts and use them to control something.
Other ml5js examples
Webcam classifier w. 4 classes
Webcam classifier with loaded images
word2vec (and other examples) on ml5js.org
Other Face detection examples
Face drawing +speech detection
emotion face detection from Spencer Lee James