Hi All -
I’m trying to make a number of different rectangles flash to a different color every .5 seconds. I’m trying to just run a different timeline and setting color changes but it is 1) not working and 2) frustrating. Every time the timeline with the color changes runs all of the rectangles change color at the same time.
Is there some other simpler way to do this via javascript that I am missing?
Thank you!
Matt
uploading a copy of your file would be good.
harmonicRhythm.hype.zip (21.1 KB)
Not sure I understand exactly, but I did the first three rectangles with a middle point (keyframe) in the blink timeline for each element to change the bg color then back to its original color, then go to the next rect and so on…
harmonicRhythm.hype.zip (21.4 KB)
As Greg (@gasspence)
Says you need to explain a bit more…
But here is my take on what you want.
I used a random color generator function from
When the button is clicked it runs the code once and then a timeline which we use as the 5 second timer. ( Mor simpler than using a JS setInterval().
The Change colour function then runs every 5 seconds and randomly change all the colours. All the Rects have the same class name which is used in the function to id them.
harmonicRhythm_MHv1.hype.zip (21.2 KB)
Here is a second take on this.
A liitle more complex in JS, I will explain it when I get a min…
harmonicRhythm_MHv2.hype.zip (21.4 KB)
Timeline is set to 2 seconds not 5…
Thanks Mark! Yes, this is exactly what I need it to do!
I’m having trouble understanding how I might make the blink occur more frequently. For example every .5 seconds.
UPDATE!: I see that by changing the interval at which the ‘blink’ timeline repeats will do it!
Yep.
Did it that way to make it easier to adjust.
Great! I’m just noticing a delay when the timeline repeats. Is there a way to have it restart seamlessly?
Thank you!
Probably 
Will look at it when back at Mac
Ok,
The simplest way I think is to add a call to the Hype function to call itself.
add:
hypeDocument.functions().changecolors(hypeDocument, element, event);
After the line
window.rectsIndex = 0;
Thank you Mark! That did it.
I’m having trouble finding a way to make the blink last a fraction of a second longer.
How long exactly…
Maybe twice as long as it is flashing now?
It doesn’t need to be anything specific just so that it is a bit more apparent.
When you say flash, do you mean fade from one to other button?.
Can you give me a better idea…
Well, I anticipate having this function for different tempos on different scenes. Therefore the flashes do not need to fade from one to the next but instead be more like a metronome. Currently, the flash works great but it happens so quickly that it is a bit hard to see.
Does that help?
Sorry, not being into Music I am finding that a little hard to picture .
I am sure we can work something out…
In the project there are couple of things that happen.
A grey Rect colour changes to another colour.
When the the timeout kicks in its colour is changed back to grey.
The timer gets it’t time to kick in from the duration time of the time line.
Lets say 2s. This is done so the change of the colour back to grey coincides with the next rect changing colour.
Now if you want the change back to be longer or shorter you can put in the timeouts time argument a time in milliseconds.
I think having the timeouts in milliseconds would work well. How would I do that exactly?
Thank you!
I discovered a problem with the code when changing times, need to fix it. But in doing so I think I got the display you want…
Will be back…