Turn a circle into a square

Hi,
I am not used to English, so the sentences may be strange.

When the mouse clicks on the moving circle, I want the clicked circle to be changed to a line.
The square should move like a mouse pointer.


boolean doSave = false;
int number = 20;
float x[] = new float[number];
float y[] = new float[number];
float speedX[] =  new float[number];
float speedY[] =  new float[number];
float r[] = new float[number];
int b[] = new int[number];


void setup() {
  size(1920, 1080);
  frameRate(60);
  background(0);
  fill(255, 122, 0);
  noStroke();
  rectMode(CENTER);
  for (int i=0; i<number; i++) {
    speedX[i] = random(0.1, 3);
    speedY[i] = random(0.1, 3);
    r[i] = random(10, 100);
    b[i] = (int)random(0, 255);
  }
  noStroke();
}

void draw() {
  background(171);
  rect(mouseX, mouseY, 100, 100);
  for (int i=0; i<number; i++) {
    x[i] += speedX[i];
    y[i] += speedY[i];
    if (x[i] > width || x[i] < 0)  speedX[i] = speedX[i] * -1;
    if (y[i] > height || y[i] < 0)  speedY[i] = speedY[i] * -1;
    fill(b[i]);
    ellipse(x[i], y[i], r[i], r[i]);
  }
}

1 Like

Hello @student00,

Steps:

  • Create an array to keep track of shapes
    0 for square, 1 for circle for example
  • Use the dist() function to check distance between (x[i], y[i]) and (mouseX, mouseY)
  • if (dist < 50) check if mouse is pressed; use a suitable value
  • If mouse is pressed set shape array to 0 or 1
  • At end of loop draw the shape with an if else statement to select the shape from the array

These are some quick points to get you thinking about this.
I did get this to work with your code!

Once you progress you can take a look here:

:)

3 Likes