174 lines
4.4 KiB
HTML
174 lines
4.4 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Tomater</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background: #db4343;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 10px;
|
||
|
|
margin: auto;
|
||
|
|
max-width: 900px;
|
||
|
|
|
||
|
|
background: #97b73d;
|
||
|
|
border-radius: 99px;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-family: sans;
|
||
|
|
}
|
||
|
|
|
||
|
|
#picture-container {
|
||
|
|
position: relative;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tomato {
|
||
|
|
position: absolute;
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
object-fit: contain;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
#picture {
|
||
|
|
flex: 1;
|
||
|
|
max-width: 80vw;
|
||
|
|
max-height: 80vh;
|
||
|
|
object-fit: contain;
|
||
|
|
cursor: url(/crosshair.png), default;
|
||
|
|
}
|
||
|
|
|
||
|
|
#file-picker {
|
||
|
|
background: brown;
|
||
|
|
max-width: max-content;
|
||
|
|
margin: 20px auto;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#sign {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
rotate: 3deg;
|
||
|
|
height: 187px;
|
||
|
|
right: -120px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="col">
|
||
|
|
<h1>Tomater</h1>
|
||
|
|
<div id="picture-container">
|
||
|
|
<img ondragstart="return false;" src="wall.jpg" alt="" id="picture" />
|
||
|
|
<img src="/tomate-with-me.png" alt="" id="sign" />
|
||
|
|
</div>
|
||
|
|
<input type="file" id="file-picker" />
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
const picture = document.getElementById("picture");
|
||
|
|
const pictureContainer = document.getElementById("picture-container");
|
||
|
|
const filePicker = document.getElementById("file-picker");
|
||
|
|
|
||
|
|
filePicker.onchange = () => {
|
||
|
|
var reader = new FileReader();
|
||
|
|
reader.onload = (e) => {
|
||
|
|
picture.src = e.target.result;
|
||
|
|
};
|
||
|
|
reader.readAsDataURL(filePicker.files[0]);
|
||
|
|
|
||
|
|
const tomatos = document.querySelectorAll(".tomato");
|
||
|
|
tomatos.forEach((tomato) => {
|
||
|
|
tomato.remove();
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const updateTomato = (tomato) => {
|
||
|
|
if (tomato.progress > 100) {
|
||
|
|
tomato.src = "/splat.png";
|
||
|
|
|
||
|
|
tomato.style.left = `${tomato.end_x - 50}px`;
|
||
|
|
tomato.style.top = `${tomato.end_y - 50}px`;
|
||
|
|
tomato.style.width = "100px";
|
||
|
|
tomato.style.height = "100px";
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
let new_x = lerp(tomato.progress, tomato.start_x, tomato.end_x);
|
||
|
|
let new_y = lerp(tomato.progress, tomato.start_y, tomato.end_y);
|
||
|
|
|
||
|
|
// apply a curve effect to path
|
||
|
|
// the lower the target height, the bigger the "curve"
|
||
|
|
const targetHeightContribution = tomato.end_y / picture.height / 2;
|
||
|
|
|
||
|
|
// the closer to the middle of the path
|
||
|
|
// the bigger the curve effect
|
||
|
|
const progressContribution = Math.sin(
|
||
|
|
(tomato.progress / 100) * Math.PI,
|
||
|
|
);
|
||
|
|
|
||
|
|
new_y -= 500 * targetHeightContribution * progressContribution;
|
||
|
|
|
||
|
|
const scale = lerp(tomato.progress, 150, 40);
|
||
|
|
const imageSize = (50 * scale) / 100;
|
||
|
|
|
||
|
|
tomato.style.left = `${new_x - imageSize / 2}px`;
|
||
|
|
tomato.style.top = `${new_y - imageSize / 2}px`;
|
||
|
|
tomato.style.rotate = `${tomato.rotation}deg`;
|
||
|
|
|
||
|
|
tomato.style.width = `${scale}px`;
|
||
|
|
tomato.style.height = `${scale}px`;
|
||
|
|
|
||
|
|
tomato.progress += 2.0;
|
||
|
|
tomato.rotation += tomato.angularMomentum;
|
||
|
|
};
|
||
|
|
|
||
|
|
picture.onclick = (e) => {
|
||
|
|
let rect = e.target.getBoundingClientRect();
|
||
|
|
let x = e.clientX - rect.left;
|
||
|
|
let y = e.clientY - rect.top;
|
||
|
|
|
||
|
|
let tomato = document.createElement("img");
|
||
|
|
tomato.src = "/tomato.png";
|
||
|
|
tomato.classList.add("tomato");
|
||
|
|
|
||
|
|
tomato.progress = 0;
|
||
|
|
tomato.start_x = picture.width / 2;
|
||
|
|
tomato.start_y = picture.height;
|
||
|
|
|
||
|
|
tomato.end_x = x;
|
||
|
|
tomato.end_y = y;
|
||
|
|
|
||
|
|
tomato.angularMomentum = Math.random() * 20 - 10;
|
||
|
|
tomato.rotation = 0;
|
||
|
|
tomato.scale = 1;
|
||
|
|
|
||
|
|
updateTomato(tomato);
|
||
|
|
|
||
|
|
pictureContainer.appendChild(tomato);
|
||
|
|
};
|
||
|
|
|
||
|
|
const lerp = (progress, start, end) => {
|
||
|
|
return start + (end - start) * (progress / 100);
|
||
|
|
};
|
||
|
|
|
||
|
|
setInterval(() => {
|
||
|
|
const tomatos = document.querySelectorAll(".tomato");
|
||
|
|
tomatos.forEach(updateTomato);
|
||
|
|
}, 10);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|