javascript - Is there anyway that I can give a div a function in p5.js -

im trying take div created , make move across screen every hour using p5.js , i'm wondering if @ possible wonderig if div can change color randomly every hour in p5.js

one way use window.setinterval function. function, can perform animation every hour. however, 1 problem arises that, according p5.js documentation, draw() function executes continuously after setup() function called. can fix taking advantage of noloop() , loop functions.

the noloop() function call stop draw() function executing , loop() function start execution again. so, let's take @ how can code this:

note: according documentation, there can 1 draw function each sketch. so, if have other things animating throughout course of hour approach may not best choice.

//stores position of element on x-axis of screen var xpos = 0; var delay = 60000 * 60; //1,000 milliseconds in second  window.setinterval(function(){     //code called every hour; make draw function loop     loop(); }, delay);  function setup(){     //create canvas or div or whatever     createcanvas(400, 400); }  function draw(){     // clear current background     background(255);      // set fill color of element     fill(255, 0, 0);      //change x position can move across screen     xpos = xpos + 1;      // if circle moves off screen, it's finished animating hour     if(xpos > width)     {         xpos = 0; //reset 0;         noloop(); //end looping of draw function             }      //draw element correct location , size; here i'll use ellipse      ellipse(xpos, 100, 25, 25);  } 

i'm not familiar p5.js i've stated gives enough idea working.

edit: alternative approach use css animations. css animations wouldn't need p5.js desired effect.

html:

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

css:

.my-div {     /* animation name followed how long animation takes perform */     /* browser prefixes 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 }, 60000 * 60);