{"id":2383,"date":"2013-12-13T07:00:00","date_gmt":"2013-12-13T15:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/oldnewthing\/2013\/12\/13\/turning-off-the-disco-lights-on-the-start-screen\/"},"modified":"2013-12-13T07:00:00","modified_gmt":"2013-12-13T15:00:00","slug":"turning-off-the-disco-lights-on-the-start-screen","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20131213-00\/?p=2383","title":{"rendered":"Turning off the disco lights on the Start screen"},"content":{"rendered":"

\nOn the Windows 8 Start screen,\nyou can pan left and right,\nand if you are using touch, you can whip the entire screen left and right\nand send all your tiles flying past.\n<\/p>\n

\nOne of the effects we saw when you panned quickly around the Start screen\nwas something we called\ndisco lights<\/i>,\nbut which formally goes by the much more mundane name\nstroboscopic effect<\/i>.\n<\/p>\n

\nWhen you pan quickly through the Start screen,\nthe items are moving so fast that the human eye can’t register any of the\nfine details.\nIt’s just a bunch of colored boxes whizzing past.\nBut video displays are not continuous.\nThey refresh at a particular frequency,\nso it’s as if there’s a strobe light flashing on your Start screen.\n<\/p>\n

\nTherefore, what you perceive is not a bunch of boxes whizzing past,\nbut rather a bunch of boxes moving around in strange patterns.<\/p>\n

\nWhen the panning hits a magic speed,\neach frame’s tiles happen to land in nearly the same spot\nas the previous frame’s tiles,\nbut since they are different tiles, the colors are all different.\nAt that critical speed,\nyou don’t get the effect that the tiles are whizzing past.\nInstead, it looks like they are blinking different colors,\n\nlike disco lights<\/a>.\n<\/p>\n

\n\nPhotosensitive epilepsy warning<\/b><\/a>:\nDo not view the disco lights simulation\nif you have or may have photosensitive epilepsy.\n<\/p>\n

\nOtherwise,\nyou can\nclick the colored box to see the disco lights.\n\nMusic<\/a>\n\nsold separately<\/a>.\nI created two versions of the simulation,\na more realistic one\nand one with an exaggerated disco effect to show you what\ninspired the name.\n<\/p>\n

\n
\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/p><\/div>\n<\/div>\n

(function(){\n var content = document.getElementById(“idContent216”);\n var x = -25;\n var v = 0;\n var a, d, l;\n var peak;\n function step() {\n v = Math.min(Math.max(v + a, 0), peak);\n if (v >= peak && !–l) a = d;\n x += v;\n if (x > 0) x = x % 350;\n content.style.left = -x + “px”;\n if (v > 0) {\n setTimeout(step, 1000 \/ 30);\n }\n }\n function discolights() {\n if (document.getElementById(“idDisco216a”).checked) {\n l = 10;\n a = 2;\n d = -2;\n peak = 81;\n } else {\n peak = 101;\n a = 2;\n d = -3;\n l = 40;\n }\n step();\n }\n content.parentNode.onclick = discolights;\n})();<\/p>\n

\nThe fix was to turn off the colors and just show plain tiles.\nThat way you still felt the motion but you didn’t get the disco effect.\n(It also mean that the Start page was less likely to\n\ninduce photosensitive epilepsy<\/a>.)\n<\/p>\n

\nThis is an interesting example of the sorts of design problems that\nshow up when you start implementing a feature.\nIn the original design for the Start screen,\nit seemed obvious that the Start screen should show what the user\nis scrolling through at full speed.\nBut when you actually did it, the hidden stroboscopic effect\nshowed that doing a better job actually looks worse.\n<\/p>\n

\nTomorrow marks the 36th anniversary of the disco dance movie\nSaturday Night Fever<\/i>.\nSorry we couldn’t keep the lights on for you.<\/p>\n","protected":false},"excerpt":{"rendered":"

Blinky blinky.<\/p>\n","protected":false},"author":1069,"featured_media":111744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[2],"class_list":["post-2383","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-history"],"acf":[],"blog_post_summary":"

Blinky blinky.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/2383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/users\/1069"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/comments?post=2383"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/2383\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media\/111744"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media?parent=2383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=2383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=2383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}