Oscillating two ellipses after executing Lerp();

Get Help p5.js
#1

Hey guys,

Im trying to make two single ellipses rotate on the Y axis of the canvas, AFTER utilising the lerp() method to allow them to incrementally approach the centre of the canvas.

The lerp method on the Y axis variable works perfectly fine, but executing a rotate on the SAME ellipse and the way of executing this is escaping me completely.

function setup() {
  createCanvas(400, 400);
  
  yPos1 = height;
  yPos2 = 0;
  
  target = height / 2;
  
  angle = 0;
  
  oneQ = width * 0.33;
  threeQ = width * 0.66;
}

function draw() {
  background(0, 15);
  

  yPos1 = lerp(yPos1, target, 0.02);
  
  ellipse(oneQ, yPos1, 60, 60);
  push();
  rotate(angle);
  ellipseMode(CORNER);
  ellipse(oneQ, yPos1, 60, 60);
  angle ++;
 pop();
  
  yPos2 = lerp(yPos2, target, 0.02);
  ellipse(threeQ, yPos2, 60, 60);
  push();
  rotate(angle);
  ellipseMode(CORNER);
  angle --;
  pop();
  
}

Both ellipses come from opposite ends of the y axis, incrementing to the centre. After this has completed, i want to execute a rotation of both ellipses that mirror eachother. Imagine a mirror vertically placed down the middle of the canvas, the ellipses, on either side, both rotate 180/ PI_HALF, and when touching the imaginative mirror split, they reverse at the same speed till the point they reach the opposite side of the split and this loops over nd over (an if statement will do most likely).

Here is a link to the example of the code above showcasing what has been done so far:

https://editor.p5js.org/fraserjamieson/sketches/V2nwHu2wR

And, here is another coding example of the simple rotation effect for the ellipse id like to execute AFTER both shapes have met in the middle of the canvas:

EDIT: the attached link for the ‘rotation in place’ didnt work. I will insert the code below:

  push();
  
  translate(100, 100);
  
  rotate(angle);
  
  ellipseMode(CORNER);
  
  /*
  	transformations are reset at the end of
    each draw loop, so this ellipse would not
    be affected by the translate and rotate 
    functions below, regardless of whether you
    use push() and pop().
  */
  ellipse(0,0, 30);
  
  angle ++;
  
  pop();

Simply the above implements a rotation in place, and i cant execute this subsequently after the initial ellipse transformation.

hopefully thats enough info, if not, ill try giving more context.

Thanks !!!

#2

Hi!
I wonder why you are trying to do the reverse movement using rotate() …
I’m sure it is possible to make it work, but you can achieve this in a simple way, just by introducing a Boolean that toggles your current direction and target values.
I made a simple sketch [p5.js Web Editor]
(in this case I removed the circle that goes around) that shows a possible solution.
I hope it helps and might give you new ideas…

1 Like