How to shift an array of posenet points?

137
May 01, 2021, at 4:30 PM

I'm a beginner at using p5.js but I'm currently currently attempting to create a brush sketch like this ellipse brush

though using computer vision & posenet nose tracking (essentially a nose brush)

The problem is, while it doesn't state any errors, it doesn't work.

This is my code for the ellipse brush without posenet & camera vision

let mousePosition = [];
function setup() { 
  createCanvas(400, 400);
} 
function draw() { 
  background(0);
  
//Every frame of animation
  //storing the mouse position in an array
  mousePosition.push({x: mouseX, y: mouseY});
  
  //shift the array so that the older ones deletes itself
  if(mousePosition.length > 100) mousePosition.shift();
  //loop
  for(let i = 0; i < mousePosition.length; i++) {
    //if the variable is less than 50, loop function
    let x = mousePosition[i].x;
    let y = mousePosition[i].y;
    ellipse(x, y, r,r);
    var r = 20
  }
}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

and this is the one with computer vision & nose tracking w/ posenet

let capture;
let poseNet;
let pose;
let text;
let pg;
let nosePosition = []

function setup() {
  createCanvas(700, 700);
  capture = createCapture(VIDEO);
  capture.hide();
  pg = createGraphics(width, height);
  poseNet = ml5.poseNet(capture, modelLoaded);
  poseNet.on('pose', gotPoses);
  // background(255)
  // color picker
}
function gotPoses(poses) {
  //console.log(poses);
  if (poses.length > 0) {
  pose = poses[0].pose;
  }
}
function modelLoaded() {
  console.log('poseNet.ready');
}
function draw() {
  translate(width, 0); // move to far corner
  scale(-1.0, 1.0); // flip x-axis backwards
  image(capture, 0, 0, width, width * capture.height /
  capture.width);
  image(pg, 0, 0, width, height);
  if (pose) {
nosePosition.push({x:pose.nose.x ,y: pose.nose.y});
    
 if(nosePosition.length > 100) nosePosition.shift(); {
}
    for(let i = 0; i < nosePosition.length; i++) {
    //if the variable is less than 50, loop function
    let x = nosePosition[i].x;
    let y = nosePosition[i].y;
    pg.ellipse(x, y, i/5,i/5);
      
    var r = 20 //how big the ellipse is
    pg.fill(255)
    
    pg.noStroke();

  }
}
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>
    
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

The second is essentially very similar to the first, as I've only changed the mouseX/Ys into the posenet Nose keypoint.

Any insight/solution would be highly appreciated!

Thank you :)

Answer 1

You're shifting properly, but you forgot to clear the pg graphic, which is kind of like forgetting to put background(0) in your original sketch. So instead of drawing all the ellipses on a blank background, you're drawing them on top of the previous frame.

Adding pg.clear() anywhere in draw() after you display pg on the canvas (image(pg, ...)) and before you draw the ellipses (for (...) {... ellipse(nosePosition[i].x...)}) should do the trick. Here's where I put it:

image(pg, 0, 0, width, height);
pg.clear();//HERE
if (pose) {//...
Rent Charter Buses Company
READ ALSO
Cannot validate part of string in database

Cannot validate part of string in database

Working on a booking project; I want to check if the seat that the user has inputted is already taken on the database; if it has, then the query to add the booking to the database shouldn't be executedOtherwise, if it hasn't been taken, then the query can be executed

116
check checkboxes for values that exists in a list

check checkboxes for values that exists in a list

I am trying to check checkboxes that have values in a list of strings returned from a ModelForm class

120
How to convert pdf file to QR Code in Android

How to convert pdf file to QR Code in Android

Im working on a project to share a pdf file among users using QR CodeWhen the user scan the QR Code , they will get the same pdf file as the sender

139