Desperate for Help, due in 2 days! Beginner & Confused, Rotating STRING text

Processing Coding Questions
1

Hi there,

I am an Intern to an artist, and I have 0 experience coding, and frankly, I’m hating every second of it. But I have been tasked for Monday (July 20th 2020) to create a code for the show where the words “Press” and “Record” circle one another in opposite directions around the edge of a circle, one on the outer edge and one on the inner. Picture like a CD - PRESS is circling counter-clockwise off of the CD, while RECORD is circling clockwise printed on the CD. Both following the outer edge of the CD.

I have found some code online from some of you lovely people and using the Processing Tutorials I have been able to create a code where they are on the same line, circling in the same direction. I cannot for the life of me understand how to do this with 2 lines of spinning text. I thought it would be as straight forward as coping the code and changing the varibles but it is obviously not that simple. Any and all help is appreicated. Here is the code I have;

String message = "PRESS RECORD";

 
PFont zigBlack;
 
float r = 100;
float angVel = -TWO_PI / 360;
float ang;
 
void setup() {
  size(1024, 768);
  zigBlack = createFont("tahoma.ttf", 40);
  textFont(zigBlack);
  textAlign(CENTER);
  smooth();
}
 
void draw() {
 background(0);
 circleText();
 
  stroke(255, 255, 255);
 fill(0, 0, 0);
 ellipse(512, 384, 200, 200);
 
 stroke(255, 255, 255);
 fill(0, 0, 0);
 ellipse(512, 384, 20, 20);
 

 
}
 
void circleText(){
  pushMatrix();
  translate(width/2, height/2);
  rotate(ang);
  ang -= angVel - 0.038;
  //33 rpm is 0.038, 45 is 0.057
 
  noFill();
  noStroke();
  ellipse(0, 0, r*2, r*2);
 
  float arclength = 0;
 
  for (int i = 0; i < message.length (); i ++ ) {
    char currentChar = message.charAt(i);
    float w = textWidth(currentChar);
    arclength += w/2;
    float theta = PI + arclength / r;
    pushMatrix();
    translate(r*cos(theta), r*sin(theta));
    rotate(theta + PI/2);
    fill(255);
    text(currentChar, 0, 0);
    popMatrix();
    arclength += w/2;
  }
  popMatrix();
}
2

This would be my approach using your code. Good luck!

Kf

final int TEXT_SIZE=16;
final String msgOut = "PRESS";
final String msgIn = "RECORD";


//PFont zigBlack;

float r = 100;
float angVel;
//float ang;

TextRotator press;
TextRotator record;

void setup() {
  size(1024, 768);
  //zigBlack = createFont("tahoma.ttf", 40);
  //textFont(zigBlack);
  textAlign(CENTER);
  textSize(TEXT_SIZE);
  smooth();

  angVel = -TWO_PI / 360 - 0.038;
  //33 rpm is 0.038, 45 is 0.057

  press=new TextRotator(msgOut, angVel, r, color(255));
  record=new TextRotator(msgIn, -angVel, r-TEXT_SIZE, color(144));
}

void draw() {
  background(0);

  stroke(255, 255, 255);
  fill(0, 0, 0);
  ellipse(512, 384, 200, 200);

  stroke(255, 255, 255);
  fill(0, 0, 0);
  ellipse(512, 384, 20, 20);

  press.circleText();
  record.circleText();
}

class TextRotator {

  String text;
  float angularSpeed;
  color textColor;
  float radialOffset;

  protected float ang;

  TextRotator(String msg, float aSpeed, float radPos, color tColor) {
    text=msg;
    angularSpeed=aSpeed;
    radialOffset=radPos;
    textColor=tColor;
  }

  void circleText() {

    pushMatrix();  
    translate(width/2, height/2);
    rotate(ang);
    fill(textColor);

    ang += angularSpeed; 
    float arclength = 0;

    for (int i = 0; i < text.length (); i++ ) {
      char currentChar = text.charAt(i);
      float w = textWidth(currentChar);
      arclength += w/2;
      float theta = PI + arclength / radialOffset;
      pushMatrix();
      translate(radialOffset*cos(theta), radialOffset*sin(theta));
      rotate(theta + PI/2);      
      text(currentChar, 0, 0);
      popMatrix();
      arclength += w/2;
    }
    popMatrix();
  }
}
1 Like
3

without a class

String message1 = "PRESS";
String message2 = "RECORD";

PFont zigBlack;

float r1 = 100;
float r2 = 68;
float angVel = -TWO_PI / 360;
float ang1, ang2;

void setup() {
  size(1024, 768);
  zigBlack = createFont("ARIAL.FLW", 40);
  textFont(zigBlack);
  textAlign(CENTER);
  smooth();
}

void draw() {
  background(0);

  stroke(255, 255, 255);
  fill(0, 0, 0);
  ellipse(512, 384, 200, 200);

  stroke(255, 255, 255);
  fill(0, 0, 0);
  ellipse(512, 384, 20, 20);

  circleText1();
  circleText2();
}

void circleText1() {
  pushMatrix();
  translate(width/2, height/2);
  rotate(ang1);
  ang1 -= angVel - 0.038;
  //33 rpm is 0.038, 45 is 0.057

  noFill();
  noStroke();
  ellipse(0, 0, r1*2, r1*2);

  float arclength = 0;

  for (int i = 0; i < message1.length (); i ++ ) {
    char currentChar = message1.charAt(i);
    float w = textWidth(currentChar);
    arclength += w/2;
    float theta = PI + arclength / r1;
    pushMatrix();
    translate(r1*cos(theta), r1*sin(theta));
    rotate(theta + PI/2);
    fill(255);
    text(currentChar, 0, 0);
    popMatrix();
    arclength += w/2;
  }
  popMatrix();
}

void circleText2() {
  pushMatrix();
  translate(width/2, height/2);
  rotate(ang2);
  ang2 += angVel - 0.038;
  //33 rpm is 0.038, 45 is 0.057

  noFill();
  noStroke();
  ellipse(0, 0, r2*2, r2*2);

  float arclength = 0;

  for (int i = 0; i < message2.length (); i ++ ) {
    char currentChar = message2.charAt(i);
    float w = textWidth(currentChar);
    arclength += w/2;
    float theta = PI + arclength / r2;
    pushMatrix();
    translate(r2*cos(theta), r2*sin(theta));
    rotate(theta + PI/2);
    fill(255);
    text(currentChar, 0, 0);
    popMatrix();
    arclength += w/2;
  }
  popMatrix();
}
1 Like
4

Hello,

Processing as a great tool for artists! You will learn to code with experience.

Get over it and focus on the work.

Please format your code as a courtesy to the community:
https://discourse.processing.org/faq#format-your-code

:)

1 Like
5

Hello,
first, for a 0 experience programmer, you made a great work. Coding can be very difficult, and your exercise is not an easy one.
second, being a programmer is also sometimes being a lazy man. You have to find the easiest way to do your work. So, if I had to do this work, I would just create two bitmaps and rotate them on the screen… Is it allowed ? You said you have to rotate words, not necessary strings, so…

1 Like
6

Oh my gosh thank you so much. I was actually really close! I just wasn’t understanding how to differentiate the 2 different circleTexts. I knew I was missing something like a number or some sort of variable. Thank you so so much again!

1 Like
7

Thank you so much, apologizes about the formatting, hopefully I’ve fixed this.

As for “get over it”, I have exactly 0 experience, so this was frustrating and not helpful.

Thanks

: )

8

Also take a look at these recources if you want to get started with processing. I’m also new and these help every day.

links stolen from @glv 's posts :smile:

Also if you have more specific questions you can search with google in this format:
“processing (insert your question/problem/error message)”

3 Likes