How to apply easing to p5js sketch

p5.js Coding Questions
1

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

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

Many thanks in advance,
V.

1 Like
2

The easiest way will be using lerp

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);
}
1 Like
3

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