dragon punch by ribbon [web]
screenshot added by p01 on 2014-02-26 23:42:51
platform :
type :
release date : february 2014
  • rulez 11
  • is ok 6
  • sucks 0
popularity : 0%
  • rulez 0.65
alltime top: #8762
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 google+ 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?1 1:-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$

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