This was so hard to load! So I ended up having issues loading the background music. Originally I was going to have the goat/dinosaur sound interrupt the nice music, but for whatever reason the larger sound file was not found. I always got the Error 404 message… I still included it in the zip file, but honestly, I settled for the sound playing with the sprites.
I thought challenging myself with creating sprites would up the difficulty since you can no longer use radius as a measurement.
The sounds get bugged at times, but it works most of the time. I also started playing around with the background as another way of interaction. So the background squares appear/fade based on your nose location.
This is where my project is linked
This is my script.js:
console.log(“ml5 version”, ml5.version);
let cam;
let poseNet;
let poses = [];
let noseX, noseY;
let dinosaurs = [];
var dino;
let goats = [];
var goat;
function preload()
{
// load images
dino = loadImage(“dino.png”);
goat = loadImage(“goat.png”);
}
function setup() {
createCanvas(640,480);
background(“lavender”);
// loadImage();
// createImg();
cam = createCapture(VIDEO);
cam.size(640,480);
cam.hide();
soundFormats(‘mp3’, ‘m4a’);
song = loadSound(‘dino.mp3’)
moo = loadSound(‘goat.m4a’)
// soundtrack = loadSound(‘bendsound-buddy.mp3’);
//poseNet
poseNet = ml5.poseNet(cam,modelReady);
poseNet.on(‘pose’, function(results){
poses = results;
} );
}
function modelReady() {
console.log(“Model Loaded!!!!”);
}
function draw() {
// image(cam,0,0); //vidObj,x,y,(W),(h)
background(“lavender”);
// soundtrack.play();
let r1 = map(noseX, 0, width, 0, height);
let r2 = height – r1;
// class Square {
// constructor(x,y){
// this.x = x;
// this.y = y;
// this.width = random(20,100);
// this.height = random(10,150);
// this.r = random(255);
// this.g = random(255);
// this.b = random(255);
// }
// }
fill(66, 206, 244, r1);
rect(0 + r1 / 2, 0, r1, r1);
fill(244, 220, 65, r2);
rect(200 – r2 / 2, 0, r2, r2);
fill(44, 22, 65, r1);
rect(400 – r1 / 2, 300, r1, r1);
fill(44, 220, 165, r2);
rect(600 – r2 / 2, 100, r2, r2);
fill(144, 220, 265, r1);
rect(300 – r1 / 2, 100, r1, r1);
fill(144, 0, 65, r2);
rect(0 – r2 / 2, 300, r2, r2);
fill(144, 220, 65, r1);
rect(500 – r1 / 2, 0, r1, r1);
fill(244, 22, 0, r1);
rect(500 – r1 / 2, 400, r1, r1);
fill(244, 0, 65, r2);
rect(300 – r2 / 2, 0, r2, r2);
if (random(1) < 0.10) { // only 10%
dinosaurs.push( new Dinosaur(width/2, height) );
}
// update & display
for (let i=0; i<dinosaurs.length; i++) {
let p = dinosaurs[i];
p.move();
// p.fall();
p.updateLifespan();
p.checkEdges();
p.checkInteraction(noseX, noseY);
p.display();
}
// remove dinosaurs if done!
for (let i = dinosaurs.length-1; i >= 0; i–) {
let p = dinosaurs[i];
if ( p.isDone ) {
dinosaurs.splice(i, 1);
}
}
// limit the number of dinosaurs
while (dinosaurs.length > 7) {
dinosaurs.splice(0, 1); //(index, howMany)
}
// check the number of dinosaurs
fill(255);
text( dinosaurs.length, 10, 20 );
//Goats
if (random(1) < 0.10) { // only 10%
goats.push( new Goat(width/2, height) );
}
// update & display
for (let i=0; i<goats.length; i++) {
let w = goats[i];
w.move();
// p.fall();
w.updateLifespan();
w.checkEdges();
w.checkInteraction(noseX, noseY);
w.display();
}
//Goats
for (let i = goats.length-1; i >= 0; i–) {
let w = goats[i];
if ( w.isDone ) {
goats.splice(i, 1);
}
}
// limit the number of goats
while (goats.length > 5) {
goats.splice(0, 1); //(index, howMany)
}
// check the number of goats
fill(0);
text( goats.length, 10, 200 );
for (let i = 0; i < poses.length; i++) {
let pose = poses[i].pose;
// console.log(poses[i].pose.keypoints);
for (let k = 0; k < pose.keypoints.length; k++) {
// console.log(pose.keypoints[k]);
let p = pose.keypoints[k];
if(p.part == “nose”){
noseX = p.position.x;
noseY = p.position.y;
noStroke();
fill(0,0,255);
ellipse(noseX, noseY, 10, 10);
//console.log(p);
}
// text(p.part, x+15,y+0);
}
}
}
class Dinosaur {
constructor(x, y) {
this.x = x;
this.y = y;
this.xSpd = random(-2, 2);
this.ySpd = random(-5, -3);
this.rad = dino.width ;
// this.r = random(255);
// this.g = random(255);
// this.b = random(255);
this.isDone = false;
this.lifespan = 10.0; // 100%
this.lifeReduction = random(0.001, 0.010); // 0.1% to 1%
}
updateLifespan() {
if (this.lifespan < 0.0) {
this.lifespan = 0.0;
this.isDone = true;
} else {
this.lifespan -= this.lifeReduction;
}
}
// fall() {
// this.ySpd += 0.03;
// }
checkInteraction(x, y) {
let distance = dist(this.x, this.y, x, y); //(x1, y1, x2, y2)
if (distance < this.rad) {
// in the area
// this.r = 255;
// this.g = 255;
// this.b = 0;
song.play();
this.isDone = true
} else {
// out of area
// this.r = 255;
// this.g = 255;
// this.b = 255;
song.stop();
}
}
move() {
this.x += this.xSpd; // this.x = this.x + this.xSpd;
this.y += this.ySpd;
}
checkEdges() {
if (this.x < 0 || this.x > width) {
this.isDone = true;
}
if (this.y < 0 || this.y > height) {
this.isDone = true;
}
}
display() {
push();
noStroke();
// fill(this.r, this.g, this.b, 255);
// ellipse(this.x, this.y, this.rad*2 , this.rad*2);
image(dino, this.x, this.y);
pop();
}
}
class Goat {
constructor(x, y) {
this.x = x;
this.y = y;
this.xSpd = random(-2, 2);
this.ySpd = random(-5, -3);
this.rad = goat.height;
// this.r = random(255);
// this.g = random(255);
// this.b = random(255);
this.isDone = false;
this.lifespan = 10.0; // 100%
this.lifeReduction = random(0.001, 0.010); // 0.1% to 1%
}
updateLifespan() {
if (this.lifespan < 0.0) {
this.lifespan = 0.0;
this.isDone = true;
} else {
this.lifespan -= this.lifeReduction;
}
}
fall() {
this.ySpd += 0.03;
}
checkInteraction(x, y) {
let distance = dist(this.x, this.y, x, y); //(x1, y1, x2, y2)
if (distance < this.rad) {
// in the area
// this.r = 255;
// this.g = 255;
// this.b = 0;
moo.play();
this.isDone = true
} else {
// out of area
// this.r = 255;
// this.g = 255;
// this.b = 255;
moo.stop();
}
}
move() {
this.x += this.xSpd; // this.x = this.x + this.xSpd;
this.y += this.ySpd;
}
checkEdges() {
if (this.x < 0 || this.x > width) {
this.isDone = true;
}
if (this.y < 0 || this.y > height) {
this.isDone = true;
}
}
display() {
push();
noStroke();
// fill(this.r, this.g, this.b, 255);
// ellipse(this.x, this.y, this.rad*2 , this.rad*2);
image(goat, this.x, this.y);
pop();
}
}
