I'm trying to find a suitable easing equation (or other method) to animate an object so that it 'pulses' (imagine a 'spike' on a music visualiser, or see the image I drew badly below)

enter image description here

'v' is the value I'm using to scale. 't1' and 't2' mark the end of a single pulse.

The game I'm working on is a puzzler, but I'd like to have objects in the background pulse in time with user-selected music.

I'm sure it's just a case of knowing what to search for, but any advice would be appreciated on how best to achieve this.


2 Answers 2


My answer is similar to Miro's, but I think the Math ought to be a lot simpler. Of course, the details of your curve make all the difference. If you don't care precisely what the curve looks like, then all you need is the basic sawtooth.

var clock = function(x) {
  return (1-x) - floor(1-x);  //I like this method, though not the simplest.

var clockVal = clock(time);

That yields: a simple sawtooth

If you want to make it more curvy, raise it to some power:

var clockVal = Math.pow(clock(time), 2);
var clockVal = Math.pow(clock(time), 3);

squared sawtooth

cubed sawtooth

  • \$\begingroup\$ Interim results say this looks good - though in my original drawing there was a small amount of time over which the pulse 'spikes' (rather than right on t = 1). Any ideas? \$\endgroup\$ Commented Apr 7, 2013 at 4:56
  • 1
    \$\begingroup\$ Another way to give credit to @Miro; he already included that. Change the call to clock to input a longer period like so: var clockVal = clock(time / period); \$\endgroup\$ Commented Apr 7, 2013 at 5:30

I assume that you want to create periodic function so you need to periodize x:

p(x) = x/T - floor(x/T)

Then you'll create rational function from two linear functions.

f(x) = ( a*x + b ) / ( c*x + d )

You've got 2 points [0,V], [1,0] and together you have:

f(x) = (V - V * p(x)) / (1 + p(x) * shape)

enter image description here

  • \$\begingroup\$ p(x) = x/T - floor(x/T) : ten times faster with : (x/T) % 1 . How to be sure (c*x+ d) !== 0 ? And how do you use the rationnal function ? \$\endgroup\$ Commented Apr 6, 2013 at 20:40
  • \$\begingroup\$ @VincentPiel Modulo is usually associated with integers. Some languages may allow n % 1 to retrieve the decimal portion of the number, but it's not necessarily a good idea. And the claim that using the operator is "ten times faster" that some other operation is probably untrue. \$\endgroup\$ Commented Apr 6, 2013 at 21:34
  • \$\begingroup\$ jsperf.com/trunc-or-1/2 floor 92% slower (% 1) is faster, and valid in Javascript. The fact that it doesn't work in other languages doesn't seem like a good reason not to use it in Javascript. How to be sure (c*x+ d) !== 0 ? And how do you use the rationnal function ? \$\endgroup\$ Commented Apr 6, 2013 at 21:40
  • \$\begingroup\$ Wow. Well, congratulations on writing proving yourself correct. \$\endgroup\$ Commented Apr 6, 2013 at 21:51
  • \$\begingroup\$ Hi Miro - thanks for your answer. As Vincent said: "And how do you use the rational function?" \$\endgroup\$ Commented Apr 7, 2013 at 4:55

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .