<!doctype html>
<html>
<head>
<title>RequestAnimationFrame Proof of Concept</title>
<style>
* { margin: 0 0 0 0;
padding: 0 0 0 0;
line-height: 0px;
}
.dpixel {
width:10px;
height:10px;
display:inline-block;
background-color:yellow;
}
</style>
<script type='text/javascript'>
var yellow='yellow', pink='#ff69b4', x=0, lastx=0, y=0, lasty=0, mtl='', itdepends=0;
/*
Provides requestAnimationFrame in a cross browser way.
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
*/
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || // comment out if FF4 is slow (it caps framerate at ~30fps: https://bugzilla.mozilla.org/show_bug.cgi?id=630127)
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
window.setTimeout(callback, 1000 / 60);
};
})();
}
animate();
function animate() {
requestAnimationFrame(animate);
draw();
}
function draw() {
// Put your code here
if (mtl != '') {
document.getElementById('daddto').innerHTML+='<div class=dpixel style="' + mtl + '"></div>';
} else {
document.getElementById('daddto').innerHTML+='<div class=dpixel style="background-color:' + yellow + ';"></div>';
}
mtl='';
}
function oc(event, depends) {
if (depends == 1) { itdepends = 1; }
if (event.clientX || event.clientY) {
x = event.clientX;
y = event.clientY;
if (itdepends == 1) {
mtl='background-color:' + pink + ';z-index:12;position:absolute;top:' + y + 'px;left:' + x + 'px;';
}
} else {
x = event.pageX;
y = event.pageY;
if (itdepends == 1) {
mtl='background-color:' + pink + ';z-index:12;position:absolute;top:' + y + 'px;left:' + x + 'px;';
}
}
}
</script>
</head>
<body>
<div ontouchmove="oc(event,0);" onmousemove="oc(event,0);" ontouchstart="oc(event,1);" onclick="oc(event,1);" style="position:absolute;top:0px;left:0px;z-index:0;" id=daddto></div>
<h1 style="position:absolute;top:50%;left:30%;z-index:5;">RequestAnimationFrame Proof of Concept</h1>
<h3 style="position:absolute;top:60%;left:25%;z-index:5;">RJM Programming - October, 2018 - Thanks to <a target=_blank title='How to use requestAnimationFrame?' href='https://stackoverflow.com/questions/5605588/how-to-use-requestanimationframe'>How to use requestAnimationFrame?</a></h3>
<input onclick="itdepends=0;" title="Change colour of animated blob in background animated" style="position:absolute;top:70%;left:43%;z-index:5;" type="color" onblur="yellow=this.value;" onchange="yellow=this.value;" value="#ffff00"></input> <input onclick="itdepends=0;" title="Change colour of animated blob in foreground with click/touches" style="position:absolute;top:70%;left:53%;z-index:5;" type="color" onblur="pink=this.value;" onchange="pink=this.value;" value="#ff69b4"></input>
<div ontouchmove="oc(event,0);" onmousemove="oc(event,0);" ontouchstart="oc(event,1);" onclick="oc(event,1);" id=bdiv style='z-index:-5;background-color:transparent;width:100%;height:100vh;position:absolute;top:0px;left:0px;'></div>
<input type="text" style="position:absolute;top:-300px;left:-300px;" value=""></input>
</body>
</html>