Centering circles on the screen

Processing Coding Questions
1

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:

//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;
  }
}
1 Like
2

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

1 Like
3

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

The code :

//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;
  }
}
2 Likes
4

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?

5

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 -

int centerWidth;
int centerHeight;

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

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

// rest of code
1 Like
6

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.

7

No!

If you write

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).

2 Likes
8

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.

2 Likes
9

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
  2. Typography Typography / Processing.org

There are also example sketches in the PDE Examples folder.

10

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.

11

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: