(Processing) Fuction that draws a ring with the radius I assign-CodePudding

I am trying to create a function (ring) that allows me to draw multiple rings around the black circle by only changing the radius, but even when I call it multiple times in draw() it only draws one. I have tried checking if there is something wrong that restricts it to one, but I can't find it. Thank you for your time :)

//VOID //Set of written numbers String numbers = "87237462835465598709986654374649";

PFont font;
float r = 40; // Radius of the circle of the written numbers

void setup() 
{
  size(640, 480); 
  font = loadFont("AgencyFB-Reg-48.vlw"); //Create futuristic font
  textFont(font, 14);
  smooth();
}

void draw() 
{
  background(255);
  
//Black circle (center of the void)
  fill(0);
  noStroke();
  ellipse(550,80,r*2,r*2);
  //FUNCTION for the numbers
  ring(40);
 
  }
  
  void ring(float r) {
    // Circle for the written numbers
  translate(550, 80);
  noFill();
  noStroke();
  ellipse(0, 0, r, r);

  // We must keep track of our position along the curve
  float arclength = 0;

  // For every box
  for (int i = 0; i < numbers.length(); i=i 1)
  {
    // Instead of a constant width, we check the width of each character.
    char currentChar = numbers.charAt(i);
    float w = textWidth(currentChar);

    // Each box is centered so we move half the width
    arclength  = w/2;
    // Angle in radians is the arclength divided by the radius
    // Starting on the left side of the circle by adding PI
    float theta = PI   arclength / r;

    pushMatrix();
    // Polar to cartesian coordinate conversion
    translate(r*cos(theta), r*sin(theta));
    // Rotate the box
    rotate(theta PI/2); // rotation is offset by 90 degrees
    // Display the character
    fill(0);
    text(currentChar,0,0);
    popMatrix();
    // Move halfway again
    arclength  = w/2;
}
  }

CodePudding user response：

If you call ring() multiple times from draw() your code repeatedly calls translate(). Each one of these calls are additive, so the text just keeps getting further and further away. One way to stop this from happening is to reset it at the bottom of the ring function. This is done by using a reverse sign, e.g., translate(x,y) is changed to translate(-x,-y) at the end of the function to put it back where it was to start with. This change in code will allow you to see multiple rings of text.

float r = 40; // Radius of the circle of the written numbers
String numbers = "87237462835465598709986654374649";

void setup() {
  size(400, 400);
  smooth();
}

void draw() {
  background(255);
  fill(0);
  noStroke();
  ellipse(180, 180, r*2, r*2);
  for(int x = 40; x < 100; x =10){
  ring(x);
  }
}

void ring(float r) {
 translate(180, 180); // Move numbers to location of circle
  float arclength = 0;
  for (int i = 0; i < numbers.length(); i=i 1) {
    char currentChar = numbers.charAt(i);
    float w = textWidth(currentChar);
    arclength  = w/2;
    float theta = PI   arclength / r;
    pushMatrix();
    // Polar to cartesian coordinate conversion
    translate(r*cos(theta), r*sin(theta));
    // Rotate the box
    rotate(theta PI/2); // rotation is offset by 90 degrees
    // Display the character
    fill(0);
    text(currentChar, 0, 0);
    popMatrix();
    // Move halfway again
    arclength  = w/2;
  }
  translate(-180, -180); // Move it back where it was to start
}