# What is wrong with this simple code

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
}
}
``````

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

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

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
``````

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;

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

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

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

listPVectorCorners  = new PVector(diam / 2, height - diam / 2);
listPVectorCorners  = new PVector(width - diam / 2, height - diam / 2);
listPVectorCorners  = new PVector(width - diam / 2, diam / 2);
listPVectorCorners  = 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