# Turn a circle into a square

**URL:** https://discourse.processing.org/t/turn-a-circle-into-a-square/37509
**Category:** Coding Questions
**Tags:** homework
**Created:** [June 12, 2022, 5:41pm UTC](https://discourse.processing.org/t/turn-a-circle-into-a-square/37509 "2022-06-12T17:41:20Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![student00](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@student00](https://discourse.processing.org/u/student00)
#### Post date: [June 12, 2022, 5:41pm UTC](https://discourse.processing.org/t/turn-a-circle-into-a-square/37509/1 "2022-06-12T17:41:21Z")

</div>

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.

```auto

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]);
  }
}

```

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [June 13, 2022, 3:33am UTC](https://discourse.processing.org/t/turn-a-circle-into-a-square/37509/2 "2022-06-13T03:33:49Z")

</div>

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!

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/e/5ece1476969a7e36c1cda0ae23bc8a0ad51be45c.png)

Once you progress you can take a look here:

> **[Objects](https://processing.org/tutorials/objects/)**
>
> The basics of object-oriented programming.

`:)`