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

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)),
let radius = 60 + 2 * i * r;
translate(r * i * xr, r * i * yr);
console.log(r);
pop();
}
noLoop()
}
``````

The biggest circle is supposed to be tangent with the second biggest at an arbitrary point, but they are intersecting.

1 Like

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

3 Likes

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.

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

1 Like