如何使用 p5.js 库创建七段时钟？(1)

📌 相关文章

📜 如何使用 p5.js 库创建七段时钟？(1)

📅 最后修改于: 2023-12-03 15:38:05.470000 🧑 作者: Mango

使用 p5.js 库创建七段时钟

p5.js 是一个基于 Processing 开发的 JavaScript 库，可以用来创建交互式网页上的图形和动画效果。在本篇文章中，我们将介绍如何使用 p5.js 库来创建一个七段时钟。

准备工作

在开始创建七段时钟之前，我们需要准备以下三个文件：

index.html：HTML 文件，用于引入 p5.js 库和我们的 JavaScript 代码。
sketch.js：JavaScript 文件，用于编写我们的 p5.js 代码。
style.css：CSS 文件，用于美化我们的 HTML 页面。

创建 HTML 文件

首先，在一个空白的 HTML 文件中，我们需要引入 p5.js 库和我们的 JavaScript 代码。在 <head> 标签中添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>七段时钟</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
  <script src="sketch.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>

我们可以在 <title> 中写上我们的网页标题，同时使用 script 标签引入 p5.js 库和我们的 JavaScript 文件。在 CSS 文件中，我们可以按照自己的想法来美化页面，这里就不再赘述。

编写 JavaScript 代码

我们现在来到了最关键的地方：编写 JavaScript 代码来创建我们的七段时钟。在 sketch.js 文件中，我们需要定义一个 setup() 函数和一个 draw() 函数。

首先，我们需要定义一个 setup() 函数来设置画布的大小和背景颜色，以及设置输入文本框的样式。

function setup() {
  createCanvas(400, 200);
  background(50);
  textFont("Arial", 48);
  fill(255);
  stroke(255);
  strokeWeight(1);

  input = createInput();
  input.position(20, 150);
  input.size(150);
  input.value("00:00:00");
  input.input(updateTime);
}

我们在 createCanvas() 中设置画布的大小为 400 x 200 像素，并使用 background() 函数设置背景颜色为深灰色。接着，我们使用 textFont()、fill() 和 stroke() 函数设置文本字体，填充颜色和描边颜色。strokeWeight() 函数设置描边的宽度为 1 像素。

然后，我们使用 createInput() 创建一个文本框，并使用 input.position()、input.size() 和 input.value() 函数设置文本框的位置、大小和默认值。最后，我们使用 input.input() 函数注册一个回调函数 updateTime() 用于更新时间。

接下来，我们来编写 draw() 函数，用于实时绘制七段时钟和更新时间。

function draw() {
  background(50);
  var h = hour();
  var m = minute();
  var s = second();

  var numbers = [
    [ 
      [1, 1, 1],
      [1, 0, 1],
      [1, 0, 1],
      [1, 0, 1],
      [1, 1, 1]
    ],
    [
      [0, 0, 1],
      [0, 0, 1],
      [0, 0, 1],
      [0, 0, 1],
      [0, 0, 1]
    ],
    // ... 省略中间部分 ...
  ];
  
  var s1 = Math.floor(s / 10);
  var s2 = s % 10;
  var m1 = Math.floor(m / 10);
  var m2 = m % 10;
  var h1 = Math.floor(h / 10);
  var h2 = h % 10;
  
  drawSegment( 10, 10, numbers[h1]);
  drawSegment( 70, 10, numbers[h2]);
  drawSegment(130, 10, numbers[m1]);
  drawSegment(190, 10, numbers[m2]);
  drawSegment(250, 10, numbers[s1]);
  drawSegment(310, 10, numbers[s2]);
}

在 draw() 函数中，我们首先使用 hour()、minute()、second() 函数获取当前的小时数、分钟数和秒数。然后，我们通过一个数组 numbers 来表示每个数字在七段显示器中对应的显示状态。数组中每个元素都是一个二维数组，表示对应数字的七个段是否被点亮。例如，数字 0 的显示状态是：

因此，它对应的二维数组是：

[
  [1, 1, 1],
  [1, 0, 1],
  [1, 0, 1],
  [1, 0, 1],
  [1, 1, 1]
]

接着，我们使用 Math.floor() 函数计算出当前小时数的十位和个位数字、分钟数的十位和个位数字、秒数的十位和个位数字，并依次调用 drawSegment() 函数来在相应的位置绘制对应数字的七段显示器。

最后，我们来编写 drawSegment() 函数，用于实现七段显示器的绘制：

