Ayuda! Como hacer que una figura tome una nueva posición aleatoria?

Hola! Si alguien me puede ayudar se lo agradecería mucho!
Tengo que dibujar dos figuras (circulo de 40 de diámetro y cuadrado de 30 x 30), y necesito que al clickear sobre alguna de estas figuras, pasen a tener un nueva ubicación aleatoria.

Hice esto pero no funciona porque algo esta mal y ya no me doy cuenta que es lo que falta y cual es el error!

float recX, recY, cirX, cirY;

void setup() {
size(400, 400);
}

void draw() {
background (0);

recX = random (width);
recY = random (height);
cirX = random (width);
cirY = random (height);
}

void mousePressed () {

if (dist(mouseX, mouseY, cirX, cirY)<20) {
cirX = random (width);
cirY = random (height);
}

if {
mouseX > recY &&;
mouseX < +30 &&;
mouseY > recY &&;
mouseY < recY +30;
}
}

http://Studio.ProcessingTogether.com/sp/pad/export/ro.9NGjx94YMTtlu

¡Hola! Estoy usando Google translate para que mi español sea malo. ¿Dónde dibujas el círculo y el rectángulo? El sorteo nulo pasa 60 (si no me equivoco) por segundo, por lo que le estarías dando al círculo y al rectángulo una nueva posición 60 veces por segundo, pero como no estás dibujando el círculo y el rectángulo que deseas verlos.
Puedes dibujar un rectángulo como este:
rect (X, Y, Width, height);
y un círculo como este:
elipse (X, Y, Width, Height);

Editar: También tu último dosificador de declaración if tiene un argumento para que no se ejecute
su declaración if debería verse así:

if (mouseX> recY && mouseX <+30 && mouseY> recY && mouseY <recY +30) {
// ejecuta su código aquí
}

Doge

Muchas gracias por responder!
ya dibuje el circulo y el cuadrado. Pero el aleatorio no esta funcionando. Que es lo que estará mal?
Se ve así:

solo los estás dibujando una vez, void setup(). La configuración de vacío solo se ejecuta cuando el programa se abre por primera vez, así que si quieres dibujar el círculo y el rectángulo de nuevo, te sugiero ponerlos en mousePressed()
para obtener más información, eche un vistazo a la referencia para el sorteo y la configuración de vacío
https://processing.org/reference/draw_.html

https://processing.org/reference/setup_.html

@lu4425 Tienes acceso a una referencia de Processing en español? La verdad, no se si hay version traducida. El caso es que tienes que mirar la definicion de setup() y draw() para que puedes entender como funciona Processing. Estos son dos funciones fundamentales. Si te animas al ingles, puedes chequear la referencia:

setup() / Reference / Processing.org
draw() / Reference / Processing.org

El caso es, como @DogeMastr ha explicado, tu tienes que llamar la funcion respectiva, rect() o ellipse(), despues de que assignas un valor aleatorio a tu variable.

En resumen: setup es una function que es llamada una sola vez y es ejecutada antes de draw(). Despues de que setup termina de ejecutar, draw es ejecutado 30 veces por segundo. Tu puedes dibujar tu rect y ellipse o dentro de draw() o dentro de mousePressed(). Estas dos funciones funcionan de una manera distinta, pero lo que importa es que cualquiera funciona para este reto.

Una cosa: No generes valores aleatorios en draw.

Hechale un vistazo al codigo que genere.

Suerte,

Kf

N.B. Para formatera el codigo en el foro, despues de formatear el codigo en el preprocesor de Processing (ctrl+t) para arreglar los espacios y las tabulaciones del código, copialo y pégalo aqui en el foro. Despues selecciona el código y le das click al buton con el siguiente símbolo: </>. Eso permite que tu codigo tengo un formato adecuado en este foro.

final int LADO_RECT=30; //unidades de pixeles
final int DIAMETRO=100; //unidades de pixeles

float recX, recY, cirX, cirY;

void setup() {
  size(400, 400);

  recX = random (width);
  recY = random (height);
  cirX = random (width);
  cirY = random (height);

  noStroke();  //No dibujar el borde de las figuras
  fill(255, 0, 0);  //Lenar las figuras de color rojo
}

void draw() {
  background (0);  //El fondo es negro

  rect(recX, recY, LADO_RECT, LADO_RECT);
  ellipse(cirX, cirY, DIAMETRO, DIAMETRO);
}

void mousePressed () {

  if (dist(mouseX, mouseY, cirX, cirY)<DIAMETRO/2) {
    cirX = random (width);
    cirY = random (height);
  }

  //ATENCION: El siguiente bloque fue modificado PERO esta incompleto. 
  //Se te deja como tarea completar esta parte
  if (
    mouseX > recY &&
    mouseX < +30 &&
    mouseY > recY &&
    mouseY < recY +30
    ) {
  }
}

1 of the 1st things I’ve learned in Processing is that its default frameRate() is 60 FPS: :relieved:

The default rate is 60 frames per second.

ok, muchas gracias!!

¡Muchas gracias! Si, ya lo modifique, pero de todas maneras no funciona el aleatorio de las figuras, porque evidentemente algo estoy aplicando mal. Cuando dibujo el aleatorio del cuadrado en donde deberia ir, no puedo ejecutar el aleatorio de las dos figuras. Ya no encuentro el error. :confounded: :confused:

Por fa, muestra tu código. Copia y pegalo aqui, formatealo.

Kf

Pude solucionarlo de la siguiente manera. No sé si sera la manera correcta de hacerlo pero ahora funciona!
Muchas gracias por la ayuda!!
El código quedó así:

int cuadrado=30; 
int diametro=40; 
float recX, recY, cirX, cirY;

void setup() {
  size(400, 400);

  recX = random (width);
  recY = random (height);
  cirX = random (width);
  cirY = random (height);

  noStroke();  
  fill(255, 0, 0);
}

void draw() {
  background (0); 
  rect(recX, recY, cuadrado, cuadrado);
  ellipse(cirX, cirY, diametro, diametro);
}

void mousePressed () {

  if (dist(mouseX, mouseY, cirX, cirY)<diametro/2) {
    cirX = random (width);
    cirY = random (height);
  }
  if (dist(mouseX, mouseY, recX, recY)<cuadrado*2) {
    recX = random (width);
    recY = random (height);
  }
}

todo lo que escribes dentro del setup() se ejecuta una única vez, por lo que la posición de tus figuras sólo cambia cuando cierras y ejecutas de nuevo el sketch. Si quieres que la posición cambie de forma dinámica tendrás que añadir código dentro de draw() para actualizar las variables que definen su posición cuando lo estimes oportuno, o en los métodos mousePressed o keyPressed tal y cómo has hecho :wink:

2 Likes