1k Rose - How a 3D Rose was made in under 1K of javascript

http://www.romancortes.com/blog/1k-rose/

by cleverjake • 14 years ago

290 38 14 years ago

hartror• 14 years ago

This a great piece of code but the author does one thing that has gets my goat.

A lot of these cutting edge HTML5/WebGL demos are put on a separate page from the thing explaining it. One of the reasons we have this technology is so we can put this stuff right there on the the page, seamlessly available to the user.

Sometimes it makes sense for performance or aesthetic reasons to have it separate, but certainly in many cases including this one it doesn't.

Keep a separate demo page sure, so people can link directly to your demo. But have it right there in your blog post as well, personally I think it adds to the wow factor!

groaner• 14 years ago

I'd guess that whatever blogging software that was used here (WordPress?) doesn't make it easy to insert arbitrary JavaScript. Too easy to create a security loophole, especially on a third-party hosted blog site.

LVB2• 14 years ago

The demo is very CPU intensive to the point that the fan on my MBP comes on shortly after starting it. If I'd stumbled onto it with my wife's BlackBerry it probably would have caught on fire. I think he chose correctly in leaving the script off of the blog page.

kalleboo• 14 years ago

It doesn't seem like it'd be that hard to add a "render" button.

nazar• 14 years ago

my core i5 CPU performance on Sony VAIO doesn't go up much (around 26%). But I don't have problems with demo being seperated as long as it is available and easily accessible

dpakrk• 14 years ago

awesome piece of hacking! great job

nhebb• 14 years ago

1k is impressive as a coding feat, but I'm not sure of the practical application of this - i.e., I'm less impressed with 1k of code when my CPU meter gets into the red zone - and stays there.

My tinfoil-hat conspiracy theory is that the Canvas element was spec'ed into HTML5 by CPU fan manufacturers.

est2• 14 years ago

Same rant as Steve Jobs claimed why Flash should die years ago.

I got lot of downvots on HN previously by saying HTML5 was the exact same shit as Flash, what's better is that there is no way to block canvas animation ads yet.

k33n• 14 years ago

The only reason this demo uses a lot of CPU is because it uses a lot of tricks to stay under 1K. Any JS guy could get the same result with far less CPU usage. Also, HTML5 has nothing to do with CPU usage. JavaScript performance (which is quite a bit better than Flash, even with SVG and/or Canvas manipulations) is the thing that actually uses CPU.

brisance• 14 years ago

The point of using monte carlo is to fit it under 1K of Javascript in exchange for CPU time.

GuiA• 14 years ago

>but I'm not sure of the practical application of this - i.e., I'm less impressed with 1k of code when my CPU meter gets into the red zone - and stays there.

There was a time when algorithms for decoding an audio file put your CPU in the red, yet we found many applications for them :)

kragen3• 14 years ago

It's very educational to see things simplified to their most basic essence, and code golf is one game we can play that forces us to do that.

zobzu• 14 years ago

This is scary. js1K is what 256bytes was in "my" days. Thats right, 256 bytes of asm to get a nice demo.

And guess what. The 256 bytes demos are nicer and more complete than the js1k! They've sound, better 3d effects, etc.. plus they actually run those nicer demos on much, much older hardware without lagging (js demos use quite a bit of cpu even on modern hardware)

Four times as much space, not nearly as good. Show how much went into "language abstraction". Scary!

Reference: http://www.256bytes.net/

teaspoon• 14 years ago

None of these demo binaries will actually run on my OS, so maybe the extra 768 bytes are a fair tradeoff for abstracting away the platform.

thibaut_barrere5• 14 years ago

These binaries will run on your OS if you install the corresponding runtime (DosBox or similar actually).

Interestingly this runtime happens to be way smaller (2MB) than Firefox, Chrome or even Safari.

magicalist2• 14 years ago

This is a nonsensical comparison. Considering that the language chosen requires fairly verbose code (everything from a minimum 14 bytes for a function declaration to longwinded API names, eg "fillStyle" that takes a string with another 7 bytes of decoration[1]), this is exactly what you'd expect. The challenges presented by the particular language and execution environment are a large part of the entire point of these exercises, they aren't a failing.

So, good work, you've declared all such competitions with languages less terse than assembly "scary" and no doubt a harbinger of some slippery slope. I hope there aren't any competitions with ISAs smaller than x86, or your world really might fall apart.

[1] 'rgb(,,)'. converting to hex might be a good size optimization there, actually, but it would still need a '#' and be a formatted string.

thibaut_barrere5• 14 years ago

I don't find the comparison nonsensical (and I do ruby/coffeescript all day :-) - we have at least to take into consideration that the abstraction here came with an amazing cost nonetheless.

Skalman• 14 years ago

I'm sure the assembly code is shorter than the JavaScript code, right? Cause it makes no sense comparing the compiled/minified versions...

lunarscape• 14 years ago

Pouet [1] also has some has a great archive of demos.

[1] http://www.pouet.net/

rplnt• 14 years ago

I remember this site because of another 1k js competition, result of which was a Christmas Tree -- http://www.romancortes.com/blog/how-i-did-the-1kb-christmas-...

willyt• 14 years ago

Meta comment: This is a perfect hacker news submission. I started reading hacker news because of articles like this.

mattmanser• 14 years ago

Meta comment: For you maybe. I found it rather boring and skimmed it after the first para. It's about javascript to begin with ;) And looks a bit poo.

I prefer startup news and programming advances. That's not really programming news, it's just a rather dull writeup about how someone made a picture of a rose, something I have no desire to do.

And we've been able to do it for decades. Apart from some reason now HTML5 has a canvas a lot of people seem to have the need to reinvent the wheel.

My point, we're all different, there's no such thing as perfect. These kind of articles are fun once in a while but HN would be fairly useless if that kind of article was all that dominated it.

kragen3• 14 years ago

Sounds like you're unclear on the concept of "hacker" and "hack". Remember, if people never reinvented the wheel, we'd still be rolling our carts around on discs made of three pieces of wood.

kabdib• 14 years ago

Engineering is about constraints. Any damned fool can build a 10km suspension bridge given enough unobtanium and micraculum. That's cheating.

You can get quite interesting and very creative solutions when you apply artificial constraints.

This stuff happens in the real-world all the time, especially in consumer electronics. I've had to do video-rate unpacking of samples that were aligned on really nasty boundaries. Far cheaper (in this instance) to do it in software . . . so we got clever.

visegrip• 14 years ago

I'm giving a dozen of 3d flower to my sweetheart on Vday.

RvbNews• 14 years ago

Now I know why I should have taken math in school :) This is very impressive. This is sooo far removed from my daily job as "business application" developer, which makes it the more interesting. Thanks for posting.

lnanek• 14 years ago

Beautiful. Lots of interesting techniques detailed too that could be useful. I'm a big complainer, but even I'm having trouble complaining about it not being practical. Nice.

kragen3• 14 years ago

That's pretty nice. I wonder if you could squeeze my <canvas> font rendering engine under 1K? The base64-encoded PNG font is 635 bytes, but you could probably use the 4×6 font by Janne Kujala to cut that down to ≈512 bytes.

http://canonical.org/~kragen/sw/dofonts.html

Edit: yes; a 1023-byte version, specialized for the 4×6 font, is now linked to from that page. The 1023 bytes includes the entire HTML file, including both the font and the code to render it.

1k Rose - How a 3D Rose was made in under 1K of javascript

Related Stories