Loading...
Logo
Processing Forum
Programming Questions
clankill3r
clankill3r

text on a curve

in Programming Questions  •  1 year ago  
I thought that on the processing site there was a example of how to draw type on a curve but i can't find it.
Do i look over it?

If it's not there, a example of how to do it would be welcome.

Replies(7)

clankill3r
clankill3r

Re: text on a curve

1 year ago
even if someone finds it i don't know if it helps.

I have stuff like this:


the length varies and i want to bend it on a 90 degree arc. To the left aswell to the right.
I believe the arc function is useless for this. For bezier i don't know. Althought i never succeeded in drawning a perfect 90 degree arc with beziers in processing.

Please help, i need to make a silk screen tomorow.
clankill3r
clankill3r

Re: text on a curve

1 year ago
can someone move this topic to the programming questions section?


Here;s my first attempt, the image above is illsutrator to explain what i think the best method will be.
Every thin that get's drawn should be drawn from the center. Afcorse this is ugly with very big block but i only deal with small block and typography.
The first one in this case should have been also rotated half the width of the block but i leaved it like this so it's easier to explain why it should happen (look at it).

I have a formula in my code to calculate the 'circumfence' for a 90 degree arc. Is this correct?
And could someone help me with the next step of drawning that arc, i'm stuck.



Copy code
  1. float[] line;
  2. float spacing = 5;
  3. float rh = 8; // rect height
  4. void setup() {
  5.   size(800, 600);
  6.   frameRate(0.3);
  7.   smooth();
  8.   fill(0);
  9.   noStroke();
  10.  
  11.   rectMode(CENTER);
  12. }
  13. void draw() {
  14.   background(255);
  15.   line = new float[int(random(5, 20))];
  16.   for (int i = 0; i < line.length; i++) {
  17.     line[i] = random(4, 10);
  18.   }
  19.   pushMatrix();
  20.   translate(50, 50);
  21.   drawStraight(line);
  22.   popMatrix();
  23.   float l = getLength(line);
  24.   // radius
  25.   float r = (l/4) / TWO_PI; // devide by 4 cause i want a 90 degree arc (Is this math correct?)
  26.  
  27.  
  28. }
  29. void drawStraight(float[] line) {
  30.   pushMatrix();
  31.   for (int i = 0; i < line.length; i++) {
  32.     float rw = line[i]; // rect width
  33.     float x = rw/2;
  34.     float y = rh/2;
  35.     rect(x, y, rw, rh);
  36.     translate(rw+spacing, 0);
  37.   }
  38.   popMatrix();
  39. }
  40. float getLength(float[] line) {
  41.   float l = 0;
  42.   for (int i = 0; i < line.length; i++) {
  43.     float rw = line[i]; // rect width
  44.     l += rw+spacing;
  45.   }
  46.   return l;
  47. }

amnon.owed
amnon.owed

Re: text on a curve

1 year ago
Check out:

http://wiki.processing.org/w/Text_on_curves

&

Examples > Books > Processing Handbook > Units 31-42 > 37 Typography 3 > _03


David Wilson
David Wil..

Re: text on a curve

1 year ago
Or this ...?


clankill3r
clankill3r

Re: text on a curve

1 year ago
thanks, but i see the one from the processing book is really bad, it doesn't look even close to a arc no matter where you have the mouse.

The wiki is to complicated, i have no ideas how to use it for my needs.


I was thinking i have just to rotate every time the width of the object to draw and after that the width of the spacing. Rotating from the bottom of the dashed line. (And the first time rotate half the width of the first object).

