Rotating text "|" vs rotating line

Hi all,

I’ve been playing with rotating and looping the keyboard vertical bar, however when trying to replicate that by using a regular line I’m struggling with what it would be the equivalent to the textSize() function (length of the character). I’ve tried creating a line by using x, y, radius, sin, cos, theta etc but the ‘radius’ variable does not play the part of the textSize().

Any ideas?

color c = color(250,130,0);

void setup() {
  size(800,800,P2D);
}

void draw() {
  background(255);

  translate(width/2,height/2);
  
  for(int i = 1; i < 20; i++) {
   rotate(radians(20));
   fill(c);
   textSize(3.75*i); //what would be this if using a line?
   text("|",0,0);
  }
}

this sounds interesting, can you post it

Hello @Erif ,

This may give you some insight about aligning text and lines:

There is a trigonometry tutorial here:

https://processing.org/tutorials/trig

It is not on main website but it is still available.

It is poorly formatted in places so keep an eye out for that!

For example:

Should be:

x = cosine(theta) * radius
y = sine(theta) * radius

Have fun!

:)

Sure! The idea is to create first a horizontal line positioned at the canvas’ center then rotate it from its center point and I guess later to increase it’s length as it rotates? kinda x1,y1 += 1 or something like that?

float r = 100;
float angle = 0; 
float x1 = r * cos(angle);
float y1 = r * sin(angle);

void setup() {
  size(800,800,P2D);
}

void draw() {
  background(255);
  
  translate(width/2,height/2);
  
  rotate(radians(angle));
  angle+= 5;
  stroke(250,130,0);
  line(0-r/2, 0, x1-r/2, y1);
}


color c = color(250, 130, 0);

void setup() {
  size(800, 800, P2D);
}

void draw() {
  background(255);


  float a=1; 
  for (int i = 1; i < 360/4; i++) {

    pushMatrix();
    translate(width/2, height/2);
    rotate(radians(4*i));
    fill(c);
    // textSize(3.75*i); //what would be this if using a line?

    translate(-a/2, 0);

    //  text("|", 0, 0);
    line(0, 0, a, 0);

    a+=3.75;

    popMatrix();
  }
}

thanks for that

  • remember cos and sin require radians
  • and cos and sin must be calculated in draw() - it’s not enough to place it before setup(), it will be executed once only and not throughout

my version


float r = 100;
float angle = 0; 
float x1 = r * cos(angle);
float y1 = r * sin(angle);

void setup() {
  size(800, 800, P2D);
}

void draw() {
  // background(255);

  translate(width/2, height/2);

  x1 = r * cos(radians(angle));
  y1 = r * sin(radians(angle));

  rotate(radians(angle));
  angle += 5;
  stroke(250, 130, 0);
  line(0-r/2, 0, 
    x1-r/2, y1);
}

Yes you’re right! Thanks for that… I’ve been many hours in front of the computer trying stuff and might need some fresh eyes tomorrow lol

That was similar to what I had tried before however there’s some sort of ‘drag’ produced when rotating the keyboard bar (as it grows in size) that I don’t get with the line… will keep trying!

This is the text character rotating:
output

This with the line:

Thanks @glv, yeah I’m kinda familiar with the Unit Circle functions and their relationships.
I’ll have a look tomorrow to the Character Movement example. Seems to need some proper time :slight_smile:

1 Like

See:

It’s a cool effect but not always intentional.

Before:
image

After… with text(100) in setup():

image

:)

Ah yeap kinda same problem here!

The issue with my output is that on a 800x800px size looks good, but I wanted to print that out to test definition and need at least a 6000x6000px, at which resolution I’m unable to replicate that figure :weary:
I’ve tried to use the PGraphics solution mentioned here to stretch the sketch window but doesn’t work, that’s why trying with rotating a line that emulates the “|” bar.

Just for future reference, I’ve managed to get something similar by taking a different approach. The keyboard vertical bar can also be represented as a rectangle of w=1px and h=12px, which is the default font size. By rotating this you are in much more control of the parameters than using a keyboard symbol!
Thanks for the help! :sunglasses:

1 Like