Question

0

141

Views

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

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T09:05:05.225Z

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.

Your sliders are always positive so the ball can only move down and to the right.
When you check the y position against the minimum you modify the x position instead of the y position.
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>

Answer 2 · 2022-07-05T09:05:05.234Z

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

0

141

Ball not coming back after colliding in p5.js

2 answers

0

0

Find remote jobs

Andres GPT