Skip to content

Instantly share code, notes, and snippets.

@kirjavascript

kirjavascript/spring.html

Last active October 27, 2022 07:56
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 kirjavascript/899adf3f8dcbbf2f0b19c85a810846ba to your computer and use it in GitHub Desktop.
Save kirjavascript/899adf3f8dcbbf2f0b19c85a810846ba to your computer and use it in GitHub Desktop.
Download ZIP
Raw
spring.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Spring</title>
</head>
<div id="s" style="font-size:3em">#</div>
<body>
<script>
// hookes law
let px = 0;
let py = 0;
let k = 0.23;
const d = 0.8;
let xpos = 0;
let ypos = 0;
let yvel = 0;
let xvel = 0;
function loop() {
requestAnimationFrame(loop);
s.style.marginLeft = xpos + "px";
s.style.marginTop = ypos + "px";
xpos += xvel;
ypos += yvel;
xvel = d * xvel + (k * (px - xpos)) / 5;
yvel = d * yvel + (k * (py - ypos)) / 5;
}
loop();
window.addEventListener("mousemove", (event) => {
px = event.pageX;
py = event.pageY;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment