# Animating a background 'pulse' with easing equation

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) '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.

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: 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);  • 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? – codinghands Apr 7 '13 at 4:56
• 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); – Seth Battin Apr 7 '13 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) • 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 ? – GameAlchemist Apr 6 '13 at 20:40
• @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. – Seth Battin Apr 6 '13 at 21:34
• 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 ? – GameAlchemist Apr 6 '13 at 21:40
• Wow. Well, congratulations on writing proving yourself correct. – Seth Battin Apr 6 '13 at 21:51
• Hi Miro - thanks for your answer. As Vincent said: "And how do you use the rational function?" – codinghands Apr 7 '13 at 4:55