Ball not coming back after colliding in p5.js

user_17916351 0
Viewed 48
var x, y, speed, speed2, speedx, speedy;

function setup() {
    createCanvas(1200, 630);
    x = 50;
    y = 300;

    speed = 20;
    speed2 = 20;

    speedx = createSlider(2, 50, 20);
    speedx.position(1000, 100);
    speedx.style('width', '200px');

    speedy = createSlider(10, 50, 20);
    speedy.position(1000, 150);
    speedy.style('width', '200px');
}

function draw() {
    background("white");

    x = x + speedx.value();
    y = y + speedy.value();
    if (x > 1170) {
        x = x - speedx.value();
    }
    if (x < 10) {
        x = x + speedx.value();
    }
    if (y > 610) {
        y = y - speedy.value();
    }
    if (y < 15) {
        x = x + speedx.value();
    }
    let color1 = color("black");
    fill(color1);
    ellipse(x, y, 20);
}

** I am new to p5.js and made this (my first code) but it is not working as I expected

Please help me by answering this code **

p5.js web html javascript
2 Answers

Currently your code isn't going to make the ball "come back" because while it is limiting the x and y positions, it doesn't change the x and y velocities (so once the ball gets to the edge it is just going to stick there). You also have a few defects in to edge limiting logic.

  1. Your sliders are always positive so the ball can only move down and to the right.
  2. When you check the y position against the minimum you modify the x position instead of the y position.
  3. When you check the x position against the minimum value you are adding the speeds, but presumably when this happens speed would be negative (i.e. moving to the left), so you still want to subtract.

var x, y, speedx, speedy;

function setup() {
  // make the canvas cover the window
  createCanvas(windowWidth, windowHeight);
  x = width / 2;
  y = height / 2;

  // create slider ranges such that things don't always go down and to the right
  speedx = createSlider(-10, 10, 2);
  speedx.position(10, 10);
  speedx.style("width", "200px");

  speedy = createSlider(-10, 10, 2);
  speedy.position(10, 50);
  speedy.style("width", "200px");
}

function draw() {
  background("white");

  x = x + speedx.value();
  y = y + speedy.value();
  if (x > width - 10) {
    x = x - speedx.value();
  }
  if (x < 10) {
    // presumably the reason we're going off the screen is that speedx is negative.
    x = x - speedx.value();
  }
  if (y > height - 10) {
    y = y - speedy.value();
  }
  if (y < 10) {
    y = y - speedy.value();
  }
  let color1 = color("black");
  fill(color1);
  ellipse(x, y, 20);
}
html, body {margin:0}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

user_2292470
user_177540990
Related