Simulate the life with cats using my programming skills

Hi, It’s Shinji. I translated my friend’s funny story into English.

Cat lovers often say like this.

Why Do Cats Like To Sit On Things You’re Using?

Why won’t my cat stop bothering me while I’m trying to work

Why are cats so fucking annoying to live with.

Sometimes My Cats Irritate Me — I’m Beginning to Think It’s Intentional

What a lovely trouble! I’m so jealous!! I want to live with cats LIKE THEM!!!

Actually, It’s difficult to have a cat at my home, so I decided to SIMULATE the life with cats using my programming skills.

Here’s the Google Chrome Extension I developed.

You can get this extension in Google web store. There are 2 versions as follows.

• Mild version. The cats in this version don’t bother you so much. Just cute cats.

catcatcatcaaaaaaaaaaaaat(mild)

• Intense version. The cats in this version bother you intensively.

catcatcatcaaaaaaaaaaaaat

After you install them, plz open a new page in Google Chrome, Then cats begin to move. If you want to stop the cats moving, you should uninstall the extension.

Tips

I’m going to show how to made the app.

How to make running cat

Run freely leaving paw-prints on your screen.

I drew the running cat rotated slightly to make it natural angle even though she runs toward any direction.

Spec

1. Define start point in 1 of window sides, and end point in another side.
2. Calculate the cat direction from start and end point.
3. Calculate paw-prints angle.
4. Make the cat running leaving paw-prints on the screen.

Flip cat image horizontally

Flip cat images horizontally in accordance with cat direction using scale() function of CSS transform property.

<img width="100" alt="original direction" style="transform: scale(1, 1);" src="IMAGE_URL">
<img width="100" alt="flip horizontally" style="transform: scale(-1, 1);" src="IMAGE_URL">

Calculate angle

Calculate cat’s angle using atan() function from start and end point. This result is also used for paw-prints angle.

function getRadian(start, end) {
    let radian = Math.atan2(end.top - start.top, end.left - start.left);
    return radian;
}
let radian = getRadian(start, end);
let degree = radian * ( 180 / Math.PI ) ;

How to make sleeping cat

Sleeping cat in the midst of bottom side of your screen.

When you click her, she would frown at you. That’s it. She doesn’t go away. Because she is a cat.

Spec

1. Walk from the left bottom of the screen to the midst of the bottom side.
2. After she arrives the destination, begin to sleep.
3. When you click her, fire frown event.

Walking animation consist of 3 GIFs. To switch these GIFs, I use async function in order. Sorry for my ambiguous naming in the code below.

// Run each animation in order
async function animate() {
  await moveCenter();
  await changePose1();
  await changePose2();
}
animate();

// Take 10 secs to make cat walking to the midst point
function moveCenter() {
  return $cat.animate({ left: "50%" }, 10000, "linear").promise();
}
// Make cat sitting down on the spot
function changePose1() {
  return $cat 
  // Switch image to sitting style image
    .attr("src", src_2) 
    // after 1 second, switch to next image
    .animate({ left: "50%" }, 1000)
    .promise();
}
// Make the cat sleeping
function changePose2() {
  return $cat // switch to sleeping style
    .attr("src", src_3) // Change her face when click event occurs for a second
    .on("click", function(e) {
      // frown face
      $cat.attr("src", src_4).animate({ left: "50%" }, 1000, function() {
        // back to sleeping image
        $cat.attr("src", src_3);
      });
    })
    .animate({ left: "50%" }, 1000)
    .promise();
}

How to make sprouting cat

She has power to destroy each parts in the page.

5 years ago, I found a JavaScript 2D physics engine called BOX2d. Then, I’ve been thinking that I want to try to make something with this engine! Finally, I did it.

However I didn’t have enough knowledge of basic physics engine, therefore that’s a shame I could not make it sophisticated behavior. I just did it in reference to the demo of the engine, so i cant explain about this in detail here. This engine seems to be no longer maintained. Anyway, it was very fun for me to blow away and drop DOM.

Support this extension on ProductHunt

If you think the app is funny, I really appreciate your upvote!

Conclusion

Finally, I made my dream come true… Good thing I studied computer programming.