Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Floating kittens bookmarklet.
javascript:(function(){if ((typeof spawnKitten) === "function") {spawnKitten();} else {var element = document.createElement("script");element.type = "text/javascript";element.src = "https://gist.github.com/Equinox-/7783216/raw/TheScript.js";document.head.appendChild(element);}})();
function updateKittens() {
if ((typeof window.maxSpeed) != 'number') {
window.maxSpeed = 7;
}
if ((typeof window.gravConstant) != 'number') {
window.gravConstant = .4;
}
var children = document.getElementById("kitten_container").children;
for (var j = 0; j<children.length; j++){
var element = children[j];
if (element.id.indexOf("kitten") == 0){
var x = parseFloat(element.posX) + parseFloat(element.velX);
var y = parseFloat(element.posY) + parseFloat(element.velY);
var massA = parseFloat(element.width) * parseFloat(element.height);
for (var l = 0; l<children.length; l++){
var other = children[l];
if (l != j && other.id.indexOf("kitten") == 0){
var x2 = parseFloat(other.posX);
var y2 = parseFloat(other.posY);
var len = Math.sqrt((x2-x) * (x2-x) + (y2-y) * (y2-y));
var normalX = (x2 - x) / len;
var normalY = (y2 - y) / len;
var massB = parseFloat(other.width) * parseFloat(other.height);
// element.velX += gravConstant * Math.sqrt(massA * massB) * normalX / len / len;
// element.velY += gravConstant * Math.sqrt(massA * massB) * normalY / len / len;
var collideOnBoth = false;// workaround for a bigger, more complicated issue
if (y < y2 + other.height && y + element.height > y2 && (!collideOnBoth || Math.abs(element.velY) > Math.abs(element.velX))) {
if (x + element.width > x2 && x < x2) {
element.velX = -Math.abs(parseFloat(element.velX));
//x = x2 - element.width;
}
if (x < x2 + other.width && x + element.width > x2 + other.width) {
element.velX = Math.abs(parseFloat(element.velX));
//x = x2 + other.width;
}
}
if (x < x2 + other.width && x + element.width > x2 && (!collideOnBoth || Math.abs(element.velX) > Math.abs(element.velY))) {
if (y + element.height > y2 && y < y2) {
element.velY = -Math.abs(parseFloat(element.velY));
//y = y2 - element.height;
}
if (y < y2 + other.height && y + element.height > y2 + other.height) {
element.velY = Math.abs(parseFloat(element.velY));
//y = y2 + other.height;
}
}
}
}
if (element.velX > maxSpeed) {
element.velX = maxSpeed;
} else if (element.velX < -maxSpeed) {
element.velX = -maxSpeed;
}
if (element.velY > maxSpeed) {
element.velY = maxSpeed;
} else if (element.velY < -maxSpeed) {
element.velY = -maxSpeed;
}
if (x + element.width > document.body.scrollWidth) {
element.velX = -Math.abs(parseFloat(element.velX));
x = document.body.scrollWidth - element.width;
} else if (x < 0) {
element.velX = Math.abs(parseFloat(element.velX));
x = 0;
}
if (y + element.height > document.body.scrollHeight) {
element.velY = -Math.abs(parseFloat(element.velY));
y = document.body.scrollHeight - element.height;
} else if (y < 0) {
element.velY = Math.abs(parseFloat(element.velY));
y = 0;
}
element.posX = x;
element.posY = y;
element.style.left = Math.round(x) + "px";
element.style.top = Math.round(y) + "px";
}
}
}
function spawnKitten() {
var element = document.createElement("img");
var width = (50 + parseInt(Math.random() * 250));
var height = (50 + parseInt(Math.random() * 250));
element.src = "http://placekitten.com/" + width + "/" + height;
element.id = "kitten";
element.style.position = "absolute";
var x = parseFloat(Math.random() * (document.body.scrollWidth - width));
var y = parseFloat(Math.random() * (document.body.scrollHeight - height));
element.posX = x;
element.posY = y;
element.style.left = Math.round(x) + "px";
element.style.top = Math.round(y) + "px";
element.style.width = width + "px";
element.style.height = height + "px";
element.style.zIndex = 100000;
element.style.pointerEvents = "auto";
element.velX = (parseFloat(Math.random() * 2) - 1) * 10;
element.velY = (parseFloat(Math.random() * 2) - 1) * 10;
element.onclick = function() {
var audio = window.kittenSound[Math.floor(window.kittenSound.length * Math.random())];
audio.volume = 1;
audio.play();
this.remove();
};
document.getElementById("kitten_container").appendChild(element);
window.kittenSound = [];
for (var i = 1; i<9; i++) {
window.kittenSound.push(new Audio("http://www.kessels.com/catsounds/cat" + i + ".wav"));
}
}
if (document.getElementById("kitten_container") == undefined) {
var container = document.createElement("div");
container.style.position = "absolute";
container.style.left = "0px";
container.style.top = "0px";
container.style.width = "100%";
container.style.height = "100%";
container.id = "kitten_container";
container.style.zIndex = 10000;
container.style.pointerEvents = "none";
container.style.overflow = "visible";
document.body.appendChild(container);
window.mouse = {"x":0, "y":0};
setTimeout(function(){
container.addEventListener("mousemove", function (e){window.mouse.x = e.x; window.mouse.y = e.y;}, false);
}, 1000);
console.log("Kitten maker: " + setInterval(updateKittens, 25));
}
spawnKitten();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment