穿越星际虫洞，点亮创意星河——用p5.js打造Starfield星空隧道

2023-09-16 05:07:18

遨游星际星河，打造独一无二的Starfield

在这个项目中，我们将使用JavaScript库p5.js来实现Starfield星空隧道的效果。p5.js是一个灵活易用的开源库，可以帮助我们轻松创作出各种动态效果和交互式艺术作品。

首先，让我们创建一个新的p5.js草图。在你的代码编辑器中，创建一个新文件，并输入以下代码：

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0);

  // 在这里添加你的代码...
}

这段代码创建了一个基本的p5.js草图，它会在窗口大小变化时自动调整画布的大小。接下来，我们将定义一些变量来存储星空隧道中的星星。

let stars = [];
let numStars = 1000;

我们将使用数组stars来存储星星，并将numStars设置为1000，这样我们就可以在画布上生成1000颗星星。

接下来，我们需要创建一个函数来生成星星。

function createStar() {
  let x = random(width);
  let y = random(height);
  let size = random(1, 5);
  let speed = random(0.1, 1);

  return {
    x: x,
    y: y,
    size: size,
    speed: speed
  };
}

这个函数将创建一个星星对象，并返回该对象。星星对象包含四个属性：x和y坐标、大小和速度。

然后，我们需要创建一个循环来生成星星。

for (let i = 0; i < numStars; i++) {
  stars.push(createStar());
}

这个循环将调用createStar()函数1000次，并将生成的星星对象推入stars数组中。

最后，我们需要创建一个函数来绘制星星。

function drawStars() {
  for (let i = 0; i < stars.length; i++) {
    let star = stars[i];
    fill(255);
    noStroke();
    ellipse(star.x, star.y, star.size, star.size);
  }
}

这个函数将遍历stars数组，并绘制每个星星对象。

现在，我们已经完成了所有必要的步骤，可以将这些函数添加到我们的draw()函数中。

function draw() {
  background(0);

  drawStars();

  // 在这里添加你的代码...
}

现在，如果你运行你的草图，你应该会看到画布上出现了1000颗星星。

点亮星河隧道，感受无限创意

现在，让我们来创建星空隧道的效果。我们将使用p5.js的translate()函数来平移画布，模拟星星在隧道中飞行的效果。

function draw() {
  background(0);

  translate(mouseX, mouseY);

  drawStars();

  // 在这里添加你的代码...
}

现在，如果你移动鼠标，你应该会看到星星在隧道中飞行的效果。

为了让星空隧道看起来更逼真，我们可以添加一些额外的效果，比如星星的闪烁和速度变化。

function drawStars() {
  for (let i = 0; i < stars.length; i++) {
    let star = stars[i];
    fill(255, 255, 255, random(100, 255));
    noStroke();
    ellipse(star.x, star.y, star.size, star.size);

    star.x += star.speed;

    if (star.x > width) {
      star.x = 0;
    }
  }
}