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

七段显示器是一种用于显示十进制数字的电子显示设备，可以替代更复杂的点阵显示器。

7 段显示时钟，每段是一个 LED，所有 7 个 LED 用一个公共引脚连接在一起，该引脚可以是共同的正极或共同的负极，并以特定的样式排列。典型的 7 段显示器有 10 个引脚排列在顶部和底部，每个中间引脚是公共引脚。七段显示器广泛用于数字时钟、电子仪表、基本计算器和其他显示数字信息的电子设备中。

p5.js是一个用于创意编码的 JavaScript 库，专注于为艺术家、设计师、教育工作者、初学者和其他任何人提供可访问和包容的编码！ p5.js 是免费和开源的，因为我们相信每个人都应该可以使用软件以及学习它的工具。

使用草图的比喻，p5.js 具有一整套绘图功能。但是，您不仅限于绘图画布。您可以将整个浏览器页面视为草图，包括用于文本、输入、视频、网络摄像头和声音的 HTML5 对象。数字 0 到 9 是七段显示器上最常见的字符。用于这些中的最常见的模式是：

0 1 2 3 4 5 6 7 8 9

环境设置：我们将使用Visual Stdio Code编写代码来创建七段显示时钟。

• 第 1 步：为了在 Visual Stdio Code 中使用 p5，我们必须安装扩展 p5.vscode，如下图所示。

  

• 第 2 步：现在要创建一个新的 p5.js 项目，请转到View->Command Palette->Create p5.js Project。

  

项目结构：

例子：

sketch.js

let display = [];
let colon = [];
let number;
function setup() {
  createCanvas(600, 480);
  let inc = 80;
  let x = 50;
  let j = 0;
  for (let i = 0; i < 6; i++) {
    display[i] = new Display(x, height / 2 - 40, 100);
    if ((i + 1) % 2 == 0) {
      colon[j++] = x + inc;
      x = x + inc + 30;
    } else {
      x = x + inc;
    }
  }
  number = new Array(10);
  initializeArray();
}
function draw() {
  frameRate(1);
  background(0);
  let sec = ("0" + second()).slice(-2);
  let min = ("0" + minute()).slice(-2);
  let hrs = ("0" + hour()).slice(-2);
  console.log(colon);
  display[0].show(number[hrs[0]]);
  display[1].show(number[hrs[1]]);
  display[2].show(number[min[0]]);
  display[3].show(number[min[1]]);
  display[4].show(number[sec[0]]);
  display[5].show(number[sec[1]]);
  
  fill(255, 0, 0);
  for (let i = 0; i < 2; i++) {
    ellipse(colon[i], height / 2 - 20, 10);
    ellipse(colon[i], height / 2 + 40, 10);
  }
}
  
function initializeArray() {
  number[0] = [true, true, true, true, true, true, false];
  number[1] = [false, true, true, false, false, false, false];
  number[2] = [true, true, false, true, true, false, true];
  number[3] = [true, true, true, true, false, false, true];
  number[4] = [false, true, true, false, false, true, true];
  number[5] = [true, false, true, true, false, true, true];
  number[6] = [true, false, true, true, true, true, true];
  number[7] = [true, true, true, false, false, false, false];
  number[8] = [true, true, true, true, true, true, true];
  number[9] = [true, true, true, true, false, true, true];
}

索引.html

  
    
    Seven Segment Display
    
    
  
    
    
    
    
    
    
    
    
  
    
      body {
        text-align: center;
        padding: 0;
        margin: 0;
      }
      canvas {
        vertical-align: top;
      }
    
  
  

显示.js

class Display {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.width = 10;
    this.height = size / 2 - this.width / 2;
    this.offset = this.width;
  }
  
  show(segments) {
    this.edge(this.x, this.y - this.offset, true, segments[0]);
    this.edge(this.x + this.height, this.y, false, segments[1]);
    this.edge(
      this.x + this.height,
      this.y + this.height + this.offset,
      false,
      segments[2]
    );
    this.edge(
      this.x,
      this.y + 2 * this.height + this.offset,
      true,
      segments[3]
    );
    this.edge(
      this.x - this.offset,
      this.y + this.height + this.offset,
      false,
      segments[4]
    );
    this.edge(this.x - this.offset, this.y, false, segments[5]);
    this.edge(this.x, this.y + this.height, true, segments[6]);
  }
  
  edge(x, y, hor, flag) {
    if (flag) fill(255, 0, 0);
    else fill(0);
    if (hor) rect(x, y, this.height, this.width);
    else rect(x, y, this.width, this.height);
  }
}

输出：