147 comments

[ 3.9 ms ] story [ 264 ms ] thread
This is funny. Great work!
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.
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.
Same here on a MBP.
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 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?

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.
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.

This is way more fascinating than the site itself...
Damn you for making me look like a fool with my ear up against the screen.

(No sound here)

May be your age. Higher pitched frequencies are often heard by you youngsters but not us old folk.
Mine too. What is this sorcery?
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 sound here - only on my external monitor though, not on my MBP's own screen.
"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...

Zooming in and out does produce different audible frequencies on my screen.
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.
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.
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.
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.
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.

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.

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 enjoyed that. no noise on my chromebook will try on big monitor in the morning.
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.

Awesome! I can hear it perfectly on one monitor at home, but not the other.
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 :(
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.
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.
This is amazing. Yes, add a song or I will.
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.
Please make a Show HN post. Also prepare for a lot of hits from the random internet. This is amazing.
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?)

That's so cool! I can hear it on my Nexus 5 if I put it right up to my ear!
Does this work for for anybody on MBP or Retina displays? I tried mouse-wheel, trackpad and scroll bar, can't hear anything. anybody?
Can confirm same high pitched sound on 27 iMac.

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

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.

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...)

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

Weird.

(comment deleted)
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.
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.

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
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

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.

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)
That didn't work in Firefox for me but this one does:

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

> 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.
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.
in IE/Firefox you can click the middle mouse button to get smooth constant scrolling. Chrome probably does this as well
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.
Loads Slow. No Fun.
I wish this was behind cloudfront or maxcdn... curious if the images can be compressed better maybe too...
Not loading for me. Server down?
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.
(comment deleted)
Awesome work!! It ended too soon ;)
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.
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.
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.

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.

Pacman eating dots began playing in my head..
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!
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 ;-)

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/

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/
my eyes, they are burning
I felt like I was going to have an ocular migraine after looking at that for a few seconds.
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.