Ball not coming back after colliding in p5.js

Question

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

Answer 1

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 (ie 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>

Answer 2

You can do something like this (visit codecademy for details: https://www.codecademy.com/courses/learn-p5js/lessons/p5js-animation )

     speedx *= -1

You can do the same thing with speedy