P5 Questions! How to change direction of object

p5.js Coding Questions
1

Hi,

I’m new to javascript and am having a hard time figuring out how to move the balls up and down instead of left to right.

Thanks

function setup() {
  createCanvas(600, 200);
}

var ball = 0;
var ballSpeed = 10;
var ballChangeX = ballSpeed;

var ball2 = 100;
var ballSpeed2 = 5;
var ballChangeX2 = ballSpeed2;

function draw() {
  background(220);
  fill(200, 200, 0);
  ellipse(ball, height/2, 100);
  ellipse(ball2, height/4, 75);
  ball = ball + ballChangeX;
  ball2 = ball2 + ballChangeX2;

  // Check if ball is off right hand side of screen
  if (ball >= width) {
    ballChangeX = -ballSpeed;
  }
  if (ball2 >= width) {
    ballChangeX2 = -ballSpeed2;
  }

  // Check if ball is off left hand side of screen
  if (ball <= 0) {
    ballChangeX = ballSpeed;
  }
  if (ball2 <= 0) {
    ballChangeX2 = ballSpeed2;
  }
}
1 Like
2

Take a look at the ellipse function, it takes two arguments at the beginning x and y which are the coordinates where you draw it. As y represents the vertical dimension, change this line :

ellipse(width/2, ball, 100);

//And this one too so the ball is bouncing in height not in width: 

if (ball >= height) {
  ballChangeX = -ballSpeed;
}
2 Likes