let payment

let Laptop

let hover

let glass

let crown

let facemesh;

let video;

let predictions = [];

let isVideoVisible = false;

let isMouseOverLaptop = false;

​

const maxCount = 50;

const snowFlakes = [];

let snowFlake;

​

​

​

​

​

function preload()

{

  // laptop = loadImage('Laptoppng.png');

  payment = loadImage('payment.png')

  Laptop = loadImage('Laptop.png')

  hover = loadImage('hover.png')

  glass = loadImage('glass.png')

  crown = loadImage('crown.png')

  imgDogEarRight = loadImage("https://i.ibb.co/bFJf33z/dog-ear-right.png");

  imgDogEarLeft = loadImage("https://i.ibb.co/dggwZ1q/dog-ear-left.png");

  imgDogNose = loadImage("https://i.ibb.co/PWYGkw1/dog-nose.png");

}

​

function setup() {

  createCanvas(900, 700);

  video = createCapture(VIDEO);

  video.size(900, 600);

​

  facemesh = ml5.facemesh(video, modelReady);

​

​

​

  facemesh.on("predict", results => {

    predictions = results;

  });

​

​

  video.hide();

  noCursor();

  noStroke()

  fill(255);

  const initialX = random(width / 5, 2 * width / 1);

  snowFlake = new SnowFlake(initialX);

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  background("white")

  drawBackground();

  if (isMouseOverLaptop){

    image(payment,mouseX,mouseY,30,30)

  }

  // image(video, 180, 90, 400, 300);

  // DrawDogFace()

  if (isVideoVisible) {

    image(video, 180, 85, 400, 260);

    if(key == '1'){

      DrawDogFace()

    } else if(key =='2'){

      Drawglass()

    } else if (key == '3') {

       Drawcrown()

    }

    // image(video, 180, 105, 400, 235);

    // DrawDogFace()

  }

  // noStroke()

  // fill(247, 247, 247)

  // square(590,80,75)

  // image(laptop,0,0,700,500)

  // drawDogface()

    push();

  fill('white')

  snowFlake.animate();

  pop();

  for (let i = snowFlakes.length - 1; i >= 0; i--) {

    if (snowFlakes[i].translation > height * 0.61 ) {

      snowFlakes.splice(i, 1);

    }

    else {

      push();

      snowFlakes[i].animate();

      pop();

    }

  }

  if (snowFlake.translation > height / 3) {

    snowFlakes.push(snowFlake);

    const initialX = random(width / 4, 3 * width / 4);

    snowFlake = new SnowFlake(initialX);

    console.log(snowFlakes.length);

  }

}

​

​

​

function drawBackground()

{

  image(Laptop,45,30,700,500)

}

​

function mouseMoved() {

  // Check if the mouse is over the laptop image

  if (mouseX >= 100 && mouseX <= 650 && mouseY >= 30 && mouseY <= 400) {

    isMouseOverLaptop = true;

    cursor('none'); // Hide the default cursor

  } else {

    isMouseOverLaptop = false;

    cursor(); // Show the default cursor outside the laptop image

  }

}

​

​

function mousePressed()

{

  Laptop = hover

   isVideoVisible = !isVideoVisible;

}

​

function DrawDogFace()

{

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

  const positions = predictions[i].scaledMesh;

  if (positions !== false)

  { 

  //   distance = dist(positions[0][0], positions[0][1],positions[14][0], positions[14][1] )

  // scale(distance / 10)

  scale(0.5)

​

    if (positions.length >= 70) {

      push()

      translate(270, -30); // offset adjustment

      // image(imgDogEarRight, positions[20][0], positions[20][1]);

      image(imgDogEarRight,positions[20][0],positions[20][1]);

      pop();

    }

​

    if (positions.length >= 56) {

      push();

      translate(440, -70); // offset adjustment

      image(imgDogEarLeft, positions[16][0], positions[16][1]);

      pop();

    }

​

    if (positions.length >= 50) {

      push();

      translate(403, 130); // offset adjustment

      image(imgDogNose, positions[62][0], positions[62][1]);

      pop();

    }

  }

​

​

}

}

​

function Drawglass()

{

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

  const positions = predictions[i].scaledMesh;

  if (positions !== false)

  { 

  //   distance = dist(positions[0][0], positions[0][1],positions[14][0], positions[14][1] )

  // scale(distance / 10)

scale(0.14)

    if (positions.length >= 0) {

      push()

      translate(1870,410); 

      image(glass,positions[0][0],positions[0][1]);

      pop();

    }

  }

​

  }

}

​

function Drawcrown() {

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

  const positions = predictions[i].scaledMesh;

  if (positions !== false)

  { 

  //   distance = dist(positions[0][0], positions[0][1],positions[14][0], positions[14][1] )

  // scale(distance / 10)

scale(0.23)

    if (positions.length >= 70) {

      push()

      translate(1020,110); 

      image(crown,positions[90][0],positions[0][1]);

      pop();

    }

  }

​

  }

}

​

function SnowFlake(initialX) {

  this.initialX = initialX;

  this.translation = 0;

  this.rotation = 0;

  this.ices = [];

  this.ice = new SnowParticle(this.initialX, 0, this.ices);

  this.count = 0;

}

​

SnowFlake.prototype.animate = function() {

  translate(this.initialX, this.translation += 2);

  rotate(this.rotation += PI / 50);

  scale(0.4);

  for (let i = 0; i < 6; i++) {

    rotate(PI / 3);

    push();

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

      this.ices[i].draw();

    }

​

    while (this.ice.shouldMove()) {

      this.ice.update();

    }

    this.ice.draw();

​

    if (this.count < maxCount && Math.random() < 0.2) {

      this.ices.push(this.ice);

      this.ice = new SnowParticle(this.initialX, random(-40, 40), this.ices);

      this.count++;

    }

    pop();

  }

}

​

function SnowParticle(x, y, ices) {

  this.pos = createVector(x, y);

  this.radius = 5;

  this.ices = ices;

}

​

SnowParticle.prototype.draw = function () {

  ellipse(this.pos.x, this.pos.y, this.radius);

  ellipse(this.pos.x, -this.pos.y, this.radius);

};

​

SnowParticle.prototype.update =  function() {

  this.pos.x += -1;

  this.pos.y += random(1, -1);

  const angle = constrain(this.pos.heading(), 0, PI / 3);

  const magnitude = this.pos.mag();

  this.pos.x = magnitude * Math.cos(angle);

  this.pos.y = magnitude * Math.sin(angle);

}

​

SnowParticle.prototype.shouldMove = function() {

  if (this.pos.x < 1 || this.isColliding()) {

    return false;

  }

  return true;

}

​

SnowParticle.prototype.isColliding = function() {

  for (let currentIce of this.ices) {

    const distance = dist(

      currentIce.pos.x,

      currentIce.pos.y,

      this.pos.x,

      this.pos.y

    );

    if (distance < this.radius) return true;

  }

  return false;

};