# Rotating array of circles around a circle
**URL:** https://discourse.processing.org/t/rotating-array-of-circles-around-a-circle/2676
**Category:** Coding Questions
**Created:** [August 16, 2018, 2:00am UTC](https://discourse.processing.org/t/rotating-array-of-circles-around-a-circle/2676 "2018-08-16T02:00:18Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@leo](https://discourse.processing.org/u/leo)
#### Post date: [August 16, 2018, 2:00am UTC](https://discourse.processing.org/t/rotating-array-of-circles-around-a-circle/2676/1 "2018-08-16T02:00:18Z")
```auto
var canvas;
var width = window.innerWidth;
var height = window.innerHeight;
var circles = [];
var lines = [];
var xoff = 0;
var angle = 0;
class Circles{
constructor(x, y, rad, color){
this.x = x;
this.y = y;
this.anchx = x;
this.anchy = y;
this.rad = rad;
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);
ellipse(this.x, this.y, this.rad, this.rad);
}
}
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.
---
### Author:  [@tony](https://discourse.processing.org/u/tony)
#### Post date: [August 16, 2018, 5:23am UTC](https://discourse.processing.org/t/rotating-array-of-circles-around-a-circle/2676/2 "2018-08-16T05:23:43Z")
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()](https://p5js.org/reference/#/p5/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()](https://p5js.org/reference/#/p5/rotate) is cumulative as well. However, it uses RADIANS (unless specified with [angleMode()](https://p5js.org/reference/#/p5/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](https://www.openprocessing.org/sketch/580708) until you’ve done your homework!
---
### Author:  [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [August 16, 2018, 5:34am UTC](https://discourse.processing.org/t/rotating-array-of-circles-around-a-circle/2676/3 "2018-08-16T05:34:44Z")
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:
```auto
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();
}
}
```
---
### Author:  [@leo](https://discourse.processing.org/u/leo)
#### Post date: [August 16, 2018, 10:03am UTC](https://discourse.processing.org/t/rotating-array-of-circles-around-a-circle/2676/4 "2018-08-16T10:03:30Z")
I learned a lot with your answer, i will definetly research this matrix transformation theory.
Thanks
Leo
---
### Author:  [@leo](https://discourse.processing.org/u/leo)
#### Post date: [August 16, 2018, 10:27am UTC](https://discourse.processing.org/t/rotating-array-of-circles-around-a-circle/2676/5 "2018-08-16T10:27:13Z")
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
---
### Author:  [@leo](https://discourse.processing.org/u/leo)
#### Post date: [August 17, 2018, 12:26am UTC](https://discourse.processing.org/t/rotating-array-of-circles-around-a-circle/2676/6 "2018-08-17T00:26:46Z")
```auto
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 preload(){
images[0] = loadImage('images/img0.jpg');
images[1] = loadImage('images/img1.jpg');
images[2] = loadImage('images/img2.jpg');
images[3] = loadImage('images/img3.jpg');
images[4] = loadImage('images/img4.jpg');
images[5] = loadImage('images/img5.jpg');
images[6] = loadImage('images/img6.jpg');
images[7] = loadImage('images/img7.jpg');
images[8] = loadImage('images/img8.jpg');
images[9] = loadImage('images/img9.jpg');
}
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?
---
### Author:  [@leo](https://discourse.processing.org/u/leo)
#### Post date: [August 17, 2018, 2:39am UTC](https://discourse.processing.org/t/rotating-array-of-circles-around-a-circle/2676/7 "2018-08-17T02:39:48Z")
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.
---
### Author:  [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [August 17, 2018, 3:58am UTC](https://discourse.processing.org/t/rotating-array-of-circles-around-a-circle/2676/8 "2018-08-17T03:58:22Z")
Consider this:
```auto
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.
---
### Author:  [@leo](https://discourse.processing.org/u/leo)
#### Post date: [August 17, 2018, 9:28pm UTC](https://discourse.processing.org/t/rotating-array-of-circles-around-a-circle/2676/9 "2018-08-17T21:28:27Z")
Yeah i got it now, thanks to all.
[codepen link](https://codepen.io/leonardo-cunha/pen/WKVgqp)