What is wrong with this simple code

p5.js Beginners
1

When the ball goes to the down right corner it freezes. I tried everything. What is wrong with that code.

let x = 50
let y = 50
let s1 = 1
let s2 = 1
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  x = x + s1
  y = y + s2
  circle(x,y,100)
  if(x>50 && y > 50){
    s1 = 0
    s2 = 1
  }
  if(x> 50 && y > 350){ 
  s1 = 1
  s2 = 0
  }
  if(x > 350 && y > 350){
     s1 =0
    s2 = -1
     }
}
2

What is your goal?

You always use >

Maybe in some places you might want < ?

here is my way



int x = 50;
int y = 50;
int s1 = 1;
int s2 = 1;

void setup() {
  size(400, 400);
}

void  draw() {
  background(220);

  x = x + s1;
  y = y + s2;

  ellipse(x, y, 100, 100);

  if (x>50 && y > 50) {

    s1 = 0;
    s2 = 1;
  }

  if (x> 50 && y > 350) {
    print("c1");
    s1 = 1;
    s2 = 0;
  }

  if (x > 350 ) { // && y > 350) {
    s1 =0;
    s2 = -1;
  }//if

  if (y<50) {
    s1=-1;
    s2=0;
  }
}//func
1 Like
3

Thanks, @Chrisir.

I had to add this block to the end of the draw() function to keep the ellipse within bounds, after it has completed its journey, and arrived back in the upper left corner:

  if (x<50) {
    s1=1;
    s2=1;
  }

Here it is, translated to p5.js, with that block added:

let x = 50;
let y = 50;
let s1 = 1;
let s2 = 1;

function setup() {
  createCanvas(400, 400);
} // end setup func 

function draw() {
  background(220);
  x = x + s1;
  y = y + s2;
  ellipse(x, y, 100, 100);

  if (x > 50 && y > 50) {
    s1 = 0;
    s2 = 1;
  }

  if (x > 50 && y > 350) {
    print("c1");
    s1 = 1;
    s2 = 0;
  }

  if (x > 350 ) { // && y > 350) {
    s1 = 0;
    s2 = -1;
  }

  if (y < 50) {
    s1 = -1;
    s2 = 0;
  }
  
  if (x < 50) {
    s1 = 1;
    s2 = 1;
  }
} // end draw func

EDITED 2x on December 26, 2021 to make adjustments to the code.

1 Like
4

Below is a refinement of the p5.js code that provides flexibility for changing the size of the canvas and the ellipse. The code could be refactored further to reorganize the conditional blocks.

let diam;
let x, y, dx, dy;

function setup() {
  createCanvas(400, 400);
  diam = 80;
  x = diam / 2;
  y = diam / 2;
  dx = 0;
  dy = 1;
} // end setup func 

function draw() {
  background(220);
  x = x + dx;
  y = y + dy;

  ellipse(x, y, diam, diam);

  if (x <= diam / 2 && y <= diam / 2) { // upper left
    dx = 0;
    dy = 1;
  }

  if (x <= diam / 2 && y >= height - diam / 2) { // lower left
    dx = 1;
    dy = 0;
  }

  if (x >= width - diam / 2  &&  y >= height - diam / 2){ // lower right
    dx = 0;
    dy = -1;
  }

  if (y <= diam / 2 && x >= width - diam / 2) { // upper right
    dx = -1;
    dy = 0;
  }
} // end draw func
5

with arrays - in java flavor


//

final int phaseDown   = 0; 
final int phaseRight  = 1;
final int phaseUp     = 2;
final int phaseLeft   = 3;
int currentPhase = phaseDown; 

final int diam = 80;

PVector[] listPVectorSpeed ={
  new PVector(0, 1), 
  new PVector(1, 0), 
  new PVector(0, -1), 
  new PVector(-1, 0)
};

PVector[] listPVectorCorners = new PVector[4];

float x = diam/2;
float y = diam/2;

// ------------------------------------------------------

void setup() {
  size(400, 400);

  listPVectorCorners [0] = new PVector(diam / 2, height - diam / 2);  
  listPVectorCorners [1] = new PVector(width - diam / 2, height - diam / 2); 
  listPVectorCorners [2] = new PVector(width - diam / 2, diam / 2);
  listPVectorCorners [3] = new PVector(diam / 2, diam / 2);
}

void  draw() {
  background(220);

  moveAndRender(); 
  updateCurrentPhase();
  text(currentPhase, 19, 19);
} //func

// ------------------------------------------------------

void moveAndRender() {
  x = x + listPVectorSpeed[currentPhase].x;
  y = y + listPVectorSpeed[currentPhase].y;

  ellipse(x, y, diam, diam);
}

void updateCurrentPhase() {
  PVector pv = listPVectorCorners[currentPhase].copy();
  if (dist(pv.x, pv.y, x, y)<12) {
    x=pv.x; 
    y=pv.y;
    currentPhase++;
    if (currentPhase>3) {
      currentPhase=0;
    }
  }
}
//
1 Like