We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Programs › Text around a Circle
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
Text around a Circle (Read 1853 times)
nthitz
Text around a Circle
Jul 7th, 2007, 10:02pm  
Hey all,
I'm trying to write a program that will take an array of strings, and position the strings around a circle on the sketch. However I would like the text to be rotated so the names are coming out of the circle.

With rotate() it is easy to rotate text, but then when the text is placed on screen it does not go where I want it to within the circle.

The first for loop in this sketch is just an example of where the names are supposed to be placed. The second for loop includes rotates the text properly, but everything is placed incorrectly.

Can anyone help me out?
Quote:
PFont font;
font = loadFont("dialoginput-10.vlw");
textFont(font,10);
size(400,400);
smooth();
background(0);
fill(255);
String[] names = {"nick","ben","justin","wes","dan","andy","matti","jess","pauL"};
float delta = TWO_PI / names.length;
int radius = names.length *10;
for(int i = 0; i<names.length; i++) {
 text(names[i],width/2+radius * cos(i* delta), height/2+radius * sin(i*delta));
}
for(int i = 0; i<names.length; i++) {
 rotate(i* delta);
 float xPos = width/2+radius * cos(i* delta);
 float yPos = height/2+radius * sin(i* delta);
 text(names[i],xPos , yPos );
 println(names[i] + " " +screenX(xPos,yPos) + " " + screenY(xPos,yPos) + " " + xPos+ " " +yPos+ " " +(i*delta/TWO_PI * 360) );
 rotate(- i * delta); //reset rotation
}
Back to top
 
 
Bas
Re: Text around a Circle
Reply #1 - Jul 7th, 2007, 11:34pm  
Not sure if this is what you meant by "coming out of the circle". If so, you were really close to getting there. You just needed to make use of the translate, push- and popMatrix functions. Check out the reference for more info.

Quote:

PFont font;

String[] names = { "nick","ben","justin","wes","dan","andy","matti","jess","pauL" };

float delta = TWO_PI / names.length;
int radius = names.length *10;

void setup() {
 size(400,400);  
 smooth();
 font = createFont("CourierNewPSMT", 10);
 textFont(font,10);
}

void draw() {
 background(0);
 fill(255);

 for(int i = 0; i<names.length; i++) {

   float xPos = width/2+radius * cos(i* delta);
   float yPos = height/2+radius * sin(i* delta);
 
   pushMatrix();
       translate(xPos, yPos);
       rotate(delta * i);
       text(names[i], 0, 0);
   popMatrix();    
 }
}
Back to top
 
 
nthitz
Re: Text around a Circle
Reply #2 - Jul 8th, 2007, 3:15am  
Thanks, that works perfectly. Exactly what I was looking for. I was confused about those pop and push functions before, but now they make sense. Thanks
Back to top
 
 
Classiclll
Re: Text around a Circle
Reply #3 - Jul 8th, 2007, 8:34am  
How about http://www.geocities.jp/classiclll_newweb/KAMEWriter/applet/index.html ?
Back to top
 
WWW  
alphachapmtl
Re: Text around a Circle
Reply #4 - Jul 30th, 2007, 4:22pm  
Just made a small change to the demo by Bas,
Try it!

PFont font;  

String[] names = { "nick","ben","justin","wes","dan","andy","matti","jess","pauL" };  

float delta = TWO_PI / names.length;  
int radius = names.length *10;  
float i0=0.0;

void setup() {
 size(400,400);  
 smooth();  
 font = createFont("CourierNewPSMT", 10);
 textFont(font,14);  
}

void draw() {
 background(0);  
 fill(255);
i0+=0.1;

 for(int i = 0; i<names.length; i++) {  

   float xPos = width/2+radius * cos(i* delta);  
   float yPos = height/2+radius * sin(i* delta);
   
   pushMatrix();
  translate(xPos, yPos);
  rotate(i0 + delta * i);
  text(names[i], 0, 0);  
   popMatrix();    
 }
}
 
Back to top
 
 
alphachapmtl
Re: Text around a Circle
Reply #5 - Jul 30th, 2007, 4:29pm  
or try this one:

PFont font;  

String[] names = {
 "nick","ben","justin","wes","dan","andy","matti","jess","pauL" };  

float delta = TWO_PI / names.length;  
int radius = names.length *10;  
float i0=0.0;
float d0=0.0;

void setup() {
 size(400,400);  
 smooth();  
 font = createFont("CourierNewPSMT", 10);
 textFont(font,14);  
}

void draw() {
 background(0);  
 fill(255);
 d0+=0.1;
 i0+=0.01;

 for(int i = 0; i<names.length; i++) {  

   float xPos = width/2+radius * cos(i0 + i* delta);  
   float yPos = height/2+radius * sin(i0 + i* delta);

   pushMatrix();
   translate(xPos, yPos);
   rotate(d0 + delta * i);
   text(names[i], 0, 0);  
   popMatrix();    
 }
}

Back to top
 
 
alphachapmtl
Re: Text around a Circle
Reply #6 - Jul 30th, 2007, 5:02pm  
or try that one, with turning digits:

PFont font;  

String[] names = {
 "1          1",
 "2          2",
 "3          3",
 "4          4",
 "5          5",
 "6          6",
 "7          7",
 "8          8" };  

float delta = TWO_PI / names.length;  
int radius = names.length *10;  
float i0=0.0;
float d0=0.0;

void setup() {
 size(400,400);  
 smooth();  
 font = createFont("CourierNewPSMT", 10);
 textFont(font,14);  
}

void draw() {
 background(0);  
 fill(255);
 d0+=0.10;
 i0+=0.016;

 for(int i = 0; i<names.length; i++) {  

   float xPos = width/2+radius * cos(i0 + i* delta);  
   float yPos = height/2+radius * sin(0.7*i0 + i* delta);

   pushMatrix();
   translate(xPos, yPos);
   rotate(d0 + delta * i);
   text(names[i], 0, 0);  
   popMatrix();    
 }
}

Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›