Processing 1.0 - Processing Discourse

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.

‹ Previous Topic | Next Topic ›

Pages: 1

Wrap Text in a Circle (Read 845 times)

rkshukla

Wrap Text in a Circle
Jun 13^th, 2008, 11:00am

I want to wrap a text in a circle (fill the circle with text).

Also , it is not important for full text to be displayed in case the circle is too small.Text should just be associated with the circle. If I increase the size of circle by dragging the boundry of circle, it should go on showing the text that can be shown in the area.

I think of writing everything in a rectangle and then make a circumcircle around it but i think it is a wasteful method...

Can anyone suggest a strategy....

Classiclll Full Member Offline Posts: 187	Re: Wrap Text in a Circle Reply #1 - Jun 13^th, 2008, 12:53pm hi this may help you, i hope. http://www.geocities.jp/classiclll_newweb/KAMEWriter/applet/index.html

Manic

Re: Wrap Text in a Circle
Reply #2 - Jun 13^th, 2008, 12:55pm

You could split the string into an array of characters, then use trig to rotate and place them?

here's something to get you started, it doesn't rotate the letters but it arranges them in a circle, if you uncomment the rotate line, you can see how it all goes wrong;

Quote:

PFont theFont;
String theString = "Hello World ";
float theRadius=40;
char[] letters = new char[0];

void setup(){
size(300,300);
theFont = loadFont("Bitstream.vlw");
textFont(theFont);

//there's probably a better way of doing this bit;
for(int t=0;t<theString.length();t++){
letters = append(letters,char(theString.charAt(t)));
}

}

void draw(){
background(0);
smooth();
//place the letter
translate(150,150);
float angleStep = 360/theString.length();
for(int t=0;t<theString.length();t++){
float myAng = t*angleStep;
pushMatrix();
float x = sin(radians(180-myAng))*40;
float y = cos(radians(180-myAng))*40;
translate(x,y);
//println(angleStep + ", " + myAng + ", " + x + ", " + y);
//rotate(radians(myAng));
text(letters[t],x,y);
popMatrix();
}
}

maybe one of the more expert members will be able to help a bit more.

EDIT: ah, i wrote mine while classic posted that, kinda makes mine irrelevant!

Martin

rkshukla

Re: Wrap Text in a Circle
Reply #3 - Jun 13^th, 2008, 1:04pm

thanks
yes it does write ON the circle, although i want it to write IN a circle...

actually i want it to be like a text box in which you can go on to write in more area than the area of the text box ..u know like the box shows some area of the text and to see full text , u can click in the box and use keys to go through the entire text.

and the shape of the text box to be a circle...

rkshukla YaBB Newbies Offline Posts: 39	Re: Wrap Text in a Circle Reply #4 - Jun 13^th, 2008, 1:07pm oh no manic ...ur reply is very precious..thanks but i am still stuck

PhiLho

Re: Wrap Text in a Circle
Reply #5 - Jun 13^th, 2008, 1:21pm

I believe it is not obvious in Processing.
One missing thing is a way to measure the length of a (to be) displayed string.
If you look at the source of Processing, more precisely PGraphics and the various text() functions and related, you will see strings are displayed as array of chars, laid out char by char. (Unless I have read too fast.)
There is a reference to getStringBounds but it have been commented out...
Actually, fonts in Processing are a bunch of images (glyphs), one per char, and when drawing a string, it displays each image in place.
Perhaps you can take inspiration of the internal routines I point to, but it is not straightforward.

It might be interesting to generalize the idea and provide a function to layout text in the bounds of any shape... Wink

Manic Full Member Offline Posts: 123	Re: Wrap Text in a Circle Reply #6 - Jun 13^th, 2008, 1:24pm what exactly are you thinking of doing? the one on the left or right? EDIT:hmm, seems my site is down at the moment, how handy. THANKS DREAMHOST!

rkshukla YaBB Newbies Offline Posts: 39	Re: Wrap Text in a Circle Reply #7 - Jun 13^th, 2008, 2:43pm yes the left one..... so do you have any suggestions how to achieve the left one
	« Last Edit: Jun 14^th, 2008, 5:10pm by rkshukla »

antiplastik

Re: Wrap Text in a Circle
Reply #8 - Jul 9^th, 2008, 11:36am

Quote:

One missing thing is a way to measure the length of a (to be) displayed string.

It's here :
http://processing.org/reference/textWidth_.html
Calculates and returns the width of any character or text string.

@rkshukla : Start with an empty circle. Then, assuming you have decided how big will your text be, calculate how much words of your text can fit in the first line at the top of the circle, using textWidth().

antiplastik

Re: Wrap Text in a Circle
Reply #9 - Jul 9^th, 2008, 12:37pm

here is my attempt (needs to be improved) :

Quote:

// initial text
String s = "this text should wrap in the ellipse. the method should be improved. this is a simple test to see if it works.";
// split in words
String[] words = split(s, " ");
int wordCounter = 0;
// load font
PFont font = loadFont("BitstreamVeraSans-Roman-10.vlw");
// set font size
int tsize = 10;
textFont(font, tsize);
// ellipse position and size
int cornerX = 0;
int cornerY = 0;
int w = width-1;
int h = height-1;
// draw
background(255);
boolean debug = false;
// display circle
ellipseMode(CORNER);
stroke(0); noFill();
ellipse(cornerX, cornerY, w, h);
// display the text
fill(0);
for (int i = 1; i < 10; i++) {
if (wordCounter >= words.length) break;
float a = asin((0.5*h-tsize*i)/(0.5*h));
// max length for this line
float maxlen = 0.9*pow(cos(a), 1.9)*w;
// min start coordinates for this line
float x = cornerX + 0.5*(w-maxlen);
float y = cornerY + tsize*(i-0.5);
// how much words fit in this space?
String linetext = words[wordCounter];
if (textWidth(linetext) <= maxlen) {
int nbWords = 0;
while ((textWidth(linetext) < maxlen) && (wordCounter+nbWords < words.length - 1)) {
nbWords++;
linetext = linetext + " " + words[wordCounter+nbWords];
println(linetext + " : " + textWidth(linetext) + " / " + maxlen);
}
linetext = words[wordCounter];
for (int j = 0; j < nbWords-1; j++) {
wordCounter++;
linetext = linetext + " " + words[wordCounter];
}
wordCounter++;
text(linetext, x, y+tsize);
}
// debug: draw the line
if (debug) {
stroke(250, 150, 0);
line(x, y+tsize/2, x + maxlen, y+tsize/2);
}
}

rkshukla YaBB Newbies Offline Posts: 39	Re: Wrap Text in a Circle Reply #10 - Jul 11^th, 2008, 11:11am Oh I gave up trying for this way and ended up putting all data in a rectangle , the simple way.. thanks for the help, as soon as I shall work on second phase , i will use the hint...

Pages: 1

‹ Previous Topic | Next Topic ›