function drawSegment(x, y, segments) {
  var w = 20, h = 40;
  var gap = 5;
  
  // draw segments
  if (segments[0][0]) rect(x, y, w, h); // top
  if (segments[1][0]) rect(x, y + h + gap, w, h); // bottom-left
  if (segments[2][0]) rect(x + w + gap, y + h + gap, w, h); // bottom-right
  if (segments[3][0]) rect(x, y + 2 * (h + gap), w, h); // bottom
  if (segments[4][0]) rect(x + w + gap, y + 2 * (h + gap), w, h); // top-right
  if (segments[1][1]) rect(x, y + h/2 + gap/2, w, h); // middle-left
  if (segments[3][1]) rect(x, y + 3*h/2 + gap*3/2, w, h); // middle-right
}

在 drawSegment() 函数中，我们首先定义了每个七段显示器的宽度 w 和高度 h，以及显示器之间的间隔 gap。然后，我们根据二维数组 segments 中对应的数值来决定哪些七段需要被绘制，使用 rect() 函数绘制矩形来实现七段的显示效果。

到此为止，我们的七段时钟就完成了。最后再附上 sketch.js 文件的完整代码：

var input;

function setup() {
  createCanvas(400, 200);
  background(50);
  textFont("Arial", 48);
  fill(255);
  stroke(255);
  strokeWeight(1);

  input = createInput();
  input.position(20, 150);
  input.size(150);
  input.value("00:00:00");
  input.input(updateTime);
}

function draw() {
  background(50);
  var h = hour();
  var m = minute();
  var s = second();

  var numbers = [
    [ 
      [1, 1, 1],
      [1, 0, 1],
      [1, 0, 1],
      [1, 0, 1],
      [1, 1, 1]
    ],
    [
      [0, 0, 1],
      [0, 0, 1],
      [0, 0, 1],
      [0, 0, 1],
      [0, 0, 1]
    ],
    [
      [1, 1, 1],
      [0, 0, 1],
      [1, 1, 1],
      [1, 0, 0],
      [1, 1, 1]
    ],
    [
      [1, 1, 1],
      [0, 0, 1],
      [1, 1, 1],
      [0, 0, 1],
      [1, 1, 1]
    ],
    [
      [1, 0, 1],
      [1, 0, 1],
      [1, 1, 1],
      [0, 0, 1],
      [0, 0, 1]
    ],
    [
      [1, 1, 1],
      [1, 0, 0],
      [1, 1, 1],
      [0, 0, 1],
      [1, 1, 1]
    ],
    [
      [1, 1, 1],
      [1, 0, 0],
      [1, 1, 1],
      [1, 0, 1],
      [1, 1, 1]
    ],
    [
      [1, 1, 1],
      [0, 0, 1],
      [0, 0, 1],
      [0, 0, 1],
      [0, 0, 1]
    ],
    [
      [1, 1, 1],
      [1, 0, 1],
      [1, 1, 1],
      [1, 0, 1],
      [1, 1, 1]
    ],
    [
      [1, 1, 1],
      [1, 0, 1],
      [1, 1, 1],
      [0, 0, 1],
      [1, 1, 1]
    ]
  ];
  
  var s1 = Math.floor(s / 10);
  var s2 = s % 10;
  var m1 = Math.floor(m / 10);
  var m2 = m % 10;
  var h1 = Math.floor(h / 10);
  var h2 = h % 10;
  
  drawSegment( 10, 10, numbers[h1]);
  drawSegment( 70, 10, numbers[h2]);
  drawSegment(130, 10, numbers[m1]);
  drawSegment(190, 10, numbers[m2]);
  drawSegment(250, 10, numbers[s1]);
  drawSegment(310, 10, numbers[s2]);
}

function drawSegment(x, y, segments) {
  var w = 20, h = 40;
  var gap = 5;
  
  // draw segments
  if (segments[0][0]) rect(x, y, w, h); // top
  if (segments[1][0]) rect(x, y + h + gap, w, h); // bottom-left
  if (segments[2][0]) rect(x + w + gap, y + h + gap, w, h); // bottom-right
  if (segments[3][0]) rect(x, y + 2 * (h + gap), w, h); // bottom
  if (segments[4][0]) rect(x + w + gap, y + 2 * (h + gap), w, h); // top-right
  if (segments[1][1]) rect(x, y + h/2 + gap/2, w, h); // middle-left
  if (segments[3][1]) rect(x, y + 3*h/2 + gap*3/2, w, h); // middle-right
}

function updateTime() {
  var inputVal = input.value().split(":");
  var h = parseInt(inputVal[0]);
  var m = parseInt(inputVal[1]);
  var s = parseInt(inputVal[2]);

  if (!isNaN(h) && !isNaN(m) && !isNaN(s)) {
    hour(h);
    minute(m);
    second(s);
  }
}

现在，我们可以在浏览器中打开 index.html 文件，就能看到一个简单的七段时钟了：

七段时钟