にゃー、にゃー。(Meow, meow)

にゃー、にゃー。

Today my wife was playing Stray on the PS5. It seems an interesting game where you play the role of a stray cat in the far future that finds itself lost in a city full of robots. Whilst scrolling through Twitter, I came across a wonderful p5js sketch by Senbaku, which inspired me to create this animation.

And here is the code:

    
/* After にゃー、にゃー。 (Meow meow) by @Senbaku 

https://x.com/senbaku/status/2024819224028541210  */


function setup() {
  
  createCanvas(400, 400);
  rectMode(CENTER);
  angleMode(DEGREES);
  noStroke();
}

function draw() {
  background(220);
  
  

 
  drawCat(width / 4, height / 2, false);
  

  drawCat(width / 4, height / 4, false);
  
  
  drawCat(width / 4, height / 2+100, false);
  
  //mirrored cats
  
  drawCat((width / 4) * 3, height / 2, true);
  
  
  drawCat((width / 4) * 3, height/4, true);
  
  
  drawCat((width / 4) * 3, height/2+100, true);
  
  textSize(30);
  text('After センバク', 100,360);
  
}


function drawCat(x, y, isMirrored) {
  push(); 
  
  
  translate(x, y);
  
  
  if (isMirrored) {
    scale(-1, 1);
  }

  fill(0);
  
  // Body
  rotate(-45);
  rect(0, -50, 40, 100, 50, 50, 50, 50);
  rotate(45);
  
  // Tail (isolated animation)
  push();
  translate(-60, -60);
  // Waggle angle
  let wag = sin(frameCount * 4) * 15; 
  rotate(wag);
  rect(0, -20, 10, 40, 50, 50, 50, 50);
  pop();
  
  // Head
  fill(0);
  circle(-15, -20, 50);
  
  // Eyes
  fill(255);
  circle(0, -25, 10);   // Right eye
  circle(-25, -25, 10); // Left eye
  
  // Ear
  fill(0);
  rotate(25);
  beginShape();
  vertex(-30, -34);
  vertex(-20, -44);
  vertex(-10, -34);
  endShape(CLOSE);
  rotate(-25);
  
  // Back left leg
  rect(-70, -40, 10, 20);
  circle(-70, -30, 12);
  
  // Front left leg
  rect(-30, 0, 10, 25);
  circle(-30, 10, 12);
  
  // Front right leg
  rect(0, 0, 10, 25);
  circle(0, 10, 12);
  
  pop(); 
}

// Save a 5-second gif when the user presses the 's' key.
function keyPressed() {
  if (key === 's') {
    saveGif('mySketch', 15);
  }
}