Skip to content

Instantly share code, notes, and snippets.

@almog

almog/chapter13_exercise3.html

Last active August 29, 2015 14:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save almog/8261991257d3006c815c to your computer and use it in GitHub Desktop.
Save almog/8261991257d3006c815c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chapter13_exercise3.html
<html>
<p style="text-align: center">
<img src="http://eloquentjavascript.net/img/cat.png" style="position: absolute">
<img src="http://eloquentjavascript.net/img/hat.png" style="position: absolute">
</p>
<script>
var cat = document.querySelector("img[src*='cat']")
var hat = document.querySelector("img[src*='hat']")
var originX = document.querySelector("p").offsetWidth / 2;
var originY = cat.offsetHeight + hat.offsetHeight;
var angle = 0, lastTime = null;
var hatAngle = 0;
function animate(time) {
if (lastTime != null) {
angle += (time - lastTime) * 0.001;
hatAngle -= (time - lastTime) * 0.002;
}
lastTime = time;
var wideRadiusX = originX + (Math.cos(angle) * 200);
var wideRadiusY = originY + (Math.sin(angle) * 20)
cat.style.left = wideRadiusX + "px";
cat.style.top = wideRadiusY + "px";
hat.style.left = wideRadiusX + (Math.cos(hatAngle) * 30) + "px";
hat.style.top = wideRadiusY - (cat.offsetHeight + 10) + (Math.sin(hatAngle)) * 10 + "px";
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment