Txtbirds

http://www.jsvine.com/txtbirds/

by jsvine • 14 years ago

84 46 14 years ago

jsvine.com

vignesh_vs_in• 14 years ago

Works only on chrome, Firefox(15 on XP) just shows a blank screen.

Edit: Apparently it doesn't work on FF 15. It worked on FF16 XP. and it also works on Safari

mcherm• 14 years ago

Works fine for me on Firefox 16.0.2 (Win).

PostOnce• 14 years ago

Didn't work in 15.0.1(Win7), updated, works in 16.0.2

antidoh• 14 years ago

Me too, 16.02 on Ubuntu.

willyt• 14 years ago

Safari 6.0.2 is fine

freejack• 14 years ago

latest safari is peachy too.

sabret00the• 14 years ago

Works for me in Firefox (Nightly) 19

ygra• 14 years ago

Works fine in IE 10 too.

Gigablah• 14 years ago

I was expecting the page title to animate as well :)

pfortuny• 14 years ago

I thought it was an angry birds for the command-line. Even though it is beautiful, I feel a bit disappointed... :)

xvolter4• 14 years ago

Aw, now that I've read this you got my hopes up.

bootz15• 14 years ago

not impressed. doesn't even work in opera :(

forrestkyle• 14 years ago

Yeah, I'm not very impressed with Opera either. ;)

plorkyeran• 14 years ago

Works fine for me in Opera.

chao-3• 14 years ago

Getting all sorts of text artifacts remaining smeared across my browser. Not this site's fault, and is something I've experienced before. It does make me wonder where the blame lies, though: Linux, Firefox or my graphics card?

xvolter4• 14 years ago

The most likely would be Firefox. As Linux has nothing to do with graphics, so I assume you mean your X Server - like Gnome or XFCE or KDE - none of which have much affect into major browsers, which are designed to render themselves entirely separate from the system's window manager to be multi-platform. It's also not likely to be your graphics card, otherwise it would happen outside of your browser too. It could be the browser attempting to "accelerate" web pages by using your GPU - in which case you can find out by disabling GPU Accelerated Rendering - both Firefox and Chrome have settings for this.

brazzy• 14 years ago

I believe your last guess is correct, in which case the fault is with the graphics card drivers.

chao-3• 14 years ago

Sorry, I should have specified better. By "Linux" I meant the overall mix of Xorg and whatever display or GUI toolkits are in use, and instead of "graphics card", I should have said "graphics card drivers". If the card itself were having issues, I'm sure more than Firefox would have problems. Alternatively, I always hear about how "Linux has bad font rendering!" but since I'm not much of a font guy, I'm not sure if they're referring to how the fonts look, or some deeper part of the process which displays the fonts.

I recently had to switch to the radeon (open source) drivers instead of fglrx (AMD's proprietary) drivers due to some incompatibility with a kernel upgrade. It makes sense that the problem would exist somewhere between Firefox and its use of those drivers.

Erwin2• 14 years ago

I'm seeing trails on Chrome 23. They go away if I switch tabs and return. So it's not specific to Firefox at least.

chao-3• 14 years ago

I'm curious what OS and graphics drivers you are using. I've gotten a similar effect once in a blue moon while simply scrolling.

lmm• 14 years ago

My priors would be: if it's an ATI card it's their fault, otherwise probably firefox.

antirez• 14 years ago

small little piece of art, great.

sequoia2• 14 years ago

Is there a blog post about this? I get most of it but a couple things, namely how the css transitions interact with the property updates in in the veer & fly functions and how opacity is governed. Good show, nice example of a tidy little JS object!

jsvine4• 14 years ago

Hey, thanks! I haven't written anything about txtbirds yet, but might soon. In the meantime, a brief explanation about those transitions and property updates:

- With the exception of the `margin` transition, all the transitions are set to 10 seconds — roughly each bird's lifespan.

- The `left` and `top` transitions move the bird toward the center from a randomly-assigned position on the screen.

- The `font-size` and `color` transitions create the impression that the bird is receding into the distance, getting smaller and more lightly-colored.

- The `margin` transition governs the veering. Every half-second, the bird is given new, randomish left- and top-margins. The transition (set to slightly less than a second in duration, after some trial-and-error) smooths that shift.

sequoia2• 14 years ago

haha the text is faded to BG color, not alpha 0%... not sure why this possibility didn't occur to me. Thanks!

nickthemagicman• 14 years ago

Any way to get this as a screensaver?

K2h• 14 years ago

On windows, I imagine you could set screensaver to call firefox directly to load the web page - and set firefox to default to full screen mode.

http://kb.mozillazine.org/Command_line_arguments

jonalexr• 14 years ago

If you're on a Mac check out https://github.com/liquidx/webviewscreensaver - Works well but you might not always have an internet connection so I just saved the HTML/CSS/JS into a folder and linked directly to that (and it works!)

shiftins• 14 years ago

pass gyre into your constructor, and reference the local variable. kudos, i love scripts for the sake of scripts.

jsvine4• 14 years ago

Good idea. Done: https://github.com/jsvine/txtbirds/commit/207480cae2823dd57a...

polyfractal• 14 years ago

I was really hoping that clicking the birds would shoot them down ala duckhunt.

Fun little demonstration :)

swohns• 14 years ago

I tried the duckhunt click too, could be a nice mod into a HTML5 game!

jQueryIsAwesome• 14 years ago

Here you go... shoot them all!

http://jsfiddle.net/vNuns/3/embedded/result/ (the code added is the peace at the end)

ilanco• 14 years ago

Any reason you close your <html> tag with a </div> ?

jsvine4• 14 years ago

Nope, just an oversight. Thanks for flagging. Fixed: https://github.com/jsvine/txtbirds/commit/b1fbf84560c1b2ad30...

nicklovescode• 14 years ago

Not a critique of this in particular, but does JS styling inconsistency not drive everyone else mental? I'm not a big fan of camelCase, but when I see veer_coefficient_horizontal next to setTimeout, I get itchy.

jofo25• 14 years ago

I liked this little trick for going over and over an array:

this.flaps = [ '------', '/â€¾\\/â€¾\\', 'â€¾â€¾\\/â€¾â€¾' ]; ... this.el.innerHTML = this.flaps[this.flap_i++ % this.flaps.length];

jgv• 14 years ago

What about txtpeople tho? http://asdf.us/vortex/

jsvine4• 14 years ago

This made my day.

xvolter4• 14 years ago

Awesome!

gosub• 14 years ago

The effect of infinite audio tone descent is a Shepard tone http://en.wikipedia.org/wiki/Shepard_tone

DanBC• 14 years ago

I like this.

What next, 3d ascii boids, with text size to show near or farness?

programminggeek• 14 years ago

I instantly tried to play duck hunt with this. It's broken.

jentulman• 14 years ago

A flock of CSSGulls?

Txtbirds

Related Stories