p5.js 时间问题

Posted 2023-02-25

技术标签:

【中文标题】p5.js 时间问题【英文标题】：p5.js Time Issue 【发布时间】：2020-11-21 19:45:12 【问题描述】：

p5.js 的新手并尝试创建一个时钟，理想情况下是一个滑动时钟。我已经成功创建了一个工作时钟，现在正在添加滑动效果。截至目前，我遇到了其他时间的错误，时间 1 和时间 2。这是发生了什么：Clock Bug 0-2,0-1,0

https://editor.p5js.org/miteshjethwa/present/zeYgP3rzx

下面是代码，以备不时之需：

sketch.js：

var myFont
var button
var activated
var myDesign

function preload () 
  myFont = loadFont("MajorMonoDisplay-Regular.ttf")


function setup() 
  createCanvas(600, 600);
  textAlign(CENTER, CENTER)
  
  fill('#000000')
  
  button = createButton("Show Date")
  button.position(10,10)
  button.size(100,25)
  button.mousePressed(pressFn)
  
  activated = false


function myDesign() 
    push()
  translate(width/2,height/2)
  
  textFont(myFont);
  
  //textSize(100)

  textSize(25)
    fill(255)
  text(nf(day(),2) + " " + nf(month(),2) + " " + year(), 0, 150)
    pop()


function pressFn() 
  if (activated) 
    activated = false 
      else 
        activated = true
      
 

function draw() 
  background(0);
  
  if (activated) 
    myDesign()
  
  
  if (activated) 
    button.html("Hide Date")
   else 
    button.html("Show Date")
  
  
  translate(width/2,height/2)
  
  textFont(myFont);
  
  textSize(75)
  
  fill(255)
  
  text(nf(hour(),2) + " " + nf(minute(),2) + " " + nf(second(),2), 0, 0)
  
  fill(25)
  
  text(nf(hour(),2) + " " + nf(minute(),2) + " " + nf(second()-1,2), 0, -100)
  
  fill(12.5)
  
  text(nf(hour(),2) + " " + nf(minute(),2) + " " + nf(second()-2,2), 0, -200)
  
  //if (second() = 59) 
  //  second() = 00
  //

style.css：

html, body 
  margin: 0;
  padding: 0;
  

canvas 
  display: block;

index.html:


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

【问题讨论】：

期望的结果是什么？对不起应该说，希望底部时间是实时的，上面的时间比实时时间晚 1 秒，然后上面的时间比实时时间晚 2 秒创建一个现在是静态的滑动效果，遇到当 seconds()=0 时显示 0-1 或 0-2 等的问题。我相信我有一个解决方案，但我不确定如何正确地将其放入语法中：if s=-01 let s=59 if s=-02 let s=58 【参考方案1】：

最简单的方法是将时间状态存储在数组中。如果没有存储数组，您将需要使用模数和三元运算符进行大量数学运算，可能还需要做更多的事情。

这是一个使用 javascript 控制 HTML 元素的简单演示：

// you won't need this, this just gets the elements
const prev2 = document.querySelector("#prev2"),
  prev1 = document.querySelector("#prev1"),
  current = document.querySelector("#current");

//
//
//
//

let times = Array(3).fill(['','',''])

function draw() 
  if (second() !== +times[2][2]) 
    times.shift();
    times.push([hour(), minute(), second()].map(n=>n.toString().padStart(2, 0)));
  

  // you would use text() here, like:
  // text(times[0].join`:`, x, y);
  prev2.innerText = times[0].join`:`;
  prev1.innerText = times[1].join`:`;
  current.innerText = times[2].join`:`;


//
//
//
//

// since p5 isnt working in snippets, this stuff below makes a mock version

setInterval(draw, 16.67);

function hour () 
  return new Date().getHours();


function minute () 
  return new Date().getMinutes();


function second () 
  return new Date().getSeconds();

<p id="prev2"></p>
<p id="prev1"></p>
<p id="current"></p>

【讨论】：

editor.p5js.org/miteshjethwa/sketches/s1eto41Op [对象对象] 好的，所以我尝试将其添加到 HTML 和 JS 中，尝试使用和不使用我的时间部分并得出 [object Object] 的结果，p5.js 也使用 second() 而不是比 seconds() 例如，所以我调整了它们，但我无法弄清楚为什么它说 [object Object] 以及为什么它通常不起作用，我花了一整天时间并且无法将它们放在一起。谢谢你的帮助，真的很感激

以上是关于p5.js 时间问题的主要内容，如果未能解决你的问题，请参考以下文章

p5.js Í 如何将前 N 帧作为图像循环播放？

p5.js：如何在不改变背景或使用外部画布的情况下在画布形状上打孔？

html p5.js + p5.dom.js + clmtracker.js

html p5.js中的颜色

html p5.js中的基本形状

html p5.js中的基本循环

p5.j​​s 时间问题

p5.js 时间问题