Better PoseNet examples

[lindapaiste]

Fixes #1367

In the examples:

• Replaced the "runner" image with one that gets a more accurate detection result.
• Added part name labels to the single image example in both plain JS and p5.js.
• After discussion with @joeyklee, the labels can be toggled off using checkboxes.
• Changed the for loops in drawKeypoints and drawSkeleton to forEach loops. I find this clearer but I could be wrong. Maybe @shiffman or someone who works with students can weigh in on what is most beginner-friendly.
• Use img.width and img.height instead of hard-coded numbers.
• Write "Pose Detected" to the status HTML element on success.
• Fixed some eslint errors: prefer destructing, prefer const, variable not declared.
• Removed requestAnimationFrame in the single image example so that the drawing only occurs when receiving results or changing checkboxes. (issue #1366). Used noLoop() and redraw() in the p5.js example to do the same.

In the model:

• Changed the poseNet function to return a Promise when there is no callback. This might be considered breaking since it changes behavior. But it's probably considered "fixing".

[tlsaeger]

Love the additions with the checkmarks etc. I do teach with ml5, mostly people who have never coded before. Because the simple for loop is a little bit more present I like to explain it using simple for. If I'm looking forward I think forEach might be the better alternative, because it is way faster to type and it also makes more sense in a linguistic way, then the abstract for loop. If we change it here, we might need to change it everywhere. @shiffman what do you think?

[shiffman]

Hi hi hi hi! @lindapaiste thank you for this amazing and incredible work on ml5! For the JavaScript examples I am very much in favor of forEach() however for beginner creative coders coming from p5.js, using any kind of higher order array function (especially with the => syntax) can be confusing and intimidating. So for the p5 ones, I would suggest either a plain for loop or else a for of loop which I teach to beginners about how to loop through an array:

for (let pose of poses) {
}

[lindapaiste]

@tlsaeger @shiffman thanks for the feedback. It sounds like I should revert back to the let i = 0 style loops for the p5 examples. I never write that sort of loop anymore so it looks kind of sloppy to me. But when I think about it, that sort of loop is what everyone learns first so I understand how it's more beginner friendly.

When I see big red underlines in the code I have a compulsion to fix them! There were 6 eslint violations in the original drawSkeleton function. If we think this code is code is good then we should disable the rules which encourage me to change it 😝. I can put in some rule overrides which are specific to the /examples/p5js directory.

I noticed that p5 uses i++ so I will definitely disable no-plusplus here.

There are 3x prefer const violations which are easy for me to fix, but maybe we want to use let for p5 examples if we think that users don't understand the difference between let and const?

I'm thinking that destructuring should not be used in the p5 examples (but should be okay in plain JS). The prefer-destructuring rule wants me to rewrite let skeleton = poses[i].skeleton; as const { skeleton } = poses[i];.

Also the for (let pose of poses) syntax is banned