I managed to get some arc in some way, only half of the arc is 180degrees off (also spacing of red blocks isn't correct).
See:

Could someone take a look at my code?

Also keep in mind i want to be able to draw things continues like this:



In case it helps, i made this but i don't want straight lines anymore:


Copy code
  1. float[] line;
  2. float spacing = 5;
  3. float rh = 8; // rect height
  4. void setup() {
  5.   size(800, 600);
  6.   frameRate(0.3);
  7.   smooth();
  8.   noStroke();

  10.   rectMode(CENTER);
  11. }
  12. void draw() {
  13.   background(255);
  14.   line = new float[int(random(5, 20))];
  15.   for (int i = 0; i < line.length; i++) {
  16.     line[i] = random(4, 10);
  17.   }
  18.   
  19.   
  20.   pushMatrix();
  21.   translate(50, height/2);
  22.   fill(0);
  23.   drawStraight(line);

  25.   // start where the other one ended
  26.   float l = getLength(line);
  27.   translate(l, 0);
  28.   fill(255, 0, 0);

  30.   // radius
  31.   float r = l / (TWO_PI/4); // devide by 4 cause i want a 90 degree arc (Is this math correct?)
  32.   println(r);
  33.   drawArc(line, r);
  34.   popMatrix();
  35. }

  37. // In case someone looks and is good at this stuff, being able to set how far it should go would be even more nice
  38. // like void drawArc(float[] line, float radius, float start, float stop) { 
  39. // (and being able to bend to the other side with negative values or something?)

  41. void drawArc(float[] line, float radius) { 


  44.   pushMatrix();
  45.   translate(0, -radius);
  46.   rotate(HALF_PI);
  47.   // rotate a litle bit for the first one to be correct
  48.   float w = line[0]; // rect width
  49.   float theta = atan2(-radius, w/2);
  50.     
  51.   rotate(theta);
  52.   
  53.   
  54.   for (int i = 0; i < line.length; i++) {
  55.     // width
  56.     w = line[i]; // rect width
  57.     theta = atan2(-radius, w);
  58.     
  59.     rotate(theta);
  60.     rect(w/2, -radius + (-rh/2), w, rh);

  62.     //spacing
  63.     theta = atan2(-radius, spacing);
  64.     rotate(theta);
  65.   }
  66.   popMatrix();
  67. }


  70. void drawStraight(float[] line) {
  71.   pushMatrix();
  72.   for (int i = 0; i < line.length; i++) {
  73.     float rw = line[i]; // rect width
  74.     float x = rw/2;
  75.     float y = rh/2;
  76.     rect(x, y, rw, rh);
  77.     translate(rw+spacing, 0);
  78.   }
  79.   popMatrix();
  80. }


  83. float getLength(float[] line) {
  84.   float l = 0;
  85.   for (int i = 0; i < line.length; i++) {
  86.     float rw = line[i]; // rect width
  87.     l += rw+spacing;
  88.   }
  89.   return l;
  90. }
edit: -----
David also thanks, i saw your message after i posted this one. That thing is nice, the only hard thing with it is that you don't know the stop position. Like you can't easily have the radius adjusted so the total form is 90 degrees.


PhiLho
PhiLho

Re: text on a curve

1 year ago
" The wiki is to complicated"
Well, the operation isn't simple by itself... It went a bit overboard with the parametric functions, but the base maths and geometrical operations (translate + rotate) are easily reusable.
clankill3r
clankill3r

Re: text on a curve

1 year ago
Is there on of the links that you recomendent over the other (keeping reuse in mind).
Atm i got this but i don't mind starting over, i go silk screen after the vacation i guess.
Copy code
  1. // Learning Processing
  2. // Daniel Shiffman
  3. // http://www.learningprocessing.com

  5. // Example 17-8: Characters along a curve 

  7. PFont f;


  10. float textHeight;

  12. PVector pos;


  15. void setup() {
  16.   size(800, 800);
  17.   f = createFont("Arial", 20);
  18.   textFont(f);
  19.   // The text must be centered!
  20.   textAlign(CENTER, CENTER);
  21.   smooth();

  23.   textHeight = textAscent()+textDescent();
  24. }

  26. void draw() {
  27.   background(255);

  29.   pushMatrix();
  30.   // Start in the center and draw the circle
  31.   translate(width/2, height/2);
  32.   noFill();
  33.   stroke(0);
  34.   //ellipse(0, 0, r*2, r*2);
  35.   // show start as red dot
  36.   fill(255, 0, 0);
  37.   ellipse(0, 0, 15, 15);

  39.   fill(0);  
  40.   pos = drawCurved("W01 | 9+", 1);
  41.   
  42.   popMatrix();
  43.   

  45.   // green dot to show end of previous one
  46.   fill(0, 255, 0);
  47.   ellipse(pos.x, pos.y, 7, 7);
  48.   
  49.   translate(pos.x, pos.y);
  50.   println(pos.z);
  51.   rotate(pos.z);

  53.   drawCurved("W32 | 27+", 1);
  54.   


  57.   
  58.   
  59.   noLoop();
  60. }


  63. PVector drawCurved(String message, int direction) {
  64.   
  65.   PVector returnVector = new PVector();

  67.   pushMatrix();

  69.   if (direction == 1) { // clockwise (bend to right)

  71.     // get the length of the message
  72.     float l = textWidth(message);
  73.     // the radius
  74.     float r = l / (TWO_PI/4); // devide by 4 cause i want a 90 degree arc (Is this math correct?)
  75.     // r += textHeight/2; // since we want to draw from the center of the curve

  77.     translate(r, 0);
  78.     // We must keep track of our position along the curve
  79.     float arclength = 0;

  81.     // For every box
  82.     for (int i = 0; i < message.length(); i ++ ) {

  84.       // The character and its width
  85.       char currentChar = message.charAt(i);
  86.       // Instead of a constant width, we check the width of each character.
  87.       float w = textWidth(currentChar); 
  88.       // Each box is centered so we move half the width
  89.       arclength += w/2;

  91.       // Angle in radians is the arclength divided by the radius
  92.       // Starting on the left side of the circle by adding PI
  93.       float theta = PI + arclength / r;

  95.       pushMatrix();

  97.       // Polar to Cartesian conversion allows us to find the point along the curve. See Chapter 13 for a review of this concept.
  98.       translate(r*cos(theta), r*sin(theta)); 
  99.       // Rotate the box (rotation is offset by 90 degrees)
  100.       rotate(theta + HALF_PI); 

  102.       // Display the character
  103.       fill(0);
  104.       text(currentChar, 0, 0);
  105.       
  106.       if(i==message.length()-1) {
  107.         returnVector.x = screenX(textWidth(currentChar)/2, 0);
  108.         returnVector.y = screenY(textWidth(currentChar)/2, 0);
  109.         returnVector.z = theta + HALF_PI; 
  110.         returnVector.z += HALF_PI;
  111.       }

  113.       popMatrix();

  115.       // Move halfway again
  116.       arclength += w/2;
  117.     }
  118.   }
  119.  /*
  120.   else if( direction == -1) { // counter clockwise (bend to left)
  121.     // ?
  122.   }
  123.   */
  124.   popMatrix();

  126.   return returnVector;
  127. }


Top Reply

Statistics

  • 7 Replies
  • 686  Views
  • 0 Followers

Tags

No tags available for this topic.

Actions

Related Posts