How to pause sketch

jmean

I have an array of lines that draw a 10print pattern.

I then have the lines rotate. I want to pause the sketch for a second every 45 degree turn.

I can't come up with a condition that consistently triggers the noLoop() function without it drifting out of sync or causing the browser to crash.

Any ideas?

Code here: https://codepen.io/jmean/pen/ZaLyNJ

jeremydouglass

@jmean -- very cool sketch!

Let's add a simple clock condition to your line.update():

if (y >= height && (int(frameCount/30)%2 == int(0))) { 

Our metronome ticks back and forth between 0 and 1 every 30 frames -- int(frameCount/30)%2 -- and when this tick is 0 == int(0) our lines are turning -- when the tick is one, they aren't.

You could plug different numbers in here to change the number of frames, change the ratios of on time to off time, etc. -- or write a different time function, based on frameCount or on millis. In your case, given how you are using step, you want to use frameCount.

Share what you do with it -- I'm curious to see it!

jeremydouglass

I should also mention that, over time, the alignment of your lines will drift off the clock due to accumulating floating point errors in the rotation of your line coordinates, e.g. if you rotate for 90 frames then pause for 90 frames:

  if (y >= height && (int(frameCount/90)%2 == int(0))) { 

You already know how to deal with that internally to the line, here:

Math.round(t*100) == 360

...so you could take the same approach to rounding angles before storing data in the line variables.

Or you could use map() or lerp() to transform frames or step time into angles directly -- then there would be no accumulating error (and nothing to store, incidentally).

Or you could make the second condition a rotation tracker that triggers a pause anytime t crosses the 90 degree angle line and rounds back to 90 when the timer expires.

etc.

jmean

Hi @jeremydouglass,

Thanks a lot for your help. Much appreciated, although I am still struggling to find a condition that pauses the sketch in the way I'm aiming for.

jeremydouglass

That's strange. All I did was change line 81 using the method described and it seems to "pause the sketch for a second every 45 degree turn" just fine.

if (y >= height && (int(frameCount/45.0)%3 == int(0))) {

(ah, I see -- need to better explain the modulo, and why changing it changes the alignment, not just the timing)

At any rate, see this example:

https://codepen.io/jeremydouglass/pen/aVERWp?editors=0010

...and note the caveat about long-term accumulating error drift described above.

jmean

well crikey, for some reason I missed off the int functions and had some odd results. Thats done it perfect thanks.

jeremydouglass

Just in case you want to leave this long-running, you can simply reset t (the offset) every 360 degrees. This prevents angular error from accumulating over time.

Add this to the end of draw -- since the sketch turns 45 degrees (that is, every 45x3 frames), it takes 360x3 frames to make one full turn. Every time it makes a full turn, reset t, essentially starting the sketch over.

if(frameCount%(360*3)==0){
  t=0;
}

Now the lines will always be as accurate as they are in the very first pass - no more drift.

Of course, since the sketch lines are visually symmetrical, you could also restart at 180*3 (although if there were arrowheads on the lines, you would see them jump).

Pen updated: https://codepen.io/jeremydouglass/pen/aVERWp?editors=0010