Very clever story telling using HTML and Javascript... | Hacker News Reader

Very clever story telling using HTML and Javascript...

hobolobo.net

341 pointsdclaysmith28 comments

Well, this is awkward. (Check u/n) I am unable to claim responsibility for this :)

I am working on something similar to this, though I've implemented a renderer like that of a game, with all visible elements being rendered at 30 fps, foregoing DOM manipulation for writing HTML text directly to innerHTML[1], and culling non-visible elements. This avoids the slight jerkiness that exists when scrolling on the linked page.

[1] http://www.youtube.com/watch?v=_RRnyChxijA&t=22m56s

Another reason for the flicker is that Hobo Lobo doesn't calculate a realtime scroll, it has a repeating 50ms timeout that listens to see if horizontal scroll has happened, and then recalculates all the positioning. I guess I could set it up to fire more often, but I felt 50ms was a good tradeoff of performance vs quality.

For each page, you must use the horizontal scrollbar to see see the animation and the rest of the images.

Totally didn't get this until I started poking around. Assumed the next page links up the top would take me forward, not scrolling right.

I wonder if it matters whether people are using their trackpad. I was using mine and immediately figured it out; maybe it's because scrolling horizontally is trivial with a trackpad?

I just wanted to confirm the same. Didn't even give it pause on my MBP.

ditto

But I will say that on my old HP G60 laptop, I wouldn't have had the same ability (it only had the up/down scroll via the touchpad), and I think alot of other laptops are similar. The scroll experience on my MBA is perfectly smooth.

The last time I saw this, I used the numbers. This time, on a different browser, I automatically went to the left and right arrows on my keyboard. I'd wager it isn't so much about the trackpad, but the programs you've been using lately.

You can also use the numbered circles at the top to advance to each section of the image. This can also provide a less jerky scrolling than doing it manually.

Looks really cool. This would be an amazing tablet app for children. +1 if there's a voice over option. Although it seems a LOT of work to put together.

If you read the story further, you will see it is not really the children version of the tale.

I'm referring to the technology/approach he used to present the story and not the actual story.

Wow. This is fantastic. Clever story, clever execution, clever little surprises in the illustrations. Can't wait to see what else this guy comes up with.

So, I've got a question... Whilst this is undeniably cool, can anyone actually anything beyond short children's literature being told this way?

As a more random note, what innovation have people seen/would people like to see in the literature space? How would you tell a novel online?

Discloser: am writing a novel, and reserve the right to totally take any ideas from this and incorporate them. If I do, you'll get a credit in the book.

Maybe comic books and graphic novels, like Watchmen? Just as people subscribe to RSS feeds for news, I don't see why in theory people wouldn't subscribe to a a novel that releases new chapters via some syndication method.

You may want to take a look at eliterature.org, for some ideas. I think there is something to be said that visual and interactive novels make up about 70% of game titles released in Japan.

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

An IF novel should do quite well as a mobile App. I've been taking a few stabs in the dark lately, adapting Kafka's "The Metamorphosis" into an IF piece, but haven't had much luck, really.

Interesting. I'll have a more thorough nose around that later. Cheers!

I honestly can't right now but that doesn't mean there isn't anything beyond stories. Someone mentioned comics--and I think that would be a good idea, but I think the comic industry is past that. Motion comics basically do the exact same thing but in a much more fluid/better way.

Here's an example of a Motion comic (from 2009 too) from Marvel: http://www.youtube.com/watch?v=PAUAC0RzMis

I dunno if I can agree with the "exact same […] but […] much more fluid/better". I think the motion comics came about because some comic exec though they needed to put their wares on Youtube or something like that, whereas I started with faux-3D/parallax as a neat way to show a lot of information in a limited space. My inspiration is pop-up books, theirs is movies/storyboards.

I don't think you can compare them qualitatively as directly as you've done is what I am saying. Their end product is a movie, mine is a website.

Fair enough, I can see what you're saying. I don't think there's a lot of difference here but as you said there is a difference and that's all that matters. At it's core it's the same, but it was probably a bad choice of words to say exact.

Also--Don't get me wrong, I really like what you've done, and really enjoyed the story.

Delta Thrives: set the controls for the heart of the sun, from 2002, of Patrick Farley's Electric Sheep Comix, was not children's literature and was not particularly short. The original site is, sad to say, long gone, but most of it is preserved at http://e-sheep.sansara.net.ua/www.e-sheep.com/delta/heartoft....

Does that count as "being told this way"?

If the context didn't give it away, the phrase "They tried all kinds of things to get them to fuck off" should have indicated that this isn't really directed at children - so the answer is "this literature".

You know what this'd be great for? Narrative puzzles. Imagine if Planetarium (http://www.beholder.co.uk/planetarium/) had had access to this technology.

Microsoft also made something similar to show off IE9's HTML5/CSS3 capabilities. I don't have a link handy, but it should be easy to find.

I really enjoyed the experience!

http://hobolobo.net/what-is-this-thing thinks I'm using Internet Explorer, when in reality I'm using Chrome 14.0.803.0 dev-m.

Reply on news.ycombinator.com