心潮澎湃，华灯齐放，用p5.js点亮3D文字创意！

2023-07-06 23:34:30

用 p5.js 点亮你的创意：三维文字效果

序言：创意的源泉

创意就像一道闪电，在瞬间点亮我们的灵感。它可以来自任何地方，随时激发我们的大脑。2017年浙大120周年校庆期间，用帝国大厦亮灯效果制作的"ZJU 120"文字图案，就是这样一枚点燃激情的火花。

第一章：二维文字效果，创意的起点

为了重现这一经典效果，我们将目光投向了强大的 p5.js 编程语言。利用它的强大功能，我们构建了一个二维数组，每个元素都代表图像中的一个像素。通过调整像素的颜色值，我们可以将图像转换为文字形状。

function preload() {
  image = loadImage("image.png");
}

function setup() {
  createCanvas(width, height);
  pixelArray = createImage(image.width, image.height);
  pixelArray.copy(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height);
}

function draw() {
  background(255);
  for (let i = 0; i < pixelArray.width; i++) {
    for (let j = 0; j < pixelArray.height; j++) {
      let color = pixelArray.get(i, j);
      // Adjust the color values to create the text effect
      color[0] = 255 - color[0];
      color[1] = 255 - color[1];
      color[2] = 255 - color[2];
      pixelArray.set(i, j, color);
    }
  }
  image(pixelArray, 0, 0);
}

第二章：三维文字效果，创新的飞跃

二维效果只是个开始。接下来，我们将踏入三维文字效果的领域，让文字自由地旋转、移动，呈现更加生动的视觉效果。

在 p5.js 中，我们可以使用 WebGL 来实现三维图形的渲染。首先创建一个三维场景，然后将文字形状作为纹理贴图应用到三维模型上。通过控制模型的旋转角度和位置，我们可以让文字在三维空间中动起来。

function setup() {
  createCanvas(width, height, WEBGL);
  // Create a 3D scene
  scene = new Scene();
  // Load the image and create a texture
  texture = createGraphics(image.width, image.height);
  texture.copy(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height);
  // Create a 3D text object
  textObject = new TextObject(texture);
  // Add the text object to the scene
  scene.add(textObject);
}

function draw() {
  background(0);
  // Rotate the scene
  scene.rotateY(0.01);
  // Render the scene
  scene.render();
}