Processing Community Day Brussels


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



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!



3_1_Interactivity_Mouse (press mouse to draw)

3_2_Interactivity_Keys (press ‘r’, ‘g’ or ‘b’)





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

Webcam classifier + image

Webcam classifier + sound

Webcam classifier + filter

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

ImageNet list of classes

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

YOLO object detection

Webcam classifier w. 4 classes

Webcam classifier with loaded images

word2vec (and other examples) on ml5js.org

Other Face detection examples

Bonne année

Face drawing +speech detection

emotion face detection from Spencer Lee James

Martin Pirson instagram

Guillaume Slizewicz twitter

Guillaume Slizewicz instagram