# How to draw circles tangent to each other at random points

**URL:** <https://discourse.processing.org/t/how-to-draw-circles-tangent-to-each-other-at-random-points/8869>\
**Category:** Coding Questions\
**Created:** [March 2, 2019, 10:58pm UTC](https://discourse.processing.org/t/how-to-draw-circles-tangent-to-each-other-at-random-points/8869 "2019-03-02T22:58:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [March 2, 2019, 10:58pm UTC](https://discourse.processing.org/t/how-to-draw-circles-tangent-to-each-other-at-random-points/8869/1 "2019-03-02T22:58:46Z")

</div>

I intend to draw circles tangent to each other at random points with no looping, but so far it doesn’t work as expected.

```auto
let r = 20;

function setup() {
    createCanvas(600, 600);

}

function draw() {
    background(255);
    translate(300, 300);
    ellipse(0, 0, 2, 2);
    noFill()
    for (let i = 0; i < 3; i++) {
        push();
        let randomNoise = random(0, 180);
        let xr = cos(radians(randomNoise)),
            yr = sin(radians(randomNoise));
        let radius = 60 + 2 * i * r;
        translate(r * i * xr, r * i * yr);
        console.log(r);
        console.log(radius);
        ellipse(0, 0, radius,radius);
        pop();
    }
    noLoop()
}

```

![circles](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/10575daba8679179b05f4d39b71fa379915c05ae.png)  
The biggest circle is supposed to be tangent with the second biggest at an arbitrary point, but they are intersecting.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [March 3, 2019, 2:40am UTC](https://discourse.processing.org/t/how-to-draw-circles-tangent-to-each-other-at-random-points/8869/2 "2019-03-03T02:40:19Z")

</div>

while you use  
push pop  
you always start from “abs 0,0” to a random direction

i try just to move by one “r” each time without push pop  
even that is not what you need,  
i think a little more printing can help you.  
[https://editor.p5js.org/kll/sketches/6OHyhF7Jq](https://editor.p5js.org/kll/sketches/6OHyhF7Jq)

 ![2019-03-03_09-39-41_snap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/825deb4ebd9418db14c16f2d1f44de199b00dd59.png)

---

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [March 3, 2019, 5:09am UTC](https://discourse.processing.org/t/how-to-draw-circles-tangent-to-each-other-at-random-points/8869/3 "2019-03-03T05:09:26Z")

</div>

> [@kll](#):
>
> push pop

Thanks a lot!!! This is very helpful.  
When I was using push pop I wanted to use the center of last circle as the new absolute (0,0), but looks like it is resetting to the center of the canvas instead, if that is where things went wrong.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [March 3, 2019, 5:12am UTC](https://discourse.processing.org/t/how-to-draw-circles-tangent-to-each-other-at-random-points/8869/4 "2019-03-03T05:12:10Z")

</div>

> [@blkpanther](#):
>
> use the center of last circle as the new absolute (0,0)

actually that is what translate is doing anyhow,  
but the radius addition thinking is different…