dragon punch by Ribbon [web]
screenshot added by p01 on 2014-02-26 23:42:51
platform :
type :
release date : february 2014
  • 12
  • 6
  • 0
popularity : 56%
  • 0.67
alltime top: #9066
added on the 2014-02-26 23:42:51 by p01 p01

popularity helper

increase the popularity of this prod by spreading this URL:

or via: facebook twitter pinterest tumblr


Does not move here in a recent FF in Ubuntu 13.10 x64. Am I missing something?
added on the 2014-02-27 00:47:25 by raer raer
Just static fractal?
added on the 2014-02-27 01:14:26 by dex46... dex46...
Rather "Dragon sleep".

or Chrome..?.
added on the 2014-02-27 09:20:56 by sim sim
Well, it's static (I guess procedural gfx is the 'demo type' but maybe it can only be 128b or proc gfx and not both?). Still, 128b including the webpage, so thumb up :)

Btw, I tried this on both safari and chrome (seeing if it was animated on chrome :) and I see the output is subtly different. It has smoother shading (but still with the dithered look) on safari - it's like chrome renders it with 4 shades of grey instead of 256.
rulez added on the 2014-02-27 10:09:51 by psonice psonice
That's not really a lot of bytes :)
rulez added on the 2014-02-27 10:23:54 by Preacher Preacher
Sorry to disapoint :\

Despite my previous efforts I have not managed to animate any fractal in 128bytes of HTML+JS. I have serious doubt it is even possible. I was only able to animate more basic patterns at such small size.

The different number of shades depend on the subpixel accuracy of the different Canvas implementations/backends.
added on the 2014-02-27 10:39:07 by p01 p01
Thank you for your effort and additional information.
Ha! As you know, we got used to be.. AMAAAAZED by tiny, and still outstanding effect(s). In addition taking in consideration the prod's title ("Dragon Punch") which itself is already dynamic you somkida doubled the expectations. But well - as I said - these are only our expectations.

If all is matching - that's great. If not... well, that's like that....

added on the 2014-02-27 11:09:27 by sim sim
Cool stuff for sure !

Despite my previous efforts I have not managed to animate any fractal in 128bytes of HTML+JS. I have serious doubt it is even possible.

Maybe not a classic fractal but I know someone recently implemented Pickover's continued root fractal in a 64-byte intro and knowing your javascript skills it might be within your reach.

BB Image
rulez added on the 2014-02-27 14:22:21 by Baudsurfer Baudsurfer
total awesomeness! the source code is even more beautiful! <3
rulez added on the 2014-02-27 15:36:00 by rez rez
thumb up of course :)
rulez added on the 2014-02-27 15:50:56 by sensenstahl sensenstahl
not bad
Code:<body onload=with(c.getContext('2d'))for(m=5;m<1e5;rotate(++m&-m&m/2?11:-11))fillRect(0,0,1,1),translate(1,0)><canvas id=c>
added on the 2014-02-27 17:03:51 by CrzyClst CrzyClst
Better looking than the old textmode mandelbrots, but I'd rather seem a morph or zoom in 256b.
added on the 2014-02-27 17:34:52 by phoenix phoenix
rulez added on the 2014-02-27 22:21:26 by Pirx Pirx
Despite my previous efforts I have not managed to animate any fractal in 128bytes of HTML+JS. I have serious doubt it is even possible.

After seeing the tightness of the P01's code posted by CrzyClst I have to agree.

I managed to save two bytes by walking the Dragon curve backwards. So it's down 121 bytes and the code looks cooler IMO with the --m&-m&m

Code:<body onload=with(c.getContext('2d'))for(m=8e4;m;rotate(--m&-m&m/2?11:-11))fillRect(0,0,1,1),translate(1,0)><canvas id=c>

Of course I also tried the "classic" approach of using a LUT of the X and Y offsets for the 4 different turns. Unfortunately juggling with two coordinate positions took a couple more bytes than the fillRect(foo);rotate(bar);translate(baz) approach. Also it was razor sharp and didn't have the "nice" shades of grey.
added on the 2014-03-02 22:16:25 by p01 p01
... are you a wizard? ;)
rulez added on the 2014-05-16 15:22:38 by HellMood HellMood
Great as usual!
rulez added on the 2015-07-29 23:59:12 by stijn stijn
can be done in 104 bytes ;)
added on the 2015-09-17 19:58:29 by HellMood HellMood
Who's the wizard now ?

With your experience rendering itsy bitsy IFS, I suppose you juggle with the coodinates instead of taking a "LOGO" approach.
added on the 2015-09-17 21:57:09 by p01 p01
Yes, pretty much what i described >here< ... plus text rendering ;)

BB Image

Code:<body onload="for(x=y=i=4e4;i--;)c.getContext('2d').fillText('x´,x=x-y>>1,y-=236*(y&1)-x)"><canvas id=c>

Pouet scrambles the source, so get it >here<

Your version still looks prettier ;)
added on the 2015-09-18 10:29:39 by HellMood HellMood
It looks a bit nicer with a "*" than with the "x", and of course you can replace the "x" by a number to save 2 bytes but it looks so so.
added on the 2015-09-18 11:37:37 by p01 p01
GFA punch memories!
rulez added on the 2015-09-18 11:43:24 by baah baah
With the free space (towards 128b) it's at least possible to either introduce colors (somewhat), or increase size. Still nothing groundbreaking. Maybe animation is possible after all? I'm not sure.

BB Image

BB Image
added on the 2015-09-18 13:03:01 by HellMood HellMood
rulez added on the 2016-02-22 00:08:20 by T$ T$
Nice fractals
rulez added on the 2017-10-05 01:30:43 by Volantis Volantis
'x' -> 7

come on, that's cheap ;)
('2d') -> '2d'

wat. i didn't know this is possible :O

the smallest dragon on msdos/x86 is now 16 bytes
( from leafpack )
Code:adc al,0x10 sbb dx,cx sar dx,0x01 adc dh,bl add cx,dx int 0x10 mov ah,0x0C jmp short S

so maybe it can be still smaller than 100 on the js side?
added on the 2017-10-05 11:21:56 by HellMood HellMood
I don't feel good about the 7 instead of 'x', but templates literals ( the back ticks ) are super nice.

Pretty sure we can go under 100b
added on the 2017-10-07 00:08:31 by p01 p01
the improved bit shenanigans of the 16 byte msdos dragon
are not easy translated into shorter JS, also the beauty of
the original is still unmatched with this approach, but :

98 bytes
Code:<body onload="for(x=y=1;y<157;)c.getContext`2d`.fillText(7,x=x-y>>1,y-=236*(y&1)-x)"><canvas id=c>

maybe the coordinate juggling can somehow work as
loop break condition, but i didn't figure this out until
now. could lead to 95 or 96 bytes (?)
added on the 2017-10-07 18:03:54 by HellMood HellMood
Fiddling around I got 86 bytes but it's impractically slow as it appends ~33K SVG elements one after the other in a single loop :p

Code:<svg onload="for(u=v=1;v<157;)innerHTML+=`<text x=${u=u-v>>1} y=${v-=236*(v&1)-u}>.`">
added on the 2017-10-08 13:29:13 by p01 p01
awesome :) but yes, awfully slow

with another parameter set, it's "only" ~8K elements
well, and it's 85 bytes ;) still takes too long ...

Code:<svg onload="for(u=v=6;v<77;)innerHTML+=`<text x=${u=u-v>>1} y=${v-=116*(v&1)-u}>x`">
added on the 2017-10-08 14:44:01 by HellMood HellMood

submit changes

if this prod is a fake, some info is false or the download link is broken,

do not post about it in the comments, it will get lost.

instead, click here !

[previous edits]

add a comment