Week 4: 3D Steering wheel of a car


create a generative typography/text output


I originally started with making a speedometer, but found this idea more fun and interactive so went along with it.

It took a lot of maths! I started with a rough circle/ellipse  for a  path for  my text to go about. Then I created the variable “arclength”  to trace the text on the the circular path. Then I iterated the arclength with each letter of the string and divided it by 2 to make it monospaced on an average.

I then created a variable theta for every angle of the letter of the string. Then through push and pop, I copied the translate and rotate coordinates of the text and pasted it again. Through mouseX function, the arc moved sideways along with the mouse.


There was a little  math, which was a bit challenging for me. But once it worked, it was fun to interact with.  Initially, I used TWO_ PI as stop 2 value in map in translate, which gave it a 2D effect being the original plan. Then by just switching it to PI, the wheel switched to being 3D and it was fun so I let it be.

Here’s the video link to the assignment:



String message; 
PFont f;
float r = 300;// The radius of a circle

void setup() {
  // The message to be displayed
  message = "Steering wheel of the your car  Steering wheel of your car Steering wheel of your car Steering wheel of your car Steering wheel of your car";  //Speed of your wheels  Speed of your wheels  Speed of your wheels ";
  // The text must be centered!
  f = createFont("Serif",32);

void draw() {

  // Start in the center and draw the circle
  translate(width / 2, height / 2);
  //ellipse(0, 0, r*2, r*2);

  // We must keep track of our position along the curve
  int arclength = 0;

  // For every letter
  for (int i = 0; i < message.length(); i++)
    float w = textWidth(message.charAt(i));
    arclength += w/2;
    float theta = PI + arclength / r;    

    translate(r*cos(theta + map(mouseX, 0, width, 0, PI)), r*sin(theta+map(mouseX, 0, width, 0, TWO_PI)));
    rotate(theta+PI/2 +map(mouseX, 0, width, 0, TWO_PI)); // rotation is offset by 90 degrees
    // Display the character
    // Move halfway again
    arclength += w/2;


One thought on “Week 4: 3D Steering wheel of a car”

Leave a Reply