0

I'm hoping someone can explain how the the below function expression works. The parameter 'p' has not been assigned a value, however it is used in the body of the function for calculations (defining the "angle" and "tail" variables) and as an argument object when draw() is called. When you step through the code, you can see that parameter 'p' does, indeed, have a value (see attached image)- but I don't understand where that value comes from. Please note that 'p' is not noted anywhere else upon review of the full code.

When you log 'p' to the console you see the following values, which continue to increase as the application runs: Image of console.log(p);

Here is the full function expression and the function call: 

var draw = function(p) { 
  $.fillStyle = "hsla(38,5%,12%,.90)";
  $.fillRect(0, 0, w, h); 
  $.fillStyle = "hsla(38, 25%, 90%, 1)"; 
  $.strokeStyle = "hsla(38, 25%, 90%, 1)";
  for (var i = 0; i < numh; i++)
    for (var j = 0; j < numw; j++) {
      var diagnalW = j * spacing +
        (i % 2 ? 0 : spacing / 2);
      var diagnalH = i * spacing;
      var arr = [position[0] - diagnalW,
          position[1] - diagnalH
        ],
        wave = Math.sqrt(arr[0] * arr[0] +
          arr[1] * arr[1]),
        arr = [arr[0] / wave, arr[1] / wave],
        angle = 50 * (Math.cos(p / 360 - wave / 105) - 1);
      $.beginPath();
      $.arc(diagnalW + arr[0] * angle, diagnalH +
        arr[1] * angle, 2.8, 0, 2 * Math.PI, false);
      $.closePath();
      $.fill();
      for (var n = 0; n < 5; n++) {
        var tail = 50 * (Math.cos((p - 50 * n) /
          360 - wave / 105) - 1);
        $.beginPath();
        $.moveTo(diagnalW + arr[0] * angle, diagnalH +
          arr[1] * angle);
        $.lineWidth = 5 - n;
        $.lineTo(diagnalW + arr[0] * tail, diagnalH + arr[1] * tail);
        $.stroke()
      }
    }
};

var anim = function(p) {
  window.requestAnimationFrame(anim);
  draw(p);
};
anim();

I understand everything about this code with the exception of how 'p' obtains the values shown in the console. Also - in case it wasn't clear, this is an html5 canvas application.

(Side note: No, $ in the above isn't jQuery. It's just what the original author uses for her canvas context object.)

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
Michelle
  • 3
  • 2

2 Answers2

2

In the first call to draw, p will have the value undefined because anim() doesn't pass a value for p, and anim then uses p when calling draw.

After that, though, draw is called by the browser, not by that code, because it's being used as the callback for requestAnimationFrame. The browser will call it with a high-resolution timer value, which is what you're seeing in p.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Oh! That makes so much sense. Thank you so much. Sorry for all of the previous confusion regarding my post. Unfortunately, I cannot upvote your response because this is a new account but your answer is fantastic. Thanks again! – Michelle Aug 05 '17 at 15:53
  • 1
    Will do! Thanks again! – Michelle Aug 05 '17 at 15:55
2

p is a parameter of a callback for window.requestAnimationFrame

A parameter specifying a function to call when it's time to update your animation for the next repaint. The callback has one single argument, a DOMHighResTimeStamp, which indicates the current time (the time returned from performance.now()) for when requestAnimationFrame starts to fire callbacks.

Nina Scholz
  • 376,160
  • 25
  • 347
  • 392