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); }** Soy nuevo en p5.js e hice esto (mi primer código) pero no funciona como esperaba
Por favor ayúdame respondiendo este código **
Actualmente, su código no hará que la pelota "regrese" porque, si bien limita las posiciones x e y, no cambia las velocidades x e y (por lo que una vez que la pelota llega al borde, solo va a pega ahí). También tiene algunos defectos en la lógica de limitación de bordes.
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>Puede hacer algo como esto (visite codecademy para obtener más detalles: https://www.codecademy.com/courses/learn-p5js/lessons/p5js-animation )
speedx *= -1 Puedes hacer lo mismo con speedy