JavaScript scrolling and photosensitive epilepsy

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

JavaScript scrolling and photosensitive epilepsy

Post by s.dot »

I only know about photosensitive epilepsy because I'm "suspected" of having it myself. If something flickers or flashes at a certain frame rate per second (i think the bad levels are between 20 and 80 frames per second -- could be wrong) it can trigger seizures. That's why my doctor recommended getting an LCD monitor and setting the refresh rate to 75 or higher.

I made this piece of code, which takes an element and increases it's height by 1 every millisecond. Then also decreases the height by 1 every millisecond.. to produce a scrolling "showing" and "hiding" effect. I want to use this on one of my menus but I got to thinking about the "flickering" every millisecond the element's height is updated.

Does this matter? Does the monitor control the "flickering"? Is that considered flickering or flashing when javascript updates the height? Is the element continually "updated" or is it redrawn with every iteration?

Sorry for the stupid question..........

Here is the code

Code: Select all

<html>
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript">
function show(el, heightto, num)
{
	if(num == heightto)
	{
		return;
	}
	
	document.getElementById(el).style.height = num+'px';
	num=num+1;
	setTimeout("show('"+el+"',"+heightto+", "+num+")", 1);
}
function showit(el)
{
	document.getElementById(el).style.display = 'block';
}

function hide(el, heightto, num)
{
	if(num == heightto)
	{
		document.getElementById(el).style.display = 'none';
		return;
	}
	
	document.getElementById(el).style.height = num+'px';
	num=num-1;
	setTimeout("hide('"+el+"',"+heightto+", "+num+")", 1);
}
</script>
<a href="javascript:void(0);" onclick="showit('div1'); show('div1', 300, 0);">+++++++++</a> 
<a href="javascript:void(0);" onclick="hide('div1', 0, 300);">---------</a>
<div id="div1" style="display: none; overflow: hidden; border: solid 1px #000;">stuff</div>
</body>
</html>
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

wasn't ui design/usability, but a general question.
but alrighty anyways
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

The hardware can function at any frame rate. The monitor doesn't vary it's refresh rate. So the flickering isn't actually controlled by the monitor. The rate at which it can display the images is. If the drawing system is set to ignore the retrace signal of the monitor, graphical tearing will often happen. Tearing is where you'll see part of the previous frame and part of the current frame. If, on the other hand, the drawing system synchronizes with the retrace, you won't see tearing, but you will receive a slower frame rate, technically speaking.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

So what you're saying is, no matter how fast it may be flickering, i'll only see what my monitor will give me? (which is 75khz i believe)
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

75Hz yes, at maximum you will only see 75 frames per second. Anything beyond that is fluff and also generally out of the distinguishable range humans can see.

Technically, at around 60 is where humans lose the ability to detect the change.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Well, cognitively detect the change. Although I believe the brain can decipher the difference (otherwise there wouldn't be photosensitive epilepsy, right?)

But, thanks feyd! Your intelligence on such a broad level of subjects is astounding.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Once it passes 60 you actually begin feeding back in on itself. Imagine a sine wave that's at 60Hz. Now imagine another sine wave at 80Hz next to it. You'll see that many of the pulses will collide, but quickly the 80Hz pulses will come out of phase with the 60Hz control.

Multiples of 60Hz are where things need to be for the sweet spot to be maintained.


This knowledge comes to you by the letter "g" for game programming. :)
User avatar
Skara
Forum Regular
Posts: 703
Joined: Sat Mar 12, 2005 7:13 pm
Location: US

Post by Skara »

FYI, I personally can't work on monitors at 60Hz. I can very easily see the flickering. ;)
Post Reply