p5.js | 显示宽度变量

简介

p5.js 是一个基于 JavaScript 的创意编程库，旨在为艺术家、设计师、教育工作者和初学者提供一个简单、有趣的方式来创建交互式图形、动画和音频。通过使用 p5.js，你可以使用简单的代码来实现各种可视化效果，并在网页上以交互方式展示。

在 p5.js 中，你可以使用变量来存储和操作数据。其中一个常见的用途是控制绘图的大小和布局。本文将介绍如何使用变量来设置和改变 p5.js 绘图的宽度。

步骤

1. 创建一个画布

首先，我们需要创建一个 p5.js 画布，以便在其中进行绘图。在 setup 函数中，我们使用 createCanvas() 函数来指定画布的宽度和高度。

function setup() {
  createCanvas(400, 400);
}

上面的代码创建了一个宽度为 400 像素，高度为 400 像素的画布。你可以根据需要调整宽度和高度的数值。

2. 使用变量来设置画布宽度

为了能够动态地改变画布的宽度，我们可以使用变量来存储宽度的值，并在 createCanvas() 函数中使用该变量。

let canvasWidth = 400;

function setup() {
  createCanvas(canvasWidth, 400);
}

在上面的示例中，我们创建了一个名为 canvasWidth 的变量，并将其初始值设置为 400。然后，在 createCanvas() 函数中使用该变量作为画布的宽度。

3. 改变画布宽度

要改变画布的宽度，我们只需要更新 canvasWidth 变量的值，并在每次更新后调用 createCanvas() 函数。

let canvasWidth = 400;

function setup() {
  createCanvas(canvasWidth, 400);
}

function draw() {
  // 绘图逻辑
}

function keyPressed() {
  if (key === ' ') { // 当按下空格键时
    canvasWidth = random(200, 600); // 随机生成新的宽度值
    createCanvas(canvasWidth, 400); // 更新画布宽度
  }
}

在上面的示例中，我们创建了一个名为 keyPressed() 的函数，当按下空格键时，会随机生成一个新的宽度值，并更新画布的宽度。

4. 示例

以下是一个完整的示例代码，展示了如何使用变量来控制 p5.js 绘图的宽度：

let canvasWidth = 400;

function setup() {
  createCanvas(canvasWidth, 400);
}

function draw() {
  background(220);
  ellipse(width / 2, height / 2, 200, 200);
}

function keyPressed() {
  if (key === ' ') {
    canvasWidth = random(200, 600);
    createCanvas(canvasWidth, 400);
  }
}

结论

使用 p5.js 的 createCanvas() 函数和变量，你可以自由地控制绘图的宽度。通过改变变量的值，并在调用 createCanvas() 函数时传入该变量，你可以动态地改变画布的宽度，实现更灵活的绘图效果。