Coding is fun!

/*

 * 👋 Hello! This is an ml5.js example made and shared with ❤️.

 * Learn more about the ml5.js project: https://ml5js.org/

 * ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md

 *

 * This example demonstrates hand tracking on live video through ml5.handPose.

 */

​

let handPose;

let video;

let hands = [];

let font;

​

function preload() {

  // Load the handPose model

  handPose = ml5.handPose();

}

​

function setup() {

  createCanvas(640, 480);

  // Create the webcam video and hide it

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

  // start detecting hands from the webcam video

  handPose.detectStart(video, gotHands);

  textFont("Cherry Bomb One");

   drawingContext.shadowOffsetX = 2;

  drawingContext.shadowOffsetY = -2;

  drawingContext.shadowBlur = 5;

  drawingContext.shadowColor = 'rgb(0,0,0)'

}

​

function draw() {

  image(video, 0, 0, width, height);

​

  for (let i = 0; i < hands.length; i++) {

    let hand = hands[i];

    if (hand.keypoints.length > 19) {

      drawTextLine(

        createVector(hand.keypoints[8].x, hand.keypoints[8].y),

        createVector(hand.keypoints[4].x, hand.keypoints[4].y),

        " and FUN ", 0

      );

​

    drawTextLine(

      createVector(hand.keypoints[12].x, hand.keypoints[12].y),

      createVector(hand.keypoints[8].x, hand.keypoints[8].y),

      " SIMPLE ",1

    );

​

    drawTextLine(

      createVector(hand.keypoints[16].x, hand.keypoints[16].y),

      createVector(hand.keypoints[12].x, hand.keypoints[12].y),

      " is ",2

    );

​

    drawTextLine(

      createVector(hand.keypoints[20].x, hand.keypoints[20].y),

      createVector(hand.keypoints[16].x, hand.keypoints[16].y),

      " CODING ",3

    );

       }

  }

}

​

// Callback function for when handPose outputs data

function gotHands(results) {

  // save the output to the hands variable

  hands = results;

}

​

function drawTextLine(start_point, end_point, _text, _c) {

  textSize(15);

  fill(255)

​

​

  let w = textWidth(_text);

  let l = start_point.dist(end_point);

  let scale_factor = (l - w) / (_text.length - 1);

  let mid_point = p5.Vector.lerp(start_point, end_point, 0.5);

  let angle = atan2(end_point.y - start_point.y, end_point.x - start_point.x);

​

  push();

  translate(mid_point.x, mid_point.y);

  rotate(angle);

  let index = -l / 2;

  for (let i = 0; i < _text.length; i++) {

    text(_text[i], index, 0);

    index += textWidth(_text[i]) + scale_factor;

  }

​

  pop();

}

​