📌  相关文章
📜  如何在 p5.js 中制作数字时钟？(1)

📅  最后修改于: 2023-12-03 14:52:28.047000             🧑  作者: Mango

如何在 p5.js 中制作数字时钟？

在本文中，我们将要学习如何使用 p5.js 制作一个数字时钟，我们将从头开始编写并讲解其实现过程。

介绍

p5.js 是一个处理视觉写作的 JavaScript 库，它可以帮助我们轻松地创建图像、动画和交互式图形等。数字时钟是一种非常简单和实用的应用程序，本教程将展示如何使用 p5.js 制作一个数字时钟。

步骤
步骤1：准备工具

在我们开始之前，我们需要确保我们已经安装了 p5.js 的 JavaScript 库文件。可以从官方网站 (https://p5js.org/) 或从其 Github 页面 (https://github.com/processing/p5.js) 下载最新版本。将它添加到我们的 HTML 文件中，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Digital Clock using p5.js</title>
  <script src="p5.js"></script>
  <script src="sketch.js"></script>
</head>
<body>
  
</body>
</html>

现在，我们需要在项目文件夹中创建一个名为 sketch.js 的文件，这是我们将编写我们的 p5.js 代码的地方。

步骤2：创建画布和变量

我们首先需要在 sketch.js 文件中创建一个 p5.js 画布和一些变量。在这个例子中，我们需要定义时钟的时间和位置。

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

function draw() {
  background(0);

  let h = hour();
  let m = minute();
  let s = second();
}

在上面的代码中，我们使用 createCanvas() 函数创建了一个 400x200 大小的画布，并制定了其放置的页面位置。我们还定义了三个变量 h、m 和 s 存储当前时间的小时数、分钟数和秒数。

步骤3：绘制时钟

接下来，我们需要绘制时钟。我们将一个数字时钟分为两部分：表盘和数字。

表盘可以用五个圆形创建：

function draw() {
  background(0);

  let h = hour();
  let m = minute();
  let s = second();

  noFill();
  strokeWeight(4);
  stroke(255);
  ellipse(100, 100, 180, 180); // 外圆
  ellipse(100, 100, 160, 160); // 内圆
  ellipse(100, 100, 140, 140); // 小圆
  ellipse(100, 100, 120, 120); // 小小圆
  ellipse(100, 100, 100, 100); // 一点儿圆
}

现在画布上会出现一个有五个圆圈组成的图形：

Clock Step 3

接下来，让我们在表盘上添加一些数字：

function draw() {
  background(0);

  let h = hour();
  let m = minute();
  let s = second();

  noFill();
  strokeWeight(4);
  stroke(255);
  ellipse(100, 100, 180, 180); // 外圆
  ellipse(100, 100, 160, 160); // 内圆
  ellipse(100, 100, 140, 140); // 小圆
  ellipse(100, 100, 120, 120); // 小小圆
  ellipse(100, 100, 100, 100); // 一点儿圆

  fill(255);
  noStroke();
  textAlign(CENTER, CENTER);
  textSize(24);
  text("12", 100, 60);
  text("6", 100, 140);
  text("9", 60, 100);
  text("3", 140, 100);
}

现在，我们表盘上已经添加了 12、3、6、9 四个数字：

Clock Step 4

步骤4：添加钟面数字

我们已经绘制了一个表盘，现在需要添加一些数字来显示时间。

function draw() {
  background(0);

  let h = hour();
  let m = minute();
  let s = second();

  noFill();
  strokeWeight(4);
  stroke(255);
  ellipse(100, 100, 180, 180); // 外圆
  ellipse(100, 100, 160, 160); // 内圆
  ellipse(100, 100, 140, 140); // 小圆
  ellipse(100, 100, 120, 120); // 小小圆
  ellipse(100, 100, 100, 100); // 一点儿圆

  fill(255);
  noStroke();
  textAlign(CENTER, CENTER);
  textSize(24);
  text("12", 100, 60);
  text("6", 100, 140);
  text("9", 60, 100);
  text("3", 140, 100);

  strokeWeight(8);
  stroke(255,0,0);
  noFill();
  let end1 = map(s, 0, 60, 0, 360);
  arc(100,100,160,160,0,end1);

  stroke(0,255,0);
  let end2 = map(m, 0, 60, 0, 360);
  arc(100,100,140,140,0,end2);

  stroke(0,0,255);
  let end3 = map(h%12, 0, 12, 0, 360);
  arc(100,100,120,120,0,end3);
}

在上面的代码中，我们使用 map() 函数从时间转换到 0-360 度的角度值。然后我们使用 arc() 函数在表盘上创建一个弧形，它将对应于给定的 end 角度值。

现在，我们成功在表盘上添加了指针：

Clock Step 5

步骤5：添加指针中心点

最后一步，让我们在指针的中心添加一个圆：

function draw() {
  background(0);

  let h = hour();
  let m = minute();
  let s = second();

  noFill();
  strokeWeight(4);
  stroke(255);
  ellipse(100, 100, 180, 180); // 外圆
  ellipse(100, 100, 160, 160); // 内圆
  ellipse(100, 100, 140, 140); // 小圆
  ellipse(100, 100, 120, 120); // 小小圆
  ellipse(100, 100, 100, 100); // 一点儿圆

  fill(255);
  noStroke();
  textAlign(CENTER, CENTER);
  textSize(24);
  text("12", 100, 60);
  text("6", 100, 140);
  text("9", 60, 100);
  text("3", 140, 100);

  strokeWeight(8);
  stroke(255,0,0);
  noFill();
  let end1 = map(s, 0, 60, 0, 360);
  arc(100,100,160,160,0,end1);

  stroke(0,255,0);
  let end2 = map(m, 0, 60, 0, 360);
  arc(100,100,140,140,0,end2);

  stroke(0,0,255);
  let end3 = map(h%12, 0, 12, 0, 360);
  arc(100,100,120,120,0,end3);

  fill(255,0,0);
  noStroke();
  ellipse(100,100,10,10);
}

现在我们的数字时钟已经完成了，并成功在表盘上添加了指针中心点：

Clock Step 6

总结

在本文中，我们已经学习了如何使用 p5.js 制作数字时钟。从创建画布和变量开始，我们完成了时钟的绘制，并添加了表盘数字、指针和指针的中心点。p5.js 可以让我们实现非常炫酷的动画和图像处理，是一个非常强大的 JavaScript 库。