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?
Houcem B. A. Chlegou 9 days 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 9 days 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 8 days 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 8 days 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 6 days ago

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 7 days ago
Have you tested this code on various devices?
simpletwist 7 days 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 7 days ago
Did you measure the flash rate?
simpletwist 7 days ago
May ask which mobile devices the code tested on and how it was determined that the flickering rate was accurate?
simpletwist 6 days 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 5 days 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 3 days ago
Thank you Alex. I'm still testing.
simpletwist 3 days ago

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 5 days 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 5 days 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 4 days 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 4 days ago
I updated the first code to have a 0.5 step in the slider
kerncy 4 days ago
View Timeline