8 ms·

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

290 points by cleverjake 15y ago

hartror 15y 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 15y 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.
- LVB 15y 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 15y ago
    It doesn't seem like it'd be that hard to add a "render" button.
    - LVB 15y ago
      Or to click on the flower at the top of the blog post.
  - nazar 15y 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
    - tonyedgecombe 15y ago
      Presumbably because it is running in a single thread and s0 only using 25% of your 4 cores.
dpakrk 15y ago
awesome piece of hacking! great job
nhebb 15y 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.
- est 15y 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 15y 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.
    - est 15y ago
      It's no help that JS is faster than AS for now, AS used to be much faster than contemporary JS, but how about display ads with dozens of Flash embedded? Fast is only relative. Think about dozens of canvas animation ads embedded with Javascript. It will be as shitty as Flash. I'll switch to the first browser that allows me to selectively disable all HTML5 crap.
- brisance 15y ago
  The point of using monte carlo is to fit it under 1K of Javascript in exchange for CPU time.
- GuiA 15y 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 :)
zobzu 15y 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/ http://www.256bytes.net/
- teaspoon 15y 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_barrere 15y 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.
    - dalke 15y ago
      There's DosBox for the iPhone now?
      - thibaut_barrere 15y ago
        If you're not living in Apple's wallen garden, it seems so: http://litchie.com/blog/?page_id=123 http://litchie.com/blog/?page_id=123
    - daleharvey 15y ago
      now we just need to write google search, google maps, facebook, twitter etc for dosbox, some type of linking mechanism, have it installed on all computer by default and we are sorted!
lnanek 15y 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.
visegrip 15y ago
I'm giving a dozen of 3d flower to my sweetheart on Vday.
dotpot 15y ago
http://news.ycombinator.com/item?id=3554814 http://news.ycombinator.com/item?id=3554814
rplnt 15y 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-tree/ http://www.romancortes.com/blog/how-i-did-the-1kb-christmas-...
willyt 15y ago
Meta comment: This is a perfect hacker news submission. I started reading hacker news because of articles like this.
- mattmanser 15y 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.
  - kragen 15y 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 15y 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.
RvbNews 15y 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.
kragen 15y 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 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.

290 points by cleverjake 15y 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 15y 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.
LVB 15y 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 15y ago
  It doesn't seem like it'd be that hard to add a "render" button.
  - LVB 15y ago
    Or to click on the flower at the top of the blog post.
- nazar 15y 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
  - tonyedgecombe 15y ago
    Presumbably because it is running in a single thread and s0 only using 25% of your 4 cores.

dpakrk 15y ago

awesome piece of hacking! great job

nhebb 15y 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.

est 15y 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 15y 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.
  - est 15y ago
    It's no help that JS is faster than AS for now, AS used to be much faster than contemporary JS, but how about display ads with dozens of Flash embedded? Fast is only relative. Think about dozens of canvas animation ads embedded with Javascript. It will be as shitty as Flash. I'll switch to the first browser that allows me to selectively disable all HTML5 crap.
brisance 15y ago
The point of using monte carlo is to fit it under 1K of Javascript in exchange for CPU time.
GuiA 15y 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 :)

zobzu 15y 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/ http://www.256bytes.net/

teaspoon 15y 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_barrere 15y 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.
  - dalke 15y ago
    There's DosBox for the iPhone now?
    - thibaut_barrere 15y ago
      If you're not living in Apple's wallen garden, it seems so: http://litchie.com/blog/?page_id=123 http://litchie.com/blog/?page_id=123
  - daleharvey 15y ago
    now we just need to write google search, google maps, facebook, twitter etc for dosbox, some type of linking mechanism, have it installed on all computer by default and we are sorted!

lnanek 15y 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.

visegrip 15y ago

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

dotpot 15y ago

http://news.ycombinator.com/item?id=3554814 http://news.ycombinator.com/item?id=3554814

rplnt 15y 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-tree/ http://www.romancortes.com/blog/how-i-did-the-1kb-christmas-...

willyt 15y ago

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

mattmanser 15y 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.
- kragen 15y 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 15y 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.

RvbNews 15y 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.

kragen 15y 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 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.