如何使用p5.js将文本垂直旋转？

Question

我正在使用p5.js来绘制一个瓶身（圆柱体）并在其上放置一条字符串。到目前为止，我只能将字符串水平放置，而我正在尝试将我的字符串垂直放置（就像你需要转头才能阅读一样）

我进行了大量搜索，并尝试使用p5.js文档中的rotate()和translate()函数。

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;
}

您可以在下面的链接中找到CodePen： https://codepen.io/smickael/pen/bPMEOP

- ParkerIndustries

Answer 1

你已经非常接近成功了！

你只需要将绘制文本的 PGraphics 缓冲区旋转 90 度（使用弧度（HALF_PI）），而不是旋转整个 sketch。

此外，根据你想要对齐文本的方式，之后进行翻译会有所帮助。

"最初的回答"

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>

- George Profenza