如何使用 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;
}

您可以在下面的 link 上找到代码笔： https://codepen.io/smickael/pen/bPMEOP

Answer 1

你太接近了！

您只需将绘制文本的 PGraphics 缓冲区（而不是草图本身）旋转 90 度（使用弧度 (HALF_PI)）。

此外，根据您想要对齐文本的方式进行翻译也会有所帮助

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>

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

How to rotate text vertically with p5.js?

javascript

3d

p5.js