文章/答案/技术大牛

发布

问p5.js时间问题
EN

Stack Overflow用户

提问于 2020-11-22 03:45:13

回答 1查看 81关注 0票数 1

p5.js新手，正在尝试创建一个时钟，理想情况下是一个滑动时钟。我已经成功地创建了一个工作时钟，现在正在努力添加滑动效果。到目前为止，我遇到了一个bug，其他的时间是time-1和time-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>

time

p5.js

seconds

回答 1

Stack Overflow用户

发布于 2020-11-22 13:53:28

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

下面是一个使用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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64947356

复制

相似问题

问p5.js时间问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问p5.js时间问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问p5.js时间问题
EN