# How to apply easing to p5js sketch

**URL:** <https://discourse.processing.org/t/how-to-apply-easing-to-p5js-sketch/27322>\
**Category:** Coding Questions\
**Created:** [January 23, 2021, 11:54pm UTC](https://discourse.processing.org/t/how-to-apply-easing-to-p5js-sketch/27322 "2021-01-23T23:54:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![StudioBoe](https://avatars.discourse-cdn.com/v4/letter/s/b9bd4f/32.png) [@StudioBoe](https://discourse.processing.org/u/StudioBoe)\
**Post date:** [January 23, 2021, 11:54pm UTC](https://discourse.processing.org/t/how-to-apply-easing-to-p5js-sketch/27322/1 "2021-01-23T23:54:19Z")

</div>

Complete beginner here so apologies for what is probably an obvious solution —

I’m using the atan2 function in p5.js to create a simple sketch where an arrow (imported svg) is following the cursor. How would one add easing to the movement?

Code is below

```auto
var img1;
var x = 0;
var y = 0;

function preload (){
    img1 = loadImage("arrow_02.svg");
}

function setup() {
    createCanvas(windowWidth, windowHeight);
}

function draw() {
    background(0);
     
    let posX = width/2;
    let posY = height/2;
      
    let angle = atan2(mouseY-posY, mouseX-posX);
  
    translate(posX, posY);
    rotate(angle);
    imageMode(CENTER);
    image(img1, x, y, 500,500);

}

```

Here’s a link to my sketch — [p5.js Web Editor](https://editor.p5js.org/StudioBo/sketches/QGGXcXBmB)

Many thanks in advance,  
V.

---

<div class="post-metadata">

**Author:** ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)\
**Post date:** [January 24, 2021, 6:24am UTC](https://discourse.processing.org/t/how-to-apply-easing-to-p5js-sketch/27322/2 "2021-01-24T06:24:37Z")

</div>

The easiest way will be using `lerp`

```auto
var img1;
var x = 0;
var y = 0;

let angle = 0

function preload() {
  img1 = loadImage("arrow_02.svg");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0);

  let posX = windowWidth / 2;
  let posY = windowHeight / 2;

  let tAngle = atan2(mouseY - posY, mouseX - posX);

  angle = lerp(angle, tAngle, 0.1)

  translate(posX, posY);
  rotate(angle);
  imageMode(CENTER);
  image(img1, x, y, posX, posX);
}

```

---

<div class="post-metadata">

**Author:** ![StudioBoe](https://avatars.discourse-cdn.com/v4/letter/s/b9bd4f/32.png) [@StudioBoe](https://discourse.processing.org/u/StudioBoe)\
**Post date:** [January 24, 2021, 11:12pm UTC](https://discourse.processing.org/t/how-to-apply-easing-to-p5js-sketch/27322/3 "2021-01-24T23:12:03Z")

</div>

Many thanks for the quick answer. It does exactly what I needed it to.