<aside> <img src="/icons/book-closed_purple.svg" alt="/icons/book-closed_purple.svg" width="40px" />

Agenda

</aside>

Introductions

About me

Dora Do - creative technologist / educator - doradocodes.com

Learning outcomes

By the end of the workshop, participants will:

• Understand what machine learning is in creative terms
• Know what ml5.js is and how to use it
• Use three ML models (FaceMesh, Handpose, PoseNet) to track human features
• Customize visuals based on face, hand, or body movement

What is machine learning?

• Machine learning is teaching a computer to recognize patterns from examples

• An analogy: you are teaching a friend to recognize a cat using lots of pictures of cats

• Teachable Machine is a tool that makes creating machine learning models easily

• It’s not magic — it’s patterns and probability

What is ml5?

https://ml5js.org/

• A JavaScript library that makes machine learning easy and friendly.
• Built on top of TensorFlow.js.
• Made for artists, designers, and beginners.

Setup

1. Add <script src="<https://unpkg.com/ml5@1/dist/ml5.min.js>"></script> to the index.html file.
2. Add an image file to give to the model to detect objects.
3. Add this starter code:

function preload() {
  classifier = ml5.imageClassifier("MobileNet");
  img = loadImage("bubbles.jpg");
}

function setup() {
  createCanvas(400, 500);
  classifier.classify(img, gotResult);
}

function draw() {
  clear();
  image(img, 0, 0, width, height);
  fill(255, 0, 0);
  textSize(14);
  text(displayText, 20, 30);
}

function gotResult(results) {
  console.log(results);
  displayText = '';
  for (let i = 0; i < results.length; i++) {
    displayText += results[i].label + '\\n';
  }
}

OR duplicate this starter code: https://editor.p5js.org/doradocodes/sketches/IK5ru2Hi3

Console output

https://editor.p5js.org/doradocodes/full/IK5ru2Hi3