#An explanation of how this simple movement is achieved.

13 messages · Page 1 of 1 (latest)

woven moss
#

O individuals who are more knowledgeable than me, I kindly ask the explanation of the code bellow, specifically how the movement is achieved.

let x = 100;
let y = 200;
let circleSpeedX = 3;
let circleSpeedY = 3;

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

function draw() {
  background(0);
  stroke(255);
  strokeWeight(4);
  noFill();
  ellipse(x, y, 100, 100);
  
  
  
  if (x > width - 50) {
    circleSpeedX = -3;
    circleSpeedY = random(-3, 3);
  } else if (x < 50) {
    circleSpeedX = 3;
    circleSpeedY = random(-3, 3);
  }
  
  if (y > height - 50) {
    circleSpeedY = -3;
    circleSpeedX = random(-3, 3);
  } else if (y < 50) {
    circleSpeedY = 3
    circleSpeedX = random(-3, 3);
  }
  
  x = x + circleSpeedX; 
  y = y + circleSpeedY;
}
tardy charm
#

Hmm this is incredibly simple code. You might learn more from it if instead of one of us explaining it, you explained what you think each section does.

woven moss
#

if (x > width - 50) {
circleSpeedX = -3; // this makes the ball to bounce backwards when x is > than width
circleSpeedY = random(-3, 3); // I have no idea what this is supposed to do, what it dies, and how it does it. I tried removing it from code to get a hint of what it does, but nothing much changed.

The rest are also same as above.

#

if (x > width - 50) {

} else if (x < 50) {

}

As for the code above, I think it is responsible for the ball bouncing on either direction, when it bounces, it's like the boundaries.

#

btw, if I can learn more from it, please then give me a hint, I don't understand how it can move about so freely, the most I could do is :

let x = 0, y = 0, csY = 5, csX = 5;
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  stroke(225);
  strokeWeight(5);
  fill(0);
  ellipse(x, y, 95);  
  
  if(x > width || x < 0 || y > width || y < 0 ){
    csY *= -1;
    csX *= -1;
  }
  
  y += csY;
  x += csX;
}
woven moss
#

okay, so I tried removing all the code lines with the random feature ( circleSpeedX = random(-3, 3);) , and the ball kept bouncing the same way as the code above; moving in one direction. So I think the random(-3, 3); is actually really important. But I still don't know what it does.

swift silo
#

It changes the circle's x speed to be a random floating value between -3 and 3 but not including 3

#

I assume you're using p5 js?

#

It can be helpful to search up function you don't understand

#

Like searching p5.js random function

woven moss
#

okay, so i tried adding the random function, and I have no idea what is happening;

let x = 0, y = 0, csY = 5, csX = 5;
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  stroke(225);
  strokeWeight(5);
  fill(0);
  ellipse(x, y, 95);  
  
  if(x > width || x < 0){
   csX *= -1;
   csY += random(5, -5);
  }
  
  if(y > width || y < 0){
     csY *= -1;
     //csX += random(5, -5);
  
}
  
  y += csY;
  x += csX;
}```
woven moss
#

hmm, it seems I knew almost nothing about the random element. Time to explore.