How to draw circles tangent to each other at random points

p5.js Coding Questions
1

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

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
The biggest circle is supposed to be tangent with the second biggest at an arbitrary point, but they are intersecting.

1 Like
2

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

2019-03-03_09-39-41_snap
2019-03-03_09-39-41_snap.png1593×786 78.2 KB

3 Likes
3

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.

4

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

1 Like