How can I center this?

Franz654

Ok this is my final project in this class. I need to have this centered as a 9x9 grid. and i don't know how to make it that.

void setup(){
size(720, 720);
background(0);
smooth();
rectMode(CENTER);
colorMode(RGB);

//this needs to be centered
}
void draw(){
noStroke();
  float x2= pmouseX;
float y2= pmouseY;
 background(0);

for (int y = 4; y <= height-12; y += 78) {
  for (int x = 6; x <= width-12; x += 78) {

     line(x, y, x2, y2);
    fill(y2,y2,x2);
    ellipse(x, y, x2/10, x2/10);


stroke(12, 240, 173, 60);
strokeWeight(1);
line (x,y,x2,y2);

  }
}
fill(x2,y2,x2);
rect(x2,y2,40,40);
rotate(PI/3.0);
}

kfrajer

to have this centered

What should be centered? Can you elaborate please?

When you refer to the 9x9 grid, are you referring to the ellipses? You have 10x10 pattern of ellipses. You want to change it to 9x9?

Kf

jeremydouglass

Repeating what @kfrajer says -- "this centered" is not clear. Is "this" the mouse controlled square? The pattern of lines? The whole sketch, which should have a big black border around it? Please provide more detail!

You should also mention what functions you have tried using to achieve the effect you want.

Franz654

Hello, yes sorry, I need to have the circles in a 9x9 grid that is centered in the center of the composition. I have tried changing for (int y = 4; y <= height-12; y += 78) { for (int x = 6; x <= width-12; x += 78) { but i can't find the right numbers to center this

kfrajer

It is easier if you use ellipseMode(CENTER); for starters: https://processing.org/reference/ellipseMode_.html

Then you can also use either the map or the lerp function:

https://processing.org/reference/map_.html

https://processing.org/reference/lerp_.html

An example is presented next using both functions.

Kf

int radius=50;
int nCircles=8;
void setup(){

  size(800,800);
  ellipseMode(CENTER);
  textAlign(CENTER,CENTER);
  rectMode(CENTER);
  fill(255);
}

void draw(){
  background(0);
  for(int i=1;i<nCircles+1;i++){  //REMARK: Starts from 1 instead of zero
    fill(255);  //White
    ellipse(map(i,0,nCircles+1,0,width),height*0.25,radius,radius);
    text(map(i,0,nCircles+1,0,width),map(i,0,nCircles+1,0,width),height*0.25+100);

    fill(92);  //Light gray
    ellipse(lerp(0,width,i/(nCircles+1.0)),height*0.75,radius,radius);
    text(lerp(0,width,i/(nCircles+1.0)),lerp(0,width,i/(nCircles+1.0)),height*0.75+100);
  }


}

kfrajer

However, to fully understand how to do what you want to do, and to fully understand these functions, you should take some pen and paper and do the calculation yourself. Take for example a square area and imagine you want to create a grid of circles there. How would you do it? How would you calculate the positions without using a calculator or internet?

Draw the grid on your square area. Does the intersection of the grids give you the center of the circles? Do you get enough circles on each side of the square?

You need to do this exercise yourself. It will make your life easier when it comes to understand these concepts. Then after you look up the documentation, you will be able to understand how map and lerp work.

Kf