---

layout: default

---

<h3>Easing</h3>

<p>Move the mouse across the screen and the symbol will follow.

Between drawing each frame of the animation, the program

calculates the difference between the position of the

symbol and the cursor. If the distance is larger than

1 pixel, the symbol moves half of the distance from its

current position toward the cursor.</p>

<p><a href="http://processing.org/learning/basics/easing.html">Original Processing.org Example: Easing</a><br>

<div class="learning-demo"><script type="application/processing">

float x;

float y;

float targetX, targetY;

float easing = 0.05;

void setup()

size(200, 200);

smooth();

noStroke();

void draw()

{

background( 51 );

targetX = mouseX;

float dx = mouseX - x;

if(abs(dx) > 1) {

x += dx * easing;

}

targetY = mouseY;

float dy = mouseY - y;

if(abs(dy) > 1) {

y += dy * easing;

}

ellipse(x, y, 33, 33);

</script><canvas width="200" height="200"></canvas></div></p>

<div style="height:0px;width:0px;overflow:hidden;"></div>

<div class="code"><pre name="code" class="processing">// All Examples Written by Casey Reas</a> and Ben Fry</a>

// unless otherwise stated.

float x;

float y;

float targetX, targetY;

float easing = 0.05;

void setup()

{

size(200, 200);

smooth();

noStroke();

}

void draw()

{

background( 51 );

targetX = mouseX;

float dx = mouseX - x;

if(abs(dx) &gt; 1) {

x += dx * easing;

}

targetY = mouseY;

float dy = mouseY - y;

if(abs(dy) &gt; 1) {

y += dy * easing;

}

ellipse(x, y, 33, 33);

}</pre></div>