
Scroll Slow. Have Fun - drinchev
http://www.scrollslowhavefun.com/
======
Aardwolf
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.

~~~
drivers99
"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...](http://www.edn.com/design/components-and-
packaging/4364020/Reduce-acoustic-noise-from-capacitors)

~~~
trishume
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](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.

~~~
virtualswede
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!

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

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

[http://www.amazon.de/Ulff-Backenh%C3%B6rnchen-eine-irre-
Verf...](http://www.amazon.de/Ulff-Backenh%C3%B6rnchen-eine-irre-
Verfolgungsjagd/dp/3944572076/)

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.

~~~
acomjean
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...](http://www.amazon.com/The-Magic-Moving-Picture-
Book/dp/0486232247)

Hope you get yours working well.

~~~
wmeredith
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!

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

~~~
jholman
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?

~~~
edwintorok
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!

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

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

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

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

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

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

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

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

------
tholman
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](http://en.wikipedia.org/wiki/Moir%C3%A9_pattern)

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

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

~~~
knutae
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](https://www.youtube.com/watch?v=tVgOLWVYytM)

------
theandrewbailey
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](https://www.youtube.com/watch?v=LCIsIfEOEI8)

------
cgcardona
The background images are pretty interesting:

* [http://www.scrollslowhavefun.com/images/001.jpg](http://www.scrollslowhavefun.com/images/001.jpg)

* [http://www.scrollslowhavefun.com/images/002.jpg](http://www.scrollslowhavefun.com/images/002.jpg)

* [http://www.scrollslowhavefun.com/images/003.jpg](http://www.scrollslowhavefun.com/images/003.jpg)

* [http://www.scrollslowhavefun.com/images/004.jpg](http://www.scrollslowhavefun.com/images/004.jpg)

* [http://www.scrollslowhavefun.com/images/005.jpg](http://www.scrollslowhavefun.com/images/005.jpg)

* [http://www.scrollslowhavefun.com/images/006.jpg](http://www.scrollslowhavefun.com/images/006.jpg)

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

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

------
jweir
Scanimation has a series of books which use this technique:

[http://scanimationbooks.com/](http://scanimationbooks.com/)

~~~
mxfh
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](http://codepen.io/bfred-it/details/BFDkI)

another one
[https://bitbucket.org/lucio.torre/scanimation/wiki/Home](https://bitbucket.org/lucio.torre/scanimation/wiki/Home)

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

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

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

------
dragonshed
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...](http://www.effectgames.com/effect/article.psp.html/joe/Old_School_Color_Cycling_with_HTML5)

~~~
pimlottc
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!

------
drccrd
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/](http://animotion.licheni.net/)

------
aruggirello
Wow. This is definitely something that you should _never look at_ if you
suffer from epilepsy.

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

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

------
greenvaio
Not loading for me. Server down?

------
b409ba0801cd21
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](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.

------
bjoveski
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...](http://www.amazon.com/Poemotion-2-Takahiro-
Kurashima/dp/3037783516)

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

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

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

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

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

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

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

------
hownottowrite
Parratoro is an artist focused on this type of work. His designs are pretty
amazing. [http://www.parratoro.com](http://www.parratoro.com)

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

------
skynetv2
my child has a book in this format

[http://scanimationbooks.com/](http://scanimationbooks.com/)

really cool, animals move etc.

------
aaronrenoir
It's cool. I did something similar on my home page.
[http://catzo.com](http://catzo.com)

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

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

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

------
jondiggsit
That seriously hurts my eyes

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

------
gima
Pacman eating dots began playing in my head..

------
mcms
People with a pointing stick, good luck!

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

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

------
slinkyavenger
Oh cool, an internet zoetrope.

------
canda
This is funny. Great work!

------
vinayp10
wow that hurts my eyes

------
dblotsky
Hooray, Moiré! :)

------
MajorSkrub
I used to have a book that did that..

------
m52go
Awesome work!! It ended too soon ;)

~~~
tuhaihe
yeah, just too short.

------
vander_elst
awesomly sick!

------
armandososa
Also, squint.

------
chtoric
my eyes, they are burning

------
kylec
Loads Slow. No Fun.

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

