Gimme food

paw.js

class Paw {
  constructor(x, y, xspeed, yspeed) {
    this.x = x;
    this.y = y;
    this.xspeed = xspeed;
    this.yspeed = yspeed;
    this.touch=false; 
    this.bad=false; 
  }

  //orange & stripe
  displayOrange() {
    fill(255, 138, 49);
    noStroke();
    rectMode(CENTER);
    rect(this.x, this.y, 70, 150, 40);
    fill(255, 224, 138);
    rect(this.x, this.y-20, 70, 10);
    fill(255, 224, 138);
    rect(this.x, this.y+10, 70, 10);
    fill(0);
    rect(this.x, this.y-65, 3, 20, 40);
    fill(0);
    rect(this.x+10, this.y-64, 3, 18, 40);
    fill(0);
    rect(this.x-10, this.y-64, 3, 18, 40);
  }
  
  // grey and dots
  displayGrey(){
    fill(158, 155, 146);
    noStroke();
    rectMode(CENTER);
    rect(this.x+80, this.y, 70, 150, 40);
    fill(255, 255, 255);
    ellipse(this.x+65, this.y-10, 25, 25);
    fill(255, 219, 101);
    ellipse(this.x+100, this.y-30, 15, 15);
    fill(115, 101, 95);
    ellipse(this.x+80, this.y-40, 10, 10);
    fill(0);
    rect(this.x+80, this.y-65, 3, 20, 40);
    fill(0);
    rect(this.x+90, this.y-64, 3, 18, 40);
    fill(0);
    rect(this.x+70, this.y-64, 3, 18, 40);
  }
  
  move(){
    this.xspeed = reach(this.x, this.xspeed, 0, width);
    this.x += this.xspeed;

    this.yspeed = reach(this.y, this.yspeed, height-30, height);
    this.y += this.yspeed;
  }
  
  touch(){ 
    this.touch = this.y < height/2 +20
    if (this.touch) {
      this.bad = ! this.bad; 
    }
    return this.touch; 
  }
  
  isBad(){
    if (this.bad){
      fill(0); 
      textSize(50); 
      text("BAD CAT", 10, 50); 
    }
    else {
      this.bad=false; 
    }
  }

}

sketch.js

let serial;
let latestData;
let paws = [];
let img;

function preload() {
  img = loadImage('images/preppedfish.png');
}

function setup() {
  createCanvas(600, 300);
  for (let i = 0; i < 2; i++) {
    paws.push(new Paw(random(0, width), random(height - 20, height), random(0, 0), random(-5, 5)));
  }
  serial = new p5.SerialPort();
  serial.open("/dev/cu.usbmodem1411");
  serial.on('data', gotData);
}

function gotData() {
  let currentString = serial.readLine();
  trim(currentString);
  if (!currentString) return;
  console.log(currentString);
  latestData = currentString;
}

function draw() {
  background(120, 189, 226);

  let mappedVar = map(latestData, 400, 950, 0, width);
  let v = latestData;
  //let origV = v;

  if (v > width / 3) {
    fill(0);
    textSize(30);
    text("Gimme your food hooman!", 10, 50);
  }

  image(img, v, 40, 400, 150);
  table();

  for (let i = 0; i < 2; i++) {
    paws[i].displayOrange();
    paws[i].displayGrey();
    paws[i].move();
    // if (paws[i].touch) {
    //   paws[i].isBad();
    // }
  }
}

function reach(position, speed, min, max) {
  if (position < min || position > max) {
    speed *= -1;
  }
  return speed;
}

function table() {
  rectMode(CENTER);
  //top
  fill(225, 153, 81);
  rect(width / 2, height / 2 + 40, width, 30);
  //middle
  rectMode(CENTER);
  fill(150, 98, 54);
  rect(width / 2, height - 90, width, 30);
  //bottom
  fill(68, 44, 24);
  rect(width / 2, height - 40, width, 80);
}