Is there an easy way to display text vertically in P5.JS?

I want to display a string, say "Production" vertically in a top to bottom (or bottom to top) orientation. How this can be done in P5.JS?

I appreciate your help in advance !

Answers

  • I don't think p5.js (or Javascript) has a function to display text vertically, but it isn't difficult to create one. I would do it like this:

    var txt = "PRODUCTION";
    
    function setup() {
      createCanvas(100, 200);
      background(250);
    
      verticalText(txt, width/2, 20);
    }
    
    function verticalText(input, x, y) {
      var output = "";  // create an empty string
    
      for (var i = 0; i < input.length; i += 1) {
        output += input.charAt(i) + "\n"; // add each character with a line break in between
      }
    
      push(); // use push and pop to restore style (in this case the change in textAlign) after displaing the text 
      textAlign(CENTER, TOP); // center the characters horizontaly with CENTER and display them under the provided y with TOP
      text(output, x, y); // display the text
      pop();
    }
    
Sign In or Register to comment.