Wrapping a sentence, around a circle, letter by letter


#1

Hi there!

To cut to the chase, today I’ve signed up and submitted my code to hopefully have some answers pertaining to a project I’ve been working on. For a rundown of what I was trying for, I wanted to take a quote and wrap it around a circle, letter by letter. Much like on a bike tire with spokes, each letter (spoke) would be spaced evenly apart around the whole circle (tire). I’ve been trying again and again, but I simply cannot create what I’m trying for. I’ve cleaned up my code in case someone wanted to actually type out the proper functioning code, but I feel as if I’m completely in the dark with this. Any help is appreciated :slight_smile:

String quote =( "Hoping is a waking dream. - Aristotle" ); //Quote around the circle

float delta = TWO_PI / 37; //Spacing around the circle
int radius = 37*10; //Radius of the circle

void setup() { //Start up
 size(600,600);  
 smooth(); 
 textSize(30); 
}

void draw() { 
 background(0); 
 fill(255); //Start of mess

 for(int i = 0; i<37; i++) { 

   float xPos = width/2+radius * cos(i* delta); 
   float yPos = height/2+radius * sin(i* delta);
     for (int index = 0; index < quote.length();index++) {
     char aChar = charAt(index);}
  
   pushMatrix();
       translate(xPos, yPos);
       text(quote[i], 0, 0); 
   popMatrix();    
 } //End of mess
}

Here is an image showing what I’m attempting to make


#2

Almost there

You only need one for loop

with i


#3

Should be

char aChar = quote.charAt(index);


#4

Hey, thank you for the feedback! I followed as you suggested, but I am having a problem with the text currently. I’ll print my code down, but the ‘text’ syntax is underlined and reads the error “The method text(char[], int, int, float, float) in the type PApplet is not applicable for the arguments (char, int, int, float, float)”. I won’t lie, this confused me a lot. I am tinkering with it, but haven’t had much luck. Here’s my code again;

String quote =( "Hoping is a waking dream. - Aristotle" ); //Quote around the circle
int N = quote.length();

float delta = TWO_PI / N; //Spacing around the circle
int radius = N*5; //Radius of the circle

void setup() { //Start up
 size(600,600);  
 smooth(); 
 textSize(30); 
}

void draw() { 
 background(0); 
 fill(255); //Start of mess
 for (int index = 0; index < quote.length();index++) {
     char aChar = quote.charAt(index);
     for(int i = 0; i<N; i++) { 
   float xPos = width/2+radius * cos(i* delta); 
   float yPos = height/2+radius * sin(i* delta);
     
   pushMatrix();
       translate(xPos, yPos);
       text(aChar,0,i,xPos,yPos); 
   popMatrix();  
     }
 } //End of mess
}

#5

Almost there

Go for

text(aChar+““, …


#6

And get rid of one for loop- you only need one

Let’s say you get rid of this

for (int index = 0; index < quote.length();index++) {

Move the line char aChar…
behind the remaining for loop and replace index with i obviously


#7

No.

You want:

text(aChar+““,0,0);

Remember you can hit ctrl-t in processing and thus get auto-format

Don’t try to guess. Make a plan and stick to it. E.g. you made your text(... line worse…

Change the plan only when necessary; don’t guess…

Chrisir


#8

Wow man, you were right. Thank you so much! Program runs like I want and thank you for that auto-format tip, I never knew that honestly! I’ll be expanding my project but for now I’m on track, thanks again!!!


#9

Good good good!!!

Good!

Well done


#10

Well, unfortunately I am back again…

I’ve been taking what I made with your help and attempting to turn it into a spiral, such as that the quote would look as if it were a spiral with the last character of the quote being printed first in the center, and moving outward until the first character of the quote is the final character printed, to give the effect of it shrinking. The only issue is that every idea I’ve thought of to master this design has failed. I cannot get it to print the last letter first (Update: I figured it out now!) and move back and I’ve failed miserably at having it shrink correctly at the correct rate. I’m hoping you might have an idea of how to create such a design to hopefully get my head back on track because I have come up blank so far :confused:

This is again, an example of what I’m trying for now. Suggestions are wanted! Here is my code;

String quote =( "Keeping in touch with the people that matter is important - G-EAZY" ); //Quote around the circle
int N = quote.length(); //Determines the quote length

float delta = TWO_PI / N; //Spacing around the circle
float radius = N; //Radius of the circle

void setup() { //Start up
  size(600, 600);  //Screen size
  smooth(); //Smooth letters
  textSize(30); //Font size
}

void draw() { 
  background(0); //Black screen
  fill(255); //White letters
    for (int i = 0; i<N; i++) { //Position change for the quote
      float xPos = width/2+(radius) * cos(i* delta); //Calc the X position for each letter
      float yPos = height/2+(radius) * sin(i* delta); //Calc the Y position for each letter
      char aChar = quote.charAt(65-i); //Chooses which letter to draw
      radius = aChar;

      pushMatrix(); //Saves new coordinate system
      translate(xPos, yPos); //Moves the X and Y position for each letter
      text(aChar+"", 0, 0); //Provides the text
      popMatrix(); //Restores prior coordinate system
    } //End of for
  } //End of draw

#11

You solved it?

What’s your problem now?

Movement ?


#12

My problem is with shaping it mostly. I’m good with creating a circle, but a spiral seems to elude me. I’ll post my code, but I’m lost on where to start with this spiral. I also want it so that in the first frame, it will draw 1 character, the second frame 2 characters, third frame is 3 characters, until its reached the end of the quote. These two final additions to the code have been a struggle. Here is my code;

String quote =( "Keeping in touch with the people that matter is important - G-EAZY" ); //Quote around the circle
int N = quote.length(); //Determines the quote length

float delta = TWO_PI / (N/5); //Spacing around the circle
float radius = N; //Radius of the circle

void setup() { //Start up
  size(800, 800);  //Screen size
  smooth(); //Smooth letters
  textSize(30); //Font size
}

void draw() { 
  background(0); //Black screen
  fill(255); //White letters
  for (int i = 0; i<N; i++) { //Position change for the quote
    float xPos = width/2+(radius) * cos(i* delta); //Calc the X position for each letter
    float yPos = height/2+(radius) * sin(i* delta); //Calc the Y position for each letter
    char aChar = quote.charAt(65-i); //Chooses which letter to draw
    radius = aChar*2; //<----- This was an idea I had to create a spiral, as you can see it doesn't quite 
                                             work out....

    pushMatrix(); //Saves new coordinate system
    translate(xPos, yPos); //Moves the X and Y position for each letter
    text(aChar+"", 0, 0); //Provides the text
    popMatrix(); //Restores prior coordinate system
  } //End of for
} //End of draw

#13

You might be interested in Ricard Marxer fantasic geomerative library to create more elegant results. See my JRubyArt example


#14

@monkstone I took a look at your link there, but I’m confused on how this helps me. Btw, your design is very nice I must say!

Update: I have downloaded Geomerative yet I’m having trouble opening any of the processing files in it, such as importing it. Some clarification on how to use it would be greatly appreciated. Also, which tutorial should I review to help gain a sense of my issue on my own program?


#15

Here is the vanilla processing version that is well annotated. I was being lazy before just pointing you to my JRubyArt version. PS: I think you should be able install geomerative library from processing ide.


#16

I’ve successfully installed Geomerative and have it functioning now. However, my assignment is required to be submitted in 1 hour and I don’t believe i’ll be meeting the deadline unfortunately. I will try using Geomerative to finish this up, that is if I can figure out how to use it, thanks for the effort anyway. Both of you have been a big help.


#17

https://forum.processing.org/one/topic/drawing-smooth-spiral.html


#18

still going backwards

//Quote around the circle
String quote = "Keeping in touch with the people that matter is important - G-EAZY";

int N = quote.length(); //Determines the quote length

float delta = TWO_PI / (N/5); //Spacing around the circle

float radius = N; //Radius of the circle

// in the first frame, it will draw 1 character, the second frame 2 characters, third frame is 3 characters, until its reached the end of the quote.
int upperBound=0; 

void setup() { //Start up
  size(800, 800); //Screen size
  smooth(); //Smooth letters
  textSize(30); //Font size
  frameRate(3);
  println(N);
}

void draw() {
  background(0); //Black screen
  fill(255); //White letters

  radius = 60;

  for (int i = 0; i<upperBound; i++) { //Position change for the quote
         
    float xPos = width/2+(radius) * cos(i* delta); //Calc the X position for each letter
    float yPos = height/2+(radius) * sin(i* delta); //Calc the Y position for each letter
    char aChar = quote.charAt(65-i); //Chooses which letter to draw
        
    pushMatrix(); //Saves current coordinate system

    translate(xPos, yPos); //Moves the X and Y position for each letter

    text(aChar+"", 0, 0); //Provides the text

    popMatrix(); //Restores prior coordinate system

    radius+=4.7;
  } //End of for

  if (upperBound<N)
    upperBound++;
  //
} //End of draw

#19

@monkstone That link I found actually very helpful. I appreciate the reply and help, to bad it wasn’t sooner for me to finish my deadline. Thanks again :slight_smile:

@Chrisir That actually worked beautifully! You nailed exactly what I wanted, thanks so much. I see the changes you made and how you figured it all out, so I’m happy to know what is required for next time. Thanks again so much for your help though, you’re very skilled in this art.


#20

new version :wink:


//Quote around the circle
String quote = "Keeping in touch with the people that matter is important - G-EAZY";

int N = quote.length(); //Determines the quote length

float delta = TWO_PI / (N/5); //Spacing around the circle

float radius; //Radius of the circle

// in the first frame, it will draw 1 character, the second frame 2 characters, third frame is 3 characters, until its reached the end of the quote.// how many letters do we show? 
int upperBound=0; 

// angle 
float offset=0;

void setup() { //Start up
  size(800, 800); //Screen size
  smooth(); //Smooth letters
  textSize(30); //Font size
  frameRate(3);
  println(N);
}

void draw() {
  background(0); //Black screen
  fill(255); //White letters

  radius = 60;

  for (int i = 0; i<upperBound; i++) { //Position change for the quote

    float xPos = width/2+(radius) * cos(offset+i* delta); //Calc the X position for each letter
    float yPos = height/2+(radius) * sin(offset+i* delta); //Calc the Y position for each letter
    char aChar = quote.charAt(i); //  quote.charAt(65-i); //Chooses which letter to draw

    textOneLetter(aChar, xPos, yPos); 

    radius+=4.9;
  } //End of for

  // how many letters do we show? 
  if (upperBound<N) {
    upperBound++; // increase
  }

  // angle offset 
  offset+=.1; 
  //
} //End of draw

void textOneLetter(char localChar, float x, float y) {
  pushMatrix(); //Saves new coordinate system
  translate(x, y); //Moves the X and Y position for each letter
  text(localChar, 0, 0); //Provides the text
  popMatrix(); //Restores prior coordinate system
}
//