# Centering circles on the screen

**URL:** <https://discourse.processing.org/t/centering-circles-on-the-screen/557>\
**Category:** Coding Questions\
**Created:** [May 31, 2018, 9:28am UTC](https://discourse.processing.org/t/centering-circles-on-the-screen/557 "2018-05-31T09:28:40Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Code\_Hunter](https://avatars.discourse-cdn.com/v4/letter/c/848f3c/32.png) [@Code\_Hunter](https://discourse.processing.org/u/Code_Hunter)\
**Post date:** [May 31, 2018, 9:28am UTC](https://discourse.processing.org/t/centering-circles-on-the-screen/557/1 "2018-05-31T09:28:40Z")

</div>

I am new to this processing language, and java, but not new to programming.

I am trying to convert a program I made in another language to processing, but it isn’t working properly.

It is supposed to center the circles on the screen and it doesn’t. I tried translate to see if that would fix the problem and it doesn’t either. Can anyone help me with this?

References to the image were commented out ad progrm runs without errors.

Here is the code:

```auto
//PImage skyLeft;
//PImage skyRight;

int skyX1 = 0;
int skyX2 = 0;

float centerWidth = 0;
float centerHeight = 0;

float arc = 2 * PI / 12;

void setup() {
  size (910, 480);
  frameRate(60);

  int centerWidth = width/2;
  int centerHeight = height/2;

  translate(centerWidth, centerHeight);

  skyX1 = 0;
  //skyLeft=loadImage("sky.png");

  skyX2 = 909;
  //skyRight=loadImage("sky.png");
}

void draw() {
  background(0);

  //image(skyLeft, skyX1, 0);

  skyX1 -= 1;
  if (skyX1 < -909) {
    skyX1 = 909;
  }

  //image(skyRight, skyX2, 0);

  skyX2 -= 1;
  if (skyX2 < -909) {
    skyX2 = 909;
  }

  Clockface(1);
  MainClock();
}

void Clockface(int faceValue) {
  if (faceValue == 1) { 
    noFill();
    stroke(255, 215, 0);
    ellipse(centerWidth, centerHeight, 216, 216);
    ellipse(centerWidth, centerHeight, 184, 184);
  }
}

void MainClock() {
  float pi1 = PI * 1.5;
  float pi2 = PI * 3.5;

  int digit = 0;
  for (float t = pi1; t < pi2; t=t+arc) {
    text(digit, centerWidth+cos(t)*200, centerHeight+sin(t)*200);
    digit = digit + 1;
  }
}

```

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [May 31, 2018, 9:33am UTC](https://discourse.processing.org/t/centering-circles-on-the-screen/557/2 "2018-05-31T09:33:51Z")

</div>

Please format your code - use the icon in the editor `</>`

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 31, 2018, 9:34am UTC](https://discourse.processing.org/t/centering-circles-on-the-screen/557/3 "2018-05-31T09:34:27Z")

</div>

Just put the `translate(width/2,height/2);` in the draw function.

The code :

```auto
//PImage skyLeft;
//PImage skyRight;

int skyX1 = 0;
int skyX2 = 0;

float arc = 2 * PI / 12;

void setup() {
  size (910, 480);
  frameRate(60);

  skyX1 = 0;
  //skyLeft=loadImage(“sky.png”);

  skyX2 = 909;
  //skyRight=loadImage(“sky.png”);
}

void draw() {
  background(0);
  
  translate(width/2,height/2);
  
  //image(skyLeft, skyX1, 0);
  
  skyX1 -= 1;
  if (skyX1 < -909) {
  skyX1 = 909;
  }
  
  //image(skyRight, skyX2, 0);
  
  skyX2 -= 1;
  if (skyX2 < -909) {
  skyX2 = 909;
  }
  
  Clockface(1);
  MainClock();
}

void Clockface(int faceValue) {
  if (faceValue == 1) {
    noFill();
    stroke(255, 215, 0);
    ellipse(0, 0, 216, 216);
    ellipse(0, 0, 184, 184);
  }
}

void MainClock() {
  float pi1 = PI * 1.5;
  float pi2 = PI * 3.5;
  
  int digit = 0;
  for (float t = pi1; t < pi2; t=t+arc) {
  text(digit,cos(t)*200,sin(t)*200);
  digit = digit + 1;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Code\_Hunter](https://avatars.discourse-cdn.com/v4/letter/c/848f3c/32.png) [@Code\_Hunter](https://discourse.processing.org/u/Code_Hunter)\
**Post date:** [May 31, 2018, 10:13am UTC](https://discourse.processing.org/t/centering-circles-on-the-screen/557/4 "2018-05-31T10:13:50Z")

</div>

Thank you for your help. That did fix the issue.

I also completely removed the use of centerWidth and centerHeight and the translate command and all works fine. Why wasn’t the centerWidth and centerHeight working?

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [May 31, 2018, 10:22am UTC](https://discourse.processing.org/t/centering-circles-on-the-screen/557/5 "2018-05-31T10:22:15Z")

</div>

It’s unclear from your first post, but you seem to be declaring new `int` variables in `setup()` that shadow rather than set the `float` fields. The dimensions aren’t available before `setup()` but something like this should work -

```auto
int centerWidth;
int centerHeight;

void setup() {
  size (910, 480);
  frameRate(60);

  centerWidth = width/2;
  centerHeight = height/2;

// rest of code

```

---

<div class="post-metadata">

**Author:** ![Code\_Hunter](https://avatars.discourse-cdn.com/v4/letter/c/848f3c/32.png) [@Code\_Hunter](https://discourse.processing.org/u/Code_Hunter)\
**Post date:** [May 31, 2018, 10:32am UTC](https://discourse.processing.org/t/centering-circles-on-the-screen/557/6 "2018-05-31T10:32:27Z")

</div>

Strange. Maybe having them declared as 0 before setup and then ‘width/2’ and ‘height/2’ in setup was the issue. As I get get more used to this environment I will be able to decipher the problems better.

Thank you again for your help.

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [May 31, 2018, 10:45am UTC](https://discourse.processing.org/t/centering-circles-on-the-screen/557/7 "2018-05-31T10:45:18Z")

</div>

> [@Code\_Hunter](#):
>
> Strange. Maybe having them declared as 0 before setup and then ‘width/2’ and ‘height/2’ in setup was the issue. As I get get more used to this environment I will be able to decipher the problems better.

No!

If you write

```auto
float centerWidth = 0;

void setup() {
  int centerWidth = width/2;

```

you’re declaring a variable of type `int` that only exists inside `setup()` and setting that - you’re not setting the centerWidth that exists outside of `setup()` which remains at 0.

To set the “global” centerWidth you use `centerWidth = width/2` without the type declaration (`int`, `float`, etc.)

The 0 is the default value anyway - setting it to zero is exactly the same as not setting it at all (in that case).

---

<div class="post-metadata">

**Author:** ![Code\_Hunter](https://avatars.discourse-cdn.com/v4/letter/c/848f3c/32.png) [@Code\_Hunter](https://discourse.processing.org/u/Code_Hunter)\
**Post date:** [May 31, 2018, 10:48am UTC](https://discourse.processing.org/t/centering-circles-on-the-screen/557/8 "2018-05-31T10:48:36Z")

</div>

Thank you for the clarification. So much to learn and do. I am just taking things one command at a time trying to see how much I can convert. I think the biggest challenge is the ‘fonts’ I use.

Thank you again.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 31, 2018, 7:47pm UTC](https://discourse.processing.org/t/centering-circles-on-the-screen/557/9 "2018-05-31T19:47:59Z")

</div>

> [@Code\_Hunter](#):
>
> I think the biggest challenge is the ‘fonts’ I use.

When you are ready for them, I’d suggest walking through these two tutorials:

1. Strings and Drawing Text [Strings and Drawing Text / Processing.org](https://processing.org/tutorials/text/)
2. Typography [Typography / Processing.org](https://processing.org/tutorials/typography/)

There are also example sketches in the PDE Examples folder.

---

<div class="post-metadata">

**Author:** ![Code\_Hunter](https://avatars.discourse-cdn.com/v4/letter/c/848f3c/32.png) [@Code\_Hunter](https://discourse.processing.org/u/Code_Hunter)\
**Post date:** [May 31, 2018, 7:57pm UTC](https://discourse.processing.org/t/centering-circles-on-the-screen/557/10 "2018-05-31T19:57:14Z")

</div>

In my original code done in another language I use my own font data and effects. It will be fun to see if I can load the data and manipulate it in Processing.

Thank you. I will still read through those because I am interested in learning a new language.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 1, 2018, 12:09am UTC](https://discourse.processing.org/t/centering-circles-on-the-screen/557/11 "2018-06-01T00:09:10Z")

</div>

You might want to check out geomerative for one example of a library for manipulating font data and effects in Processing.

Here s a recent discussion of a font sketch on the old forum:

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/comment/124098/#Comment_124098)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.