JS or CSS code for consistent flashing screen | BONUS for flickering flashlight
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm searching for an elegant solution that provides a user the ability via slider to dial down to .5 increments and achieve a consistent and accurate flicking screen and flashlight. Previous attempts are listed below.

Some of the issues involved screen tearing and inability to obtain an accurate consistent rate.

Here is prior code in use: www.dreamachine.co
Direct repo link: https://www.dropbox.com/sh/1w9igggd9nkyi2d/AAC9jyNMIa6qBt5uAHW38ACOa?dl=0

Please ask questions for further clarification.


Edited: I need this snippet specifically for an iPhone/android flashlight. It appears that PhoneGap has a plug-in that can be altered: https://github.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin

do you want to make the same thing as the provided website? is it?
Chlegou 10 months ago
nope. that's my website. I'm searching for code that will work across devices and browsers. The particular code on that website works – however it is variable based upon screen and graphic card. I need a mobile solution.
simpletwist 10 months ago
It's probably worth clarifying the problem with existing solutions based on JS or CSS animations - at high frequencies the screen will show tearing and the animation will skip / drop frames. This is especially present on large screens and older computers, even when all hardware is rated to run at 60fps or above. You should verify your solution with a high-speed camera to ensure that the screen isn't tearing and the animation isn't running at a lower / higher frequency than it's supposed to.
slang800 10 months ago
Simply limiting yourself to properties that affect the composite step in the rendering process (opacity / scale / position) doesn't seem to work and I haven't had much luck with 2-frame GIFs or short video loops either... but it's possible that I'm doing something wrong, since I don't know much about how GIFs/videos are rendered in the browser or what might be causing the bottleneck.
slang800 10 months ago
I tested using svg, canvas, and opacity the tearing still there. Check out this great vertical sync test on browsers https://www.vsynctester.com/index.html.
farolanf 10 months ago
@farolanf - thank you for this post. The vsync link helped get to the root of the issue.
simpletwist 10 months ago
awarded to kerncy

Crowdsource coding tasks.

4 Solutions


Something like this?

<html>
    <body>
        <style>
            body {
                margin: 0;
            }
            #controls {
                z-index: 10;
                position: absolute;
            }
            #pulser {
                position: absolute;
                width: 100%;
                height: 100%;
                background: red;
                animation-name: pulser;
                animation-duration: 0.05s;
                animation-iteration-count: infinite;
                animation-direction: alternate;
            }
            @keyframes pulser {
                0%   {background-color: red;}
                49%   {background-color: red;}
                50%   {background-color: white;}
                100%   {background-color: white;}
            }
        </style>
        <div id="controls">
            <span id="hertz">10</span>Hz
            <input value="10" min="1" max="25" oninput="setHertz(this)" type="range" step="1">
        </div>
        <div id="pulser"></div>
        <script>
            function setHertz(ele) {
                var hertz = ele.value;
                document.getElementById('hertz').innerText = hertz;
                var seconds = 1 / parseInt(hertz) / 2;
                console.log(seconds)
                document.getElementById('pulser').style.animationDuration = seconds + 's'
            }
        </script>
    </body>
</html>
Have you tested it to ensure it doesn't tear or lag resulting in an incorrect frequency? Because I highly doubt that background-color changes (a property that is calculated during the paint rendering step) would be more performant than the opacity / scale / position animations I've already tried.
slang800 10 months ago
Have you tested this code on various devices?
simpletwist 10 months ago
Yes, assuming the minimum cpu necessary is provided by the kernel and the graphics hardware is capable of rendering at the hertz required there will be no tearing or delay.
ded 10 months ago
Did you measure the flash rate?
simpletwist 10 months ago
May ask which mobile devices the code tested on and how it was determined that the flickering rate was accurate?
simpletwist 10 months ago

Use the phone flashlight rather than the screen.

...Just posting this as a solution in case nobody else can get it working.


Are you looking for something like this for the flashlight?

HTML

<input type="range" min="0" max="120" value="60" step="0.5" id="slider">
<p> HZ: <span id="currentvalue">60</span></p>

Javascript

var slider = document.getElementById( "slider" );
var currentvalue = document.getElementById( "currentvalue" );
var timer;
var intensity = 0.3; // intensity from [0,1]

// start the script if the flashlight is available
window.plugins.flashlight.available(function(isAvailable) {
if (isAvailable) {
  timer = window.setInterval( flicker, 1000 / slider.value / 2 );

  // bind slider
  slider.addEventListener( "change", function(){
    currentvalue.innerHTML = slider.value;
    clearInterval( timer );
    window.setInterval( flicker, 1000 / slider.value / 2 );
  } );
} else {
  alert("Flashlight not available on this device");
}
});

// functions
function flicker() {
window.plugins.flashlight.toggle(
  function() {}, // optional success callback
  function() {}, // optional error callback
  { 'intensity': intensity }
);
}
Could you provide a unique solution for the display?
simpletwist 10 months ago
I don't have the time right now, but feel free to use this (that goes for everyone else too -- I don't mind if you use it in your solutions).
alex 10 months ago
Thank you Alex. I'm still testing.
simpletwist 10 months ago
Winning solution

Here is a demo using webGL, it allows to use graphic card ability, but also v-sync to avoir tearing effect.
Tested on Chrome and IE, all is in the HTML source code :

http://cyril.kern.free.fr/bountify/webGlFlicker/demo.html

Did you test this on a mobile device? I'm having a difficult time producing equal rates. Thank you for trying this approach.
simpletwist 10 months ago
I have tested it on my Motorola Moto G4 and it works until 45Hz, beyond this point, frames begins to be skipped (rates seems wrong). This is due to the algorithm I use, I compute time since the launch of the page, i divide it by the period (1000 / frequency) and if this count is even, display red, odd, display black. If your browser takes more than 1000 / frequency ms between two calls, this will cause the frame skip. As the display do not rely on the previous frame, you become time independant. When a computer is too slow, you have 2 choices : - slow down the display - skip frames (the one I choose) If you have a good computer, you can update requestAnimFrame and max hertz up to 120 (achieved it on my gtx 1060 + i7 6700k)
kerncy 10 months ago
I made a small modification to decrese the timeout for refreshing the display and set it to 10ms, now if you "flash" at 60Hz, you will have less frame skip
kerncy 10 months ago
Thank you. I'm still testing. The important frequencies are between 3 and 20Hz. I need to be able to dial down to increments of .5.
simpletwist 10 months ago
I updated the first code to have a 0.5 step in the slider
kerncy 10 months ago
Do you have copy of the code?
simpletwist 8 months ago
Using chrome, just right click on the webpage and select "view source" all the things you need are in the page itselfs
kerncy 8 months ago
Thank you. The page wont load though.
simpletwist 8 months ago
This site can’t be reached " cyril.kern.free.fr took too long to respond."
simpletwist 8 months ago
You can try this dropbox link https://www.dropbox.com/s/iuft7v9dogpypu5/WebGL%20Flickering.zip?dl=0
kerncy 8 months ago
Got it. Thank you.
simpletwist 8 months ago
View Timeline