Scroll Slow. Have Fun | Hacker News Reader

Scroll Slow. Have Fun

scrollslowhavefun.com

548 pointsdrinchev141 comments

This somehow manages my monitor to make a high pitched sound. It's an LCD monitor. It's the actual monitor making the sound. Switching to a different window or tab makes the sound top. Taking a screenshot of the tab, and closing the tab but viewing the screenshot, produces the sound.

"Some surface-mount capacitors exhibit acoustic noise when operated at frequencies in the audio range." [1]

I see that this screen has alternating black and white lines. I count 43 black lines on my monitor. Assuming 60 Hz refresh rate, that is 2580 Hz in terms of the pixels being off or on, which is a perfectly audible frequency. Even with 120 Hz refresh rate, that would be 5160 which is still easily audible. Without knowing anything else, I guess that there may be a capacitor somewhere that is charging and discharging along with the brightness of the screen as it is refreshed from top to bottom, which is causing it to flex in a way that produces an audible noise.

I am curious is Aardwolf can produce different frequencies by varying the width (and therefore the quantity) of black and white lines on the screen. If so, you should be able to play some music on it.

[1] http://www.edn.com/design/components-and-packaging/4364020/R...

I mocked up a quick JS canvas page that varies the bar width and I do indeed hear the tone changing:

http://thume.ca/screentunes

I also put some ideas on the Github Readme including using feedback from the microphone to calibrate a width->pitch mapping to play music using your screen.

Hey, I forked your repo and added tuning, so that everyone can adjust it for their display

http://genabitu.github.io/screentunes/

Maybe I'll get to get it play music (a json with timings and notes would suffice, I suppose?)

You shouldn't even need the microphone. Assuming that doubling the line frequency doubles the audio frequency, you can play music by just choosing a note to call "A" and varying the frequency from there. It won't be in tune, but that doesn't really matter.

Hey, I have done some work on my fork, and now it plays NYAN CAT (didn't have any better idea...)

http://genabitu.github.io/screentunes/

You have to calibrate it before it starts playing.

Please make a Show HN post. Also prepare for a lot of hits from the random internet. This is amazing.

I can hear the result of this, but it's barely audible, and only near the top of the range, at bar widths thinner than the OP.

I'll have to find some other monitors to test this on. It would be awesome if there were some commplace model that's relatively loud for a wide pitch range. Said model might then be useful for musical hacks in the same vein as driving the stepper motors in old floppy drives.

Hey! For me, this produces sound for the whole range of heights/frequencies! It plays a bit more silent for high frequencies, but for the lowest ones, the sound is quite loud (given it's produced by a screen...) and I think, it could easily go for an even lower pitch. I am using a modified SyncMaster 203B (I replaced some of the electrolytic capacitors after the lighting ceased to work, so that may be it...)

My monitor plays the whole range as well, that's what I calibrated the height sweep to.

Neat. I don't notice anything/much for most of the cycle, but somewhere in the middle I can hear a brief "zwip" rising tone, for part of a second. I happen to have three "identical" monitors, and it's similar on each one, although I believe I can hear the tone for a somewhat longer range on one of them.

I can verify that I hear noise from this on my Macbook Air, faintly, and it also creates a buzzing sound on my iPhone 5s!

I'm on a Macbook Pro. Can't hear anything. Sad :(

Also on an older iPad

I enjoyed that. no noise on my chromebook will try on big monitor in the morning.

That's so cool! I can hear it on my Nexus 5 if I put it right up to my ear!

Awesome! I can hear it perfectly on one monitor at home, but not the other.

This is amazing. Yes, add a song or I will.

If so, you should be able to play some music on it.

Also makes for a nice covert channel... similar tricks with "listening" to the noises a computer makes have been shown to be possible to use for extracting information like encryption keys:

https://news.ycombinator.com/item?id=6927905

Inductors do this as well. The changing magnetic field causes the windings to vibrate, creating an audible sound. The sound my work monitor makes sounds like an inductor to me.

Right--or more commonly the cores of old power transformers will softly buzz at 60 hz.

You'll find it a lot in switching DC-DC converters as well. The pass inductors that help filter out the switching frequency can make quite a bit of noise, especially at higher loads.

My dimmable touch lamp makes an annoying high-pitched sound that is loudest on the dimmest mode. I searched for an explanation and apparently some light bulbs have filaments that are flimsy or light-weight enough that they vibrate audibly.

The power supply on the old Apple II "chirped" when switched off. I always understood it to be the oscillator decaying down from 20 KHz to DC in half a second or so.

Zooming in and out does produce different audible frequencies on my screen.

Something quite different, but it reminds me of Tempest for eliza: http://www.erikyyy.de/tempest/

That was a cool hack!!

I'm getting this as well, on an older dell 2407wfp.

Zooming in (i.e. making the width greater) results in a lower-pitched sound.

Zooming out (i.e. making the width narrower) results in a higher-pitched sound.

Great catch/explanation of this anomaly.

reminds me of how top gear was able to do similar with an F1 Engine https://www.youtube.com/watch?v=5BaR1Kc62Pk

It doesn't happen to mine but I can see how it could - the liquid crystal is driven with a high-frequency signal whose voltage basically corresponds to the intensity of the pixel, and when images containing repetitive content are displayed, that signal will follow the content of the image; the current that drives the display also follows that signal, and if the signal contains frequencies that happen to excite resonances in the audible range in some components of the hardware, you can hear it.

http://en.wikipedia.org/wiki/Coil_noise

http://www.ukgamingcomputers.co.uk/capacitor-squeal-coil-whi...

http://electronics.stackexchange.com/questions/34806/what-mi...

It's because of these horizontal bars, you can get the same effect with similar graphics:

All video interfaces we use transmit data serially, line by line, pixel by pixel. The bars are 16px tall (black + white) so at 60Hz and 1920×1080px they'll produce a tone with fundamental frequency of 4.05kHz (60Hz × 1080 lines / 16 lines) and harmonics.

This is way more fascinating than the site itself...

I'll confirm a tone shift on an HP ZR2740w as well. It's quiet, and I have to put my ear to the back of the monitor to notice as I alt-tab the window. But it's certainly there.

(I'm trying to get a recording, but I work in a plant and it's a bit full of white-ish noise...)

May be your age. Higher pitched frequencies are often heard by you youngsters but not us old folk.

Can confirm same high pitched sound on 27 iMac.

Plus: open developer toolbars, find styles for .bars, change margin-bottom and sound changes frequency.

Damn you for making me look like a fool with my ear up against the screen.

(No sound here)

Same here on my Monoprice 27" IPS LED monitor: http://www.monoprice.com/Product?p_id=10489

Does this work for for anybody on MBP or Retina displays? I tried mouse-wheel, trackpad and scroll bar, can't hear anything. anybody?

Nothing for me either with a rMBP

Same on my work LCD. Dell E207WFP.

I also tried test patterns at http://www.lagom.nl/lcd-test/ and http://www.testufo.com/. None of those made caused my screen to make an audible sound.

Same sound here - only on my external monitor though, not on my MBP's own screen.

My monitor also makes a high pitched noise. Sony KDL-32EX400 (using HDMI connection). Neither of my other monitors produce the noise (VGA, & Displayport connections if it matters)

Same here, I first thought it was the gfx card's capacitors. They usually like doing that when I use things with pixel shaders (obviously a different thing but it reminded me).

Furmark always does it to my cards. Perhaps of interest. http://www.hardwarecanucks.com/forum/hardware-canucks-review...

Same here on a MBP.

Mine doesn't (Retina without ghosting).

Though, when scrolling on the site, _something_ (it's not the screen) is making weird noises, almost like the sound when accessing a HDD. I have an SSD though.

I had the same issues with other sites / applications when scrolling in general as well. Even more noticeable with the MacBook Air I had before. Is there any rational explanation for this?

The first thing to know is that the power consumption of modern CPUs varies hugely between idle and full-speed; from a few watts to several dozen.

When you are just looking at the screen, and the machine is otherwise idle, the CPU is not doing much, so it goes into low-power low-frequency mode and "sleeps" until some event occurs. When you put fingers on the trackpad and scroll, it sends an "interrupt" to the CPU, telling it that a scroll event has occurred; in a few microseconds the CPU goes from idle to full power to process that scroll event, then goes back to sleep again. The GPU might also be involved in the same way. Every little scroll movement results in an interrupt, so when you are scrolling at a constant rate interrupts occur at a fixed frequency, and the system is going from idle to full power many times a second. The pulses of power draw that this creates, happening at audible frequencies, causes various components like inductors and capacitors to emit sound.

I used to have a computer that did that a long while back. It made a whistle whenever I'd scroll. IIRC I decided it was the video card, though I'm not sure I ever confirmed it.

I've got a MacBook Pro, but slightly older, and I'm not hearing it. Mine still has the ghosting issue, which makes me wonder if that issue is stopping this issue.

Mine too. What is this sorcery?

I recently tested my new TFT (TN-panel) monitor with a monitor test application, and noticed an high pitched sound on a very specific blue line pattern too. I turned down the brightness from 100% to 80% and that reduced it.

I have two identical monitors. One of them makes a high pitched sound on this page, and the other is perfectly fine.

Weird.

We just produced a children book with this technology in Germany:

http://www.amazon.de/Ulff-Backenh%C3%B6rnchen-eine-irre-Verf...

Will be released in the next 4 weeks. It was fun to make, but also quite nightmarish in the technical details. It is a hell of work (we have roughly 30 animations in the book, very small and very big ones). It requires extremely accurate measurements for the grid-foil and a sophisticated workflow and color management.

In the first run, the printer forgot to fixate the ink on the grid-foils with a protective layer, so using the foil would smear the black color.

When I was a kid, we had a similar book (Magic Moving Picture Book). It was a lot of fun.

Out of Print, but still on amazon

http://www.amazon.com/The-Magic-Moving-Picture-Book/dp/04862...

Hope you get yours working well.

I had this as well and was fascinated by it as a youngster. Seeing this site today brought those memories to the surface in a rush of nostalgia. This link in the comments was icing on the cake, thanks!

My son just got one of those types of books for Christmas. In the states there is a run of them called "Scanimation" books.

http://www.amazon.com/s/url=field-keywords=scanimation

How does the kindle edition work?

Not at all. Do not ask me! The publisher insists on offering all his books as ebooks (the ebook is included if you buy the print book).

Isn't this how those "3D" panels work as well? It's the same thing printed, but with a plastic prism-esque thing on top showing different views from different angles.

Most 3D panels use an array of lenticular lenses to convert incident angle to position[1].

Note that the 3DS actually uses a parallax barrier, which is similar to this, but with the stripes far enough out-of-plane to the image to allow each eye to see a different part of the image[2].

The book my daughter has works just like this website, with black stripes on a transparent layer, and a layer immediatly below that is attached to the spine, but not the outer layer, causing it to move relative to the stripes as the page is turned[3].

1: http://en.wikipedia.org/wiki/Lenticular_printing

2: http://en.wikipedia.org/wiki/Parallax_barrier

3: No good wikipedia article, so here is their about page http://scanimationbooks.com/about-scanimation/

any pictures or previews?

The book has been printed and is currently delivered to stores and Amazon. The Amazon-link above will come up with previews in the next couple of days. The effects are quite stunning.

The cover is also on the publishers website: http://www.mixtvision-verlag.de/main_detail.php?id=1261&bere...

The book will be available as ebook as well, although I cannot actually see the sense of this at all, as the animations will not work ;-)

I am lazy and (apparently) suck at scrolling smoothly, dropping this in the console worked well :)

    setInterval(function() {
      window.scrollTo(0, document.body.scrollTop + 5)
    }, 60)

Setting the scroll increment to 5px diminishes the lenticular effect; it's like skipping frames in film. Your mind interpolates the result, but it's not as smooth as scrolling by 1px and reducing the time interval to speed things up instead.

Try this one instead to see the difference. This will scroll at approximately the same rate as your example:

setInterval(function() { window.scrollTo(0, document.body.scrollTop + 1) }, 12);

I prefer it a bit slower though:

setInterval(function() { window.scrollTo(0, document.body.scrollTop + 1) }, 30);

No need to use the console either. Just put bradleyland's suggestion in the address bar prefixed by javascript:

javascript:setInterval(function() { window.scrollTo(0, document.body.scrollTop + 1) }, 30);

I'm curious what browser you use. I was under the impression that most of the major browsers had disabled the ability to type javascript: URLs because of self-XSS (which is a fascinating concept on the border between computer exploit and human exploit).

On Chrome 39 on CrOS, I can't type that into the URL field, and if I copy/paste it, the "javascript:" portion of the scheme magically disappears, so hitting enter takes me to a SERP. I wonder if that's done in the hope that you Google the self-XSS that you were about to run and see someone explain what's going on.

The initial "javascript:" gets stripped on paste but you can add it back manually.

I am lazy and suck at scrolling smoothly, so I middle-click to get the scroll tool set-point, then move my pointer a little below the set-point to indicate that I wish to scroll down slowly. Works in FF and Chrome.

Isn't this how everyone scrolls slowly?

Middle-click usually pastes stuff you selected on Linux, so not everyone. However if I enable autoscrolling then middle-click works as you described, quite useful!

This worked like a charm on Firefox! It is also much better when squinting.

That didn't work in Firefox for me but this one does:

setInterval(function () { window.scrollTo(0, document.documentElement.scrollTop + 5); }, 60)

in IE/Firefox you can click the middle mouse button to get smooth constant scrolling. Chrome probably does this as well

> and math

do this instead for 60 intervals per second: setInterval(function() { window.scrollTo(0, document.body.scrollTop + 5) }, 16.666666666666668)

or better yet skip the setInterval and have the page continue to move:

    var scrollIncrement = 5;
    var height = Math.max( document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight ) - window.innerHeight;
    var AnimationFrame = (function() {
        var FPS = 16.6666666667; // 1000 / 60 = Frames Per Second
        var RAF = window.requestAnimationFrame
                || window.webkitRequestAnimationFrame
                || window.mozRequestAnimationFrame
                || window.msRequestAnimationFrame
                || window.oRequestAnimationFrame
                || function(a) { window.setTimeout(a, FPS); }
        var CAF = window.cancelAnimationFrame
                || window.webkitCancelAnimationFrame
                || window.mozCancelAnimationFrame
                || window.msCancelAnimationFrame
                || window.oCancelAnimationFrame
                || function(a) { window.clearTimeout(a); }
        return {
            request: function(a) {
                RAF(a);
            },
            cancel: function(a) {
                CAF(a);
            }
        }
    })();


    var scroll = function(){
        var scrollPosition = Math.max( document.documentElement.scrollTop, document.body.scrollTop );
        if ( scrollPosition == height )
            scrollIncrement = (-1 * scrollIncrement);
        else if ( scrollPosition == 0 )
            scrollIncrement = (-1 * scrollIncrement);
        window.scrollBy(0, scrollIncrement);
        AnimationFrame.request(scroll);
    }

    AnimationFrame.request(scroll);

you can easily just tweak the scroll distance as well by entering scrollIncrement = x;

I held down the "down arrow"

In Chrome, that was a bit jumpy compared to using the scroll bar.

Thanks!

To scroll super-slowly and smoothly on Windows, use the middle-click thing that spawns a little arrow-circle doodad. I'm pretty sure Linuces are inconsistent about implementing that feature, though.

Ah, thank you! My scrolling is just too spastic :)

Does anyone besides me have a problem with the pictures being too large and too close together? The mask lines were only in the top half of the screen and I could never see the entire picture onscreen as they were too large. Zoom out did nothing.

That is correct. I just realized I do not have this feature on my Arch with Firefox in i3.

It's an option in Firefox, which (IIRC) is disabled by default everywhere except Windows. Look in Firefox's preferences; on the Advanced tab, it's the "Use autoscrolling" option.

It's one of the first settings I turn on in a Firefox install and I wonder why it isn't default behavior in browsers it's so convenient.

Middle-click-to-instacopypaste-highlighted-text is a well-established standard on Unix/Linux and people are highly resistant to losing it.

I like the Windows convention that the middle-mouse is entirely for navigating the viewpane, so I'd prefer if it was just ctrl+command+click or something for the "selection-paste" operation, but that kind of UI change is a hard sell.

Am I doing something wrong? I don't see anything interesting. I see black lines and some art scrolling behind the lines. Is there some sort of illusion this is supposed to create?

I see, you have to use the scroll bar which goes one pixel at a time. This doesn't work for me if I use my scroll wheel on my mouse. It works if I grab the scroll bar and move downward.

For me the skull one just never worked right no matter how I tried scrolling. But the other ones work great.

For wanting to look more into the math/art behind this, they're based on Moiré patterns - http://en.wikipedia.org/wiki/Moir%C3%A9_pattern

Moiré patterns are about superimposition of periodic patterns.

This has nothing to do with it, it's just dividing an animation into scanlines and interleaving them so that the horizontal lines act as a shutter when scrolling.

would also relate this to the technique of interlacing[1], which I find in this case even more relevant than the very special application of a moire pattern. Just that this one has more than the usual two fields.

Basically you're moving an interlaced still image composite made from multiple frames of an animation under an stripe mask revealing only the current frame, where the ratio of stripe to black equals the number of frames.

Lenticular prints[2] work in the same way, but instead of a mask the lenses blow up each line to full width (much like an optical equivalent to line doubling video deinterlacing), trading resolution in one dimension for encoding multiple frames.

[1] http://en.wikipedia.org/wiki/Interlaced_video

[2] http://en.wikipedia.org/wiki/Lenticular_printing

This trick has an interesting artifact.

When I came back to HN, I noticed that my mind made my vision appear actively "wavy." In other words, I could see some slight movement of waves on the horizontally drawn elements currently displayed -- the top orange bar that says [Y]Hacker News [...] had the appearance of fluctuating with low frequency waves.

Interesting, indeed. I didn't get that, but it is probably similar to the effect caused by videos like this: https://www.youtube.com/watch?v=tVgOLWVYytM

I got this too!

I've seen this technique used with transparencies on an overhead projector before. Things get interesting when the fields aren't aligned exactly.

https://www.youtube.com/watch?v=LCIsIfEOEI8

The background images are pretty interesting:

* http://www.scrollslowhavefun.com/images/001.jpg

* http://www.scrollslowhavefun.com/images/002.jpg

* http://www.scrollslowhavefun.com/images/003.jpg

* http://www.scrollslowhavefun.com/images/004.jpg

* http://www.scrollslowhavefun.com/images/005.jpg

* http://www.scrollslowhavefun.com/images/006.jpg

What's the top image? I thought it was a spinning skull at first but that can't be right.

That's what I thought. That was the only one that didn't look very good.

That's what it looks like to me, 4 skulls fused together, spinning as one entity. Very cool.

Scanimation has a series of books which use this technique:

http://scanimationbooks.com/

Here's one implementation that is a bit more transparent on what's happening; plus it's sideways. http://codepen.io/bfred-it/details/BFDkI

another one https://bitbucket.org/lucio.torre/scanimation/wiki/Home

I found it works better on my machine if I adjust .bars height to be 15.5px with a margin-bottom of 1px.

I had to do this also. Looked pretty bad before I did so. 13" macbook pro FWIW.

Trying this with different browsers on Windows highlights how bad the pan acceleration curves are in Firefox and Chrome. In Chrome there are exactly 2 speeds where this works usefully, and they're a pixel apart. In Firefox there's a small handful of them, and you have to be fairly careful with your mouse.

In Opera 12 on the other hand there's a range of about one inch of mouse movement on the screen, where you get, pixel-for-pixel, different speeds for this thing, all of them useful.

Nifty. This effect reminds me of the old-school color cycling animations that 8bit games from the 90s used to have.

Someone actually made a canvas viewer to show off how it works: http://www.effectgames.com/effect/article.psp.html/joe/Old_S...

Ah, palette shifting, that takes me back... but man, Mark J. Ferrari, truly a master in the 8-bit field. Really took palette shifting to another level. And the site does a great job exposing what's going on under the covers. Great link!

I created a webapp for fun some time ago, is somewhat minimal but explores how to do this effect easily from a bunch of images or shots from the webcam (applying cool filters!), the js sources are not compressed so you can read what is going on http://animotion.licheni.net/

Wow. This is definitely something that you should never look at if you suffer from epilepsy.

Agreed. I wish people gave a little more warning prior to showing pages with rapid changes in luminescence. You're talking about a really rare type of epilepsy - but frankly, it's so easy to add a non-triggering splash screen that everyone building something like this should do it. There's no excuse for giving even one of your users brain damage.

This is great. Reminds me of a certain kind of chain email that I would commonly receive from friends in the late 90s, although I imagine that they likely existed before that time as well.

You would get these emails that were thousands of lines long with ASCII characters all over the place. When you'd scroll, though, an animation would take form and you'd watch stuff bounce left and right across the screen and other effects similar to, but more primitive than, the effects demonstrated by this submission.

Not loading for me. Server down?

This reminded me of a toy I had as a kid: the Tomy Tutor Play Computer. The screen was a lenticular lens over a paper scroll, and pressing the space bar caused the lens to move vertically.

Here is a video made by someone selling one: https://www.youtube.com/watch?v=TAghB2-Ks5I

I bet many of the people here can guess the fate of it and many of my other toys.

poemotion by Takahiro Kurashima has many amazing examples of this type of art. A very good gift for anyone that appreciates mathy art :)

You can order it here http://www.amazon.com/Poemotion-2-Takahiro-Kurashima/dp/3037...

Yes! I just got this for Christmas. Granted, I showed it to the person who gifted it :) I still loved receiving it and have spent a lot of time with it.

These images seem different than traditional lenticular images from books. Here is pacman without the bars: http://www.scrollslowhavefun.com/images/002.jpg

Is there an application, in any way, of this in graphics animation or any field?

I have no idea what is going on but sure had fun scrolling slow. Well worth my time. Props to the founders for launching. It is a hard field to compete in but I am sure they will find their revenue model.

My vision felt "wavy" for a bit after viewing this. Pretty cool.

I got quite intense distorted vision after perusing this for a while. Trippy!

Is the content generated auto with some algorithn or is it manual work?

Parratoro is an artist focused on this type of work. His designs are pretty amazing. http://www.parratoro.com

I couldn't scroll slow enough! So I...

t=300;s=1;y=t;d=s;i=setInterval(function(){window.scrollTo(0,y);y+=d;if(y>6200) d=-s;if(y<t) d=s},33);

NOW its fun. ;)

my child has a book in this format

http://scanimationbooks.com/

really cool, animals move etc.

It's cool. I did something similar on my home page. http://catzo.com

Scroll Slow. Have Fun. Get a new pair of eyes.

I felt like I was going to have an ocular migraine after looking at that for a few seconds.

Why do I have to look at it sideways? Couldn't this be done horizontally?

That seriously hurts my eyes

…then secondary click, .bars { display:none; } kill all the fun!

Pacman eating dots began playing in my head..

People with a pointing stick, good luck!

Reminds me of a lyric from an old rap song. "Drive slow, homie". Ready and eager for downvotes on this unproductive comment :p

When I got to the bottom my monitor started melting down and up and I looked around the room to see if space time had truly been bent...

Oh cool, an internet zoetrope.

This is funny. Great work!

wow that hurts my eyes

Hooray, Moiré! :)

I used to have a book that did that..

Awesome work!! It ended too soon ;)

yeah, just too short.

awesomly sick!

Also, squint.

my eyes, they are burning

Loads Slow. No Fun.

I wish this was behind cloudfront or maxcdn... curious if the images can be compressed better maybe too...

Reply on news.ycombinator.com