CODEWITHSUNDEEP
javascripthtmlwebp5.js
Arnav Gumber
Arnav Gumber

Reputation: 11

Ball not coming back after colliding in p5.js

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

Upvotes: 1

Views: 86

Answers (2)

Oscar Nguyen
Oscar Nguyen

Reputation: 53

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

Upvotes: 0

Paul Wheeler
Paul Wheeler

Reputation: 20140

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>

Upvotes: 1

Related Questions