We Keep Coding

Trying to figure out where the variable "now" in this requestAnimationFrame function comes from, or how to obtain its value dynamically

Basically i been trying to create a game using multiple slot machine rollers. I have tried many versions to obtain my goals, and all work perfectly on pc, but as soon as i put them on a mobile device, they are laggy. this is mainly because i was manipulating dom elements, as i found out.
I found a function on the net, i have replicated it and run it in an app and it works perfectly.
Now im trying to write this function into my actual app, with my own variables.
My problem is this:
There is a variable called "NOW", that is passed to the function animate(); I am trying to figure out where it comes from and or how to dynamically create it myself. There is a requestAnimationFrame request in this function and after hours and hours of research, i still cant find anything.
here is a fiddle where the code is located:
https://codepen.io/indamix/pen/lLxcG
var sm = (function(undefined){
var tMax = 3000,
height = 210,
speeds = [],
r = [],
reels = [
['coffee maker', 'teapot', 'espresso machine'],
['coffee filter', 'tea strainer', 'espresso tamper'],
['coffee grounds', 'loose tea', 'ground espresso beans']
],
$reels,
$msg,
start;
function init(){
$reels = $('.reel').each(function(i, el){
el.innerHTML = '<div><p>' + reels[i].join('</p><p>') + '</p></div><div><p>' + reels[i].join('</p><p>') + '</p></div>'
});
$msg = $('.msg');
$('button').click(action);
}
function action(){
if (start !== undefined)
return;
for (var i = 0; i < 3; ++i) {
speeds[i] = Math.random() + .5;
r[i] = (Math.random() * 3 | 0) * height / 3;
}
$msg.html('Spinning...');
animate();
}
function animate(now){
if (!start) start = now;
var t = now - start || 0;
for (var i = 0; i < 3; ++i)
$reels[i].scrollTop = (speeds[i] / tMax / 2 * (tMax - t) * (tMax - t) + r[i]) % height | 0;
if (t < tMax)
requestAnimationFrame(animate);
else {
start = undefined;
check();
}
}
function check(){
$msg.html(
r[0] === r[1] && r[1] === r[2] ?
'You won! Enjoy your ' + reels[1][ (r[0] / 70 + 1) % 3 | 0 ].split(' ')[0] : 'Try again');}
return {init: init}
})();$(sm.init);
I've been at this for a while now, like days. I figured out that the Now variable has something to do with the requestAnimationFrame function to determine where the animation frame ends up,But this is only speculation for me.. I can't see it.

You can use performance.now() as an argument value to your own animate function call

Javascript Animation on scroll, Vanilla JS

I want to use this code that i have seen on github, but I don't know how to apply this code on my HTML, to have an scrolling effect.
The point is, I don't know how to run use this code
source https://gist.github.com/andjosh/6764939
document.getElementsByTagName('button')[0].onclick = function () {
scrollTo(document.body, 0, 1250);
}
function scrollTo(element, to, duration) {
var start = element.scrollTop,
change = to - start,
currentTime = 0,
increment = 20;
var animateScroll = function(){
currentTime += increment;
var val = Math.easeInOutQuad(currentTime, start, change, duration);
element.scrollTop = val;
if(currentTime < duration) {
setTimeout(animateScroll, increment);
}
};
animateScroll();
}
//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
};

First you have to replace document.body with document.documentElement, as document.body.scrollTop() has been deprecated.
Edit: it seems that I was not completely right about document.body.scrollTop() being deprecated. The best solution to support multiple browsers is to check for both cases.
Second, you need to set a value > 0 for the 'to' parameter, as Quantastical already pointed out.
Also make sure you have a <button> element. It should work then.

javascript - make setTimeout faster?

My code is:
function slide(x)
{
if (x==undefined)
var x = 1;
if (x >= 4096)
return;
document.getElementById("slide").style.backgroundPosition = x + "px 0px";
x++;
setTimeout(function() {
slide(x);
}, 1);
}
JSFIDDLE
It makes a spin (?) by changing backgroundPosition, and it works. But it's too slow, I'd want to make it faster, and then gradually slow down. How can I do that?

You should pick a higher delay than 1ms. In most browsers 10 to 50 ms would be a lot more reliable. To speed up your animation though, increase x increments. For example:
function slide(x)
{
if(x==undefined) var x = 1;
if(x >= 4096) return;
document.getElementById("slide").style.backgroundPosition = x+"px 0px";
x += 10; // or some other value
setTimeout(function() {
slide(x);
}, 50); // or some other value
}
Also, you probably want to check x like this:
if (typeof x === 'undefined') { x = 1; }, no need for var.
2018 UPDATE:
Check out the https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame API. Using this over a fixed update interval is usually preferable.

I have rewrite all the function:
function slide() {
var x = 1;
var y = 30;
var clr = setInterval(function(){
if(x >= 4096) x = 1;
document.getElementById("slide").style.backgroundPosition = x+"px 0px";
x+=y;
y-=0.1;
if (y<=0) { clearInterval(clr); }
},10);
}
https://jsfiddle.net/tatrwkmh/4/

Currently the position is being changed by 1 pixel every time slide is called, via the line x++;. You can make it faster by changing this from x++ to x += 2 or x += 3 etc.
Your animation may look clunky without some sort of easing function, though. You should look into using some sort of animation library instead.

I got it nicely starting fast and then going slower by adding to your code the following:
if(x < 1000)
x+=2
else if(x < 1500)
x+=1.5
else
x++;

JavaScript: using cancelAnimationFrame inside requestAnimationFrame loop

For the sake of learning I am prototyping an animate function for all HTMLElements, inspired by jQuery. The animation starts up just fine, but I want it to stop after the requestAnimationFrame's time = the duration given in the function. I am using cancelAnimationFrame inside the animation loop, but it doesn't stop the loop.
HTMLElement.prototype.animate = function(properties,duration){
for(prop in properties){
var last = 0,
fps = 60;
function ani(time){
requestAnimationFrame(ani);
if ((time - last) > fps ){
last = time
console.log(time)
if(time >= (duration*1000)){
window.cancelAnimationFrame(aniLoop)
}
}
}
var aniLoop = requestAnimationFrame(ani)
}
}
The function is called like this
c.animate({"property":"value"},1)

At the core of the problem lies that fact that you're only getting the ID of the first animation frame (the var aniLoop = (...) line) and that's what you're trying to cancel - except that each call to requestAnimationFrame has a different ID, thus you'd need to store the return value of the last call and cancel that instead:
HTMLElement.prototype.animate = function(properties,duration) {
"use strict";
var aniLoop,
prop,
last = 0,
fps = 60;
for (prop in properties) {
function ani(time) {
aniLoop = requestAnimationFrame(ani);
if ((time - last) > fps) {
last = time;
console.log(time);
if (time >= (duration * 1000)) {
cancelAnimationFrame(aniLoop);
}
}
}
aniLoop = requestAnimationFrame(ani);
}
};
There are, however, several other problems with your code that need to be tackled as well, otherwise your function will blow up rather thoroughly:
:1 Function declaration in a loop
I would recommend reading about differences between function declaration and expression to get a better picture, but the problem here is that you're doing function declaration in a loop, which is considered undefined behaviour (some engines will replace the functions, some will not, some will blow up). Given that the animations have only single duration given and thus, are probably synchronised, it'd be a better option to iterate over properties to animate inside of a single animation function, like so:
HTMLElement.prototype.animate = function(properties,duration) {
"use strict";
var aniLoop,
last = 0,
fps = 60;
function ani(time) {
var prop;
aniLoop = requestAnimationFrame(ani);
if ((time - last) > fps) {
last = time;
for (prop in properties) {
console.log(prop + ': ' + time);
}
if (time >= (duration * 1000)) {
cancelAnimationFrame(aniLoop);
}
}
}
aniLoop = requestAnimationFrame(ani);
}
:2 Animation timestamping
As it looks currently, your animation function will probably not run more than one frame anyway - if you look at requestAnimationFrame documentation on MDN, you'll notice that the callback given to requestAnimationFrame is given a timestamp, i.e. value in milliseconds from the beginning of UNIX epoch (1st of January 1970) - therefore the condition of time >= (duration * 1000) will always be true. Instead of that, register the starting time when you kick the animation off and compare the timestamp within the callback to it, like so:
HTMLElement.prototype.animate = function(properties,duration) {
"use strict";
var aniLoop,
start,
last = 0,
fps = 60;
function ani(time) {
var prop,
progress;
aniLoop = requestAnimationFrame(ani);
if ((time - last) > fps) {
last = time;
progress = time - start;
for (prop in properties) {
console.log(prop + ': ' + progress + ' out of ' + (duration * 1000));
}
// This is where we get a difference between current and starting time
if (progress >= (duration * 1000)) {
cancelAnimationFrame(aniLoop);
}
}
}
start = Date.now();
aniLoop = requestAnimationFrame(ani);
}
:3 Animation throttling
This one is not as crucial, but still worth a consideration - requestAnimationFrame is intended to be automatically throttled and regulated by the browser, thus you don't need to apply your own conditions on whether animation should run (it won't go over 60FPS anyway, as that's the specification's ceiling). Instead, it should simply work on difference of current time from starting time, to make sure your animation still ends up in correct place even if for some reason, there is a lag in animation:
HTMLElement.prototype.animate = function(properties,duration) {
"use strict";
var aniLoop,
start;
function ani(time) {
var prop,
progress;
aniLoop = requestAnimationFrame(ani);
progress = time - start;
for (prop in properties) {
console.log(prop + ': ' + progress + ' out of ' + (duration * 1000));
}
// This is where we get a difference between current and starting time
if (progress >= (duration * 1000)) {
cancelAnimationFrame(aniLoop);
}
}
start = Date.now();
aniLoop = requestAnimationFrame(ani);
}

EaselJS Bitmaps not showing

I'm having an issue where bitmaps seem to be loading after they are created and added to the stage. You can see all this code working right here. You can look at the console log for the log statements I'm getting (also shown below).
I create the bitmaps in a function here (I know this code is working properly -- you don't have to read this but note how game.update is set to true at the end).
for (i = -r; i <= r; i++){
var min = Math.max(-r, -r - i);
var max = Math.min(r, r - i);
for (j = min; j <= max; j++){
k = -1 * (i + j);
//var a = length)Math.floor(Math.random() * t_imgs.;
//var a = mountain;
var a;
if(game.grid[i][j].height == null){
a = mountain;
} else if (game.grid[i][j].height > .5){
a = plain;
} else{
a = water;
}
var b = Math.floor(Math.random() * (game.t_imgs[a].length ));
if(game.t_imgs[a][b] == null){
console.log("NULL:", a, b);
}
bitmap = new createjs.Bitmap(game.t_imgs[a][b]);
container.addChild(bitmap);
bitmap.regX = game.hexwidth/2;
bitmap.regY = game.hexheight/2;
bitmap.x = game.xcenter + game.hexwidth * .75 * i;
bitmap.y = game.ycenter + game.hexheight * .5 * (j - k);
game.grid[i][j].termap = bitmap;
}
}
document.getElementById("loader").className = "";
createjs.Ticker.addEventListener("tick", tick);
console.log("finished loading images and creating bitmaps. Game update set to true");
game.update = true;
}
My problem lies in the tick function, which is called 60 times a second. I only want the map to update if something is changed (when game.update == true).
function tick(event) {
if(game.update == true){
game.update = false;
var i,j,k;
var r = game.radius;
for (i = -r; i <= r; i++){
var min = Math.max(-r, -r - i);
var max = Math.min(r, r - i);
for (j = min; j <= max; j++){
k = -1 * (i + j);
if(game.grid[i][j].termap != null){
game.grid[i][j].termap.x = game.xcenter + game.hexwidth * .75 * i;
game.grid[i][j].termap.y = game.ycenter + game.hexheight * .5 * (j - k);
} else {
console.log("A bitmap is null.");
game.update = true; //still needs to be updated
}
}
}
game.stage.update(event);
console.log("UPDATED!");
}
}
game.update is only set to true after all the bitmaps are created. As you can see if you load the website, (here is the link again), the console log shows all the bitmaps to be created before the stage is updated. This is also shown in the console print statements. If you click in the center of the screen and drag your mouse, you can force an update by moving the map, which changes game.update to true and properly forces the stage to update. I can't figure out why the bitmaps aren't showing immediately, as the game.update is clearly called only after they are created and added to the stage. Bitmaps do have a visible property, but the default value is true anyways.

I answered this here
http://community.createjs.com/discussions/easeljs/5440-bitmaps-not-showing-immediately-after-being-loaded
The short answer is that the images are created, but not actually loaded. They can be added to the DOM to be considered with the document.load (which I believe was the poster's solution), but a better approach is to properly preload them after the document load, using something like PreloadJS (http://createjs.com/preloadjs).