# Rotating array of circles around a circle

``````
var canvas;
var width = window.innerWidth;
var height = window.innerHeight;
var circles = [];
var lines = [];
var xoff = 0;
var angle = 0;

class Circles{
this.x = x;
this.y = y;
this.anchx = x;
this.anchy = y;
this.color = color;
}

getLine(){
return new Lines(this);
}

move(){
// move the center of rotation
// to the center of the sketch

translate(width/2, height/2);

// rotate around the center of the sketch
rotate(40);
}

render(){
noStroke();
fill(80);

}
}

class Lines{
constructor(circle){
this.circle = circle;
}

render(){
stroke(0);
line(width/2, height/2, this.circle.x, this.circle.y);
}
}

function setup() {
canvas = createCanvas(window.innerWidth, window.innerHeight);
canvas.parent("canvas");
for(let i = 0; i < 9; i++){
circles.push(new Circles(width/3, height/2, 150, 80));
lines.push(circles[i].getLine());

}

}

function draw() {
background(50);
ellipse(width/2, height/2, 300, 300);
lines.forEach( (x) => {x.render();});
circles.forEach( (x) => {x.render(); x.move();});

}
``````

This is the result when i run it. First i donâ€™t know why it is displaying like this because i put the translate()
with width/2 and height/2, it should be rotating with the axis at the middle of the screen. So i would like some help on displaying this â€ścirclesâ€ť array around the big circle, and also rotating them. Also the lines areâ€™nt being drawn, just one and it is even in front of the big circle.

As a fellow programmer, I definitely understand the temptation to be clever (because who doesnâ€™t like one-liners?) but let me be clear - cleverness often comes at the cost of lowered readability. In the future, if you have a question like this again where you post code, it will be to your benefit to have readable code - the faster I can understand whatâ€™s going on, the sooner I can give you feedback. In this specific case, it wasnâ€™t problematic, but as code grows, so does the time it takes to read it. In addition, time spent trying to be clever, and condense 5 lines into 1 is time better spent working towards the actual problem (Iâ€™m totally guilty of this sometimes, but hey)

With that being said, here are a couple of the potential hiccups I saw

• Your use of translate() within move()
• The rotate(40)

The function translate() is cumulative. As the docs put it:

Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop().

The function rotate() is cumulative as well. However, it uses RADIANS (unless specified with angleMode().

If I had to give you a first step, it would be to do a little more research on the theory behind matrix transformations. But donâ€™t get discouraged! The grind is worth it

Donâ€™t check this sketch until youâ€™ve done your homework!

1 Like

Thereâ€™s a lot going on in that code. There doesnâ€™t have to be. Hereâ€™s a simple example of what I think youâ€™re trying to draw:

``````function setup() {
createCanvas(600,400);
}

function draw() {
background( 0 );
translate(width/2, height/2);
noStroke();
fill(128);
ellipse(0, 0, 150, 150);
for( var i = 0; i < 9; i++ ) {
rotate( TWO_PI/9.0 );
ellipse( 150, 0, 50, 50 );
stroke(196);
line( 0, 0, 150, 0 );
noStroke();
}
}
``````
1 Like

I learned a lot with your answer, i will definetly research this matrix transformation theory.
Thanks
Leo

Thank you for your input man, i really appreaciate it. This is definetly a way to do it, the thing is i need to be able to change the texture of each ellipse in the future, but yeah i understand what you mean with a lot going on in that code i will work on this.

Thank you again
Leo

``````var canvas;
var width = window.innerWidth;
var height = window.innerHeight;
let angle = 0;
var unitSize = [125,125,125,125,125,125,125,125,125];
var xoff = [0,1,2,3,4,5,6,7,8];
var x = [0,1,2,3,4,5,6,7,8];
var circles = [0,1,2,3,4,5,6,7,8];
var images = [0,1,2,3,4,5,6,7,8];
var texts = [
'texto 1',
'texto 2',
'texto 3',
'texto 4',
'texto 5',
'texto 6',
'texto 7',
'texto 8',
'texto 9'];

}

function setup() {
canvas = createCanvas(window.innerWidth, window.innerHeight, WEBGL);
canvas.parent("canvas");

}

function mouseWheel(event) {

angle += (event.delta)*0.001;

}

function draw() {
background( 255 );

noStroke();
fill(128);
texture(images[9]);
ellipse(0, 0, 260, 260);
rotate(angle);

for (var i = x.length - 1; i >= 0; i--) {
x[i] = map(noise(xoff[i]), 0 , 1 , 200 , 230);
xoff[i] += 0.01;
}

angle = angle + 0.0007;

for( var i = 0; i < circles.length; i++) {
rotate( TWO_PI/9.0 );
texture(images[i]);

ellipse( x[i], 0, unitSize[i], unitSize[i] );

}

}
``````

So thanks to TfGuy44 i was able to do this, it is rotating around and with noise()it has smooth random waves. Does anyone knows how can i change this unitSize (wich is the basicaly the ellipse size) when i hover the ellipse?

can you help me with this? the images are like in the case 1, they are not facing up all the time, only in the right side.

Consider this:

``````function setup() {
createCanvas(600,400);
}

function draw() {
background( 0 );
translate(width/2, height/2);
noStroke();
fill(128);
ellipse(0, 0, 150, 150);
for(var i = 0; i < 9; i++) {
fill(128);
var x = 150 * cos(i * TWO_PI/9.0);
var y = 150 * sin(i * TWO_PI/9.0);
ellipse(x, y, 50, 50);
fill(0);
text("A", x, y);
stroke(196);
line(0, 0, x, y);
noStroke();
}
}
``````

Notice that it no longer uses `rotate()`! Instead it does some simple trig to find the centers of each surrounding circle.

2 Likes

Yeah i got it now, thanks to all.