Simulate the life with cats using my programming skills

Shinji Yamaguchi
Jun 24 · 4 min read

Cat lovers often say like this.


Here’s the Google Chrome Extension I developed.


Tips

How to make running cat

Run freely leaving paw-prints on your screen.
<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">
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.
// 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.

Support this extension on ProductHunt


Conclusion

Shinji Yamaguchi

Written by

I’m a computer programmer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade