Skip to content

Instantly share code, notes, and snippets.

@noelyahan

noelyahan/index.html

Created January 3, 2018 16:15
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 noelyahan/1f4e724a7f560366ad1fc7b5c905a7f7 to your computer and use it in GitHub Desktop.
Save noelyahan/1f4e724a7f560366ad1fc7b5c905a7f7 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/waqaqep
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script id="jsbin-javascript">
var width = 400, height = 300;
var canvas = document.getElementById("mycanvas")
canvas.width = width*2;
canvas.height = height*2;
var ctx = canvas.getContext("2d")
var x = 0;
var gameLoop = setInterval(() => {
if(x <= width) {
update(x)
}
x++
})
setTimeout(() => {
clearInterval(gameLoop)
}, 10000)
// for(var x = 0; x < width; x++) {
// update(x)
// }
function update(x) {
var t = map(x, 0, width, 0, 1);
var my = EasingFunctions().easeInOutCubic(t)
var y = map(my, 0, 1, 0, height)
//console.log(x, y)
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, y, 10, 10);
}
//from: https://stackoverflow.com/a/20910430/1481716
function map(value, start1, stop1, start2, stop2) {
return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
}
//from: https://gist.github.com/gre/1650294
function EasingFunctions() {
return {
// no easing, no acceleration
linear: function (t) { return t; },
// accelerating from zero velocity
easeInQuad: function (t) { return t*t; },
// decelerating to zero velocity
easeOutQuad: function (t) { return t*(2-t); },
// acceleration until halfway, then deceleration
easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; },
// accelerating from zero velocity
easeInCubic: function (t) { return t*t*t; },
// decelerating to zero velocity
easeOutCubic: function (t) { return (--t)*t*t+1; },
// acceleration until halfway, then deceleration
easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; },
// accelerating from zero velocity
easeInQuart: function (t) { return t*t*t*t; },
// decelerating to zero velocity
easeOutQuart: function (t) { return 1-(--t)*t*t*t; },
// acceleration until halfway, then deceleration
easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; },
// accelerating from zero velocity
easeInQuint: function (t) { return t*t*t*t*t; },
// decelerating to zero velocity
easeOutQuint: function (t) { return 1+(--t)*t*t*t*t; },
// acceleration until halfway, then deceleration
easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; }
}
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var width = 400, height = 300;
var canvas = document.getElementById("mycanvas")
canvas.width = width*2;
canvas.height = height*2;
var ctx = canvas.getContext("2d")
var x = 0;
var gameLoop = setInterval(() => {
if(x <= width) {
update(x)
}
x++
})
setTimeout(() => {
clearInterval(gameLoop)
}, 10000)
// for(var x = 0; x < width; x++) {
// update(x)
// }
function update(x) {
var t = map(x, 0, width, 0, 1);
var my = EasingFunctions().easeInOutCubic(t)
var y = map(my, 0, 1, 0, height)
//console.log(x, y)
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, y, 10, 10);
}
//from: https://stackoverflow.com/a/20910430/1481716
function map(value, start1, stop1, start2, stop2) {
return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
}
//from: https://gist.github.com/gre/1650294
function EasingFunctions() {
return {
// no easing, no acceleration
linear: function (t) { return t; },
// accelerating from zero velocity
easeInQuad: function (t) { return t*t; },
// decelerating to zero velocity
easeOutQuad: function (t) { return t*(2-t); },
// acceleration until halfway, then deceleration
easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; },
// accelerating from zero velocity
easeInCubic: function (t) { return t*t*t; },
// decelerating to zero velocity
easeOutCubic: function (t) { return (--t)*t*t+1; },
// acceleration until halfway, then deceleration
easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; },
// accelerating from zero velocity
easeInQuart: function (t) { return t*t*t*t; },
// decelerating to zero velocity
easeOutQuart: function (t) { return 1-(--t)*t*t*t; },
// acceleration until halfway, then deceleration
easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; },
// accelerating from zero velocity
easeInQuint: function (t) { return t*t*t*t*t; },
// decelerating to zero velocity
easeOutQuint: function (t) { return 1+(--t)*t*t*t*t; },
// acceleration until halfway, then deceleration
easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; }
}
}</script></body>
</html>
Raw
jsbin.waqaqep.js
var width = 400, height = 300;
var canvas = document.getElementById("mycanvas")
canvas.width = width*2;
canvas.height = height*2;
var ctx = canvas.getContext("2d")
var x = 0;
var gameLoop = setInterval(() => {
if(x <= width) {
update(x)
}
x++
})
setTimeout(() => {
clearInterval(gameLoop)
}, 10000)
// for(var x = 0; x < width; x++) {
// update(x)
// }
function update(x) {
var t = map(x, 0, width, 0, 1);
var my = EasingFunctions().easeInOutCubic(t)
var y = map(my, 0, 1, 0, height)
//console.log(x, y)
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, y, 10, 10);
}
//from: https://stackoverflow.com/a/20910430/1481716
function map(value, start1, stop1, start2, stop2) {
return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
}
//from: https://gist.github.com/gre/1650294
function EasingFunctions() {
return {
// no easing, no acceleration
linear: function (t) { return t; },
// accelerating from zero velocity
easeInQuad: function (t) { return t*t; },
// decelerating to zero velocity
easeOutQuad: function (t) { return t*(2-t); },
// acceleration until halfway, then deceleration
easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; },
// accelerating from zero velocity
easeInCubic: function (t) { return t*t*t; },
// decelerating to zero velocity
easeOutCubic: function (t) { return (--t)*t*t+1; },
// acceleration until halfway, then deceleration
easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; },
// accelerating from zero velocity
easeInQuart: function (t) { return t*t*t*t; },
// decelerating to zero velocity
easeOutQuart: function (t) { return 1-(--t)*t*t*t; },
// acceleration until halfway, then deceleration
easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; },
// accelerating from zero velocity
easeInQuint: function (t) { return t*t*t*t*t; },
// decelerating to zero velocity
easeOutQuint: function (t) { return 1+(--t)*t*t*t*t; },
// acceleration until halfway, then deceleration
easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; }
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment