working on the coding train's cocossd tutorial, I cannot seem to find a way to get the squares around the detected things.

Here is the js code:

let img;
let detector;

function preload() {
  img = loadImage("images/penguin.jpg");
  detector = ml5.objectDetector("cocossd");
}

function gotDetections(error, results) {
  if (error) {
    console.error(error);
  }
  console.log(results);
  for (let i = 0; i < results.length; i  ) {
    let object = results[i];
    console.log(object.x, object.y, object.width, object.height);
    stroke("green");
    strokeWeight(4);
    noFill();
    rect(object.x, object.y, object.width, object.height);
    noStroke();
    fill(255);
    textSize(24);
    text(object.label, object.x   10, object.y   24);
  }
}

function setup() {
  createCanvas(640, 480);
  image(img, 0, 0, width, height);
  detector.detect(img, gotDetections);
}

I've got the image of the penguine on the screen, where it should be on the canvas, and I have the object.x, object.y, object.width, object.height being console.logged correctly, I just cannot figure out why no combination of the drawing stuff in gotDetections function is not working.

I have tried every combination, I have these two CDN's in the html body

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

I'm not sure what I'm doing wrong at this point.

CodePudding user response：

Changing the canvas size to match the image size worked reliably on my system. I downloaded a small penguin image from the internet and it correctly identified it as a bird and framed it with a green box.

function setup() {
  createCanvas(img.width, img.height);
  image(img, 0, 0);
  detector.detect(img, gotDetections);
}