Question

我试图拍摄我创建的div，并使用p5.js让它每隔一小时在屏幕上移动，我想知道这是否完全可能我也很奇怪这个div是否可以每小时随机改变颜色p5.js

Answer 1

执行此操作的一种方法是使用window.setInterval功能。使用此功能，我们可以每小时执行一次动画。但是，出现的一个问题是，根据P5.js documentation,，draw()函数在调用setup()函数后连续执行。我们可以通过利用noLoop()和loop函数来解决此问题。

noLoop()函数调用将停止执行draw()函数，loop()函数将再次开始执行。那么，让我们来看看我们如何编写代码：

注意：根据文档，每个草图只能有一个绘图功能。因此，如果您在整个课程中有其他动画，这种方法可能不是最佳选择。

//stores the position of the element on the x-axis of the screen
var xPos = 0;
var delay = 60000 * 60; //1,000 milliseconds in a second

window.setInterval(function(){
    //code to be called every hour; make draw function loop
    loop();
}, delay);

function setup(){
    //create your canvas or div or whatever
    createCanvas(400, 400);
}

function draw(){
    // clear the current background
    background(255);

    // set the fill color of your element
    fill(255, 0, 0);

    //change the x position so it can move across the screen
    xPos = xPos + 1;

    // if the circle moves off screen, it's finished animating for the hour
    if(xpos > width)
    {
        xPos = 0; //reset back to 0;
        noLoop(); //end the looping of the draw function        
    }

    //draw your element to the correct location and size; here I'll use an ellipse
     ellipse(xPos, 100, 25, 25);

}

我并不像我所说的那样熟悉P5.js，但希望这能让你有足够的想法让它发挥作用。

编辑：另一种方法是使用CSS动画。使用CSS动画，你甚至不需要P5.js来获得你想要的效果。

HTML：

<div id="my-div" class="my-div"></div>

CSS：

.my-div {
    /* animation name followed by how long the animation takes to perform */
    /* browser prefixes for more browser support */
    animation: slide-across-screen 1s;
    -webkit-animation: slide-across-screen 1s;
    -moz-animation: slide-across-screen 1s;
}

@keyframes slide-across-screen {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: 100%;
    }
}

JavaScript的：

var div = document.getElementById("my-div");
div.addEventListener("animationend", function(){
    div.style.marginLeft = 0;
    div.style.animationPlayState = paused;
}

window.setInterval(function(){
    div.style.animationPlayState = running; //might need browser prefixes here as well
}, 60000 * 60);

Answer 2

您还可以使用p5.dom.js插件库中的createDiv（）元素。 http://p5js.org/reference/#/libraries/p5.dom

var x = 0;
var myDiv;

function setup() {
  var myDiv = createDiv("This is my DIV!");
  setInterval(function() {
    x+=100;
    myDiv.position(x, 200);
  }, 60*60*1000);
}

无论如何，我可以在p5.js中给div一个函数

2 个答案: