# All these circles make a square?

**URL:** <https://discourse.processing.org/t/all-these-circles-make-a-square/12674>\
**Category:** Coding Questions\
**Created:** [July 11, 2019, 6:12pm UTC](https://discourse.processing.org/t/all-these-circles-make-a-square/12674 "2019-07-11T18:12:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 11, 2019, 6:12pm UTC](https://discourse.processing.org/t/all-these-circles-make-a-square/12674/1 "2019-07-11T18:12:08Z")

</div>

I’m probably missing something real basic, but I can’t seem to understand why all my circles seem to make squares.

```auto
void draw(){
    fill(255);
    text(this.electrons,this.x+30,this.y);
    fill(0);
    ellipseMode(CENTER);
    ellipse(this.x,this.y,20,20);
    for(int i=0;i<this.electrons;i++){
      float a = random(-20,20);
      float b = random(-20,20);
      fill(0);
      ellipse(this.x+a,this.y+b,5,5);
    }

```

this is the output

 ![09%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1518aec69cf61e86dfbf8399a714c7c2783ddad0.jpeg)

---

<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:** [July 11, 2019, 6:23pm UTC](https://discourse.processing.org/t/all-these-circles-make-a-square/12674/2 "2019-07-11T18:23:16Z")

</div>

Hello,

Try to isolate and see the outline of the shape first:

```auto
    background(0);
    noFill();
    stroke(255, 255, 0);
    strokeWeight(1);
    ellipse(50, 50, 10, 10);

```

And then try:

```auto
    background(0);
    fill(255, 255, 0);
    noStroke();
    ellipse(50, 50, 10, 10);

```

🙂

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 11, 2019, 6:39pm UTC](https://discourse.processing.org/t/all-these-circles-make-a-square/12674/3 "2019-07-11T18:39:35Z")

</div>

Thanks for your replies guys, I forgot I need to incorporate trig into the positions.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 11, 2019, 6:53pm UTC](https://discourse.processing.org/t/all-these-circles-make-a-square/12674/4 "2019-07-11T18:53:38Z")

</div>

> [@paulgoux](#):
>
> float a = random(-20,20);  
> float b = random(-20,20);

Yes, these lines let the circles appear inside a rectangle shape (as circles).

Instead, using trig (_Trigonometry_), you can have all the circles appear inside a circular shape.

Use a random angle and a random radius.

see

[https://www.processing.org/tutorials/trig/](https://www.processing.org/tutorials/trig/)

```auto
void setup() {
  size(800, 800);
  noStroke();
  ellipseMode(CENTER);
}

void draw() {
  float x=width/2;
  float y=height/2;

  for (int i=0; i<33; i++) {

    float radius = random(0, 200);
    float angle = random(0, TWO_PI);

    fill(random(255), random(255), random(255));

    float a=cos(angle) * radius; 
    float b=sin(angle) * radius;
    ellipse(x+a, y+b, 
      5, 5);
  }
}

```