Alternating ellipse one at a time

Get Help p5.js
#1

Hi guys,

Trying to alternate two ellipse from one end of canvas before getting to the middle, stopping one dead in its tracks, before initiating movement from the other in the opposite direction. They must move asynchronously.

Below is what i have so far, im trying to utilise booleans to my advantage but no luck:

const size = 600;

let yPos1, yPos2, oneQ, threeQ, target1,target2, towardsCenter;
//let ySpeed, angle;

function setup() {
createCanvas(size, size); 

// Initializing the variables:  
yPos1 = height - 100;
yPos2 = 100;  

x2 = 400;  
x = 200;
target2 = height / 2;
moving = true;
}

xSpeed = 5;
xSpeed2 = 5;

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

  let oneC = ellipse(x, yPos2, 100, 100);
  x = x + xSpeed;
  
  let twoC = ellipse(x2, yPos1, 100, 100);
  
  stopCircle(x, x2, oneC, twoC);
  
}

function stopCircle(xPos, xPos2, circ, circ2) {
  
  if (moving){ // if left circle moving  
    if (xPos > width / 2 - 10 || xPos < 0 + 60){
    moving = false; 
    xSpeed = xSpeed + 0;
      
  } else { // if left circle not moving. now trying to stop second right-most circle, and move the first one across half canvas.
    xSpeed2 = xSpeed2 * -1;
    if (xPos2 < width / 2 || xPos2 > width - 60){
      moving = true;
      xSpeed2 = xSpeed2 + 0;
  }
  }
    
    x2 = x2 - xSpeed2; // initiate right circle movement along x-axis towards center
  }

here is the link: code

realise im way off but spending too long on it, and need a small nudge in the right direction. Thanks.

#2

Below is my updated attempt.

const size = 600;

let yPos1, yPos2, oneQ, threeQ, target1,target2, towardsCenter;
//let ySpeed, angle;

function setup() {
createCanvas(size, size); 

// Initializing the variables:  
yPos1 = height - 100;
yPos2 = 100;  

x2 = 400;  
x = 200;
target2 = height / 2;
moving = true;
  
}

xSpeed = 5;
xSpeed2 = 5;

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

  let oneC = ellipse(x, yPos2, 100, 100);
  x = x + xSpeed;
  
  let twoC = ellipse(x2, yPos1, 100, 100);
  
  
  stopCircle(x, x2, oneC, twoC);
}

function stopCircle(xPos, xPos2, circ, circ2) {
  if (moving){
    if (xPos > width / 2 - 20 || xPos < 31){
      moving = false;
      xSpeed = 0;
      x2 += xSpeed2; // initiate right circle movement along x-axis 
    }
  } else if (x2 >width - 20) { // if top circle not moving 
      xSpeed2 = 0;
      xSpeed *= -1;
  }
  
}

Im on the right tracks with using the boolean, however cant seem to encapsulate resuable code into the exercise to allow the two ellipses to continuous move after each reaches its target in the canvas.

Feel like im misunderstanding or failing to use easy tools to allow the asynchronous nature of the ellipses to take place.

To recap- i want each to stop at edge points in their consigned half of the canvas. When one reaches one edge, say the middle point, it stops dead, and the opposite ellipse continues on its path to the width. THAT then stops dead, the previous continues back to 0 on x coordinate path, stops DEAD and so on.

Really would appreciate some pointers guys i suck at this.

Fraser

#3

Hello! Hope I understood you correctly:

let canvasSize = 600;
let posX1 = 100;
let posY1 = 100;
let circleOneS = 1;
let posX2 = canvasSize / 2;
let posY2 = canvasSize - 100;
let circleTwoS = 1;
let targetUpper = canvasSize / 2;
let targetLower = 100;

function setup() {
createCanvas(canvasSize, canvasSize);
}

function draw() {
background(0);
circleOne();
updatecircleOne();
circleTwo();
updatecircleTwo();
}

function circleOne() {
fill(255);
ellipse(posX1, posY1, 100, 100);
if (posX1 < targetUpper && posX2 == targetUpper) {
posX1 += circleOneS;
}
}

function updatecircleOne() {
if (posX2 == targetLower && posX1 > targetLower) {
posX1 -= circleOneS;
}
}

function circleTwo() {
fill(255);
ellipse(posX2, posY2, 100, 100);
if (posX1 == targetUpper && posX2 > targetLower) {
posX2 -= circleTwoS;
}
}

function updatecircleTwo() {
if (posX1 == targetLower && posX2 < targetUpper) {
posX2 += circleTwoS;
}
}

I am sure there are a lot of ways to do this, but you can take mine for your reference :smiling_face:
Please tell me if you have other questions, I am here to help.