How to rotate text vertically with p5.js?

Question

I'm using p5.js to draw a bottle shape (cylinder) and to put a string on that cylinder. Until now, I could only put the string horizontally and I'm trying to put my string vertically (as if you had to turn your head to be able to read)

I searched a lot and I tried with using rotate() and translate() functions, which are in the p5.js documentation.

let angle = 0;

function setup() { 
  createCanvas(600, 400, WEBGL);
  graphics = createGraphics(200, 200);
  graphics.background(255);
  test = createGraphics(300, 100);
  test.background(144, 214, 199);
  test.fill(255);
  test.textAlign(CENTER);
  test.textSize(32);
  test.text('QWERTY', 150, 50);
  rotate(90);
} 

function draw() { 
  background(255);

  graphics.fill(255, 0, 255);
  graphics.ellipse(mouseX, mouseY, 20);
  ambientLight(100);
  directionalLight(255, 255, 255, 0, 0, 1);
  noStroke();
  rotateY(angle * 0.1);
  texture(test);
  cylinder(50, 230);
  angle += 0.07;
}

You can find the codepen on the link below: https://codepen.io/smickael/pen/bPMEOP

user_89766 · Answer

You're so super close !

You simply need to rotate the PGraphics buffer you're drawing the text into, not the sketch itself, by 90 degrees (using radians (HALF_PI)).

Additionally it would help to translate after depending on how you want to align the text

let angle = 0;

function setup() { 
  createCanvas(600, 400, WEBGL);
  graphics = createGraphics(200, 200);
  graphics.background(255);
  test = createGraphics(300, 100);
  test.background(144, 214, 199);
  // rotate the buffer by 90 degrees (remember rotate() works with radians)
  test.rotate(radians(90));
  // similar to passing 75,0 to text, but keeping transformations grouped for easy tweaking
  test.translate(75,0);
  test.fill(255);
  test.textAlign(CENTER);
  test.textSize(32);
  test.text('QWERTY', 0, 0);
} 

function draw() { 
  background(255);

  graphics.fill(255, 0, 255);
  graphics.ellipse(mouseX, mouseY, 20);
  ambientLight(100);
  directionalLight(255, 255, 255, 0, 0, 1);
  noStroke();
  rotateY(angle * 0.25);
  texture(test);
  cylinder(50, 230);
  angle += 0.07;
}

How to rotate text vertically with p5.js?

1 Answers