Return Styles: Pseud0ch, Terminal, Valhalla, NES, Geocities, Blue Moon. Entire thread

Barnsley's Fern

Name: Anonymous 2009-06-13 17:31

Minimal Barnsley's Fern (lolwikipedia) in html and javascript:

<html><script>n=u=v=0
function i(){t=document.body.lastChild.getContext('2d')
t.fillStyle='green'
r=Math.random()*99
x=u,y=v
u=x*.85+y/25,v=y*.85-x/25+1.6
if(r<14)u=y/3-x/7,v=x/4+y/4+.4
if(r<7)u=x/5-y/4,v+=1.3
if(r<1)u=0,v=y/6
t.fillRect(50*u+140,525-50*v,1,1)
if(n<2e5)if(n++%99)i()
else setTimeout(i,1)}onload=i</script><canvas height=550></html>


Works on modern browsers (well, ok, works on Firefox and probably Chrome). It's also 348 bytes. Can anyone do better?

Name: Anonymous 2009-06-13 17:35

HAY GUYS WHAT DOES IT DO IM SCARED TO RUN IT

Name: Anonymous 2009-06-13 17:50

WHY DIDN'T YOU CLOSE THE <canvas> TAG YOU FAGGOT

Name: Anonymous 2009-06-13 17:59

Name: Anonymous 2009-06-13 18:21

data:text/html;base64,PGh0bWw+PHNjcmlwdD5uPXU9dj0wCmZ1bmN0aW9uIGkoKXt0PWRvY3VtZW50LmJvZHkubGFzdENoaWxkLmdldENvbnRleHQoJzJkJykKdC5maWxsU3R5bGU9J2dyZWVuJwpyPU1hdGgucmFuZG9tKCkqOTkKeD11LHk9dgp1PXgqLjg1K3kvMjUsdj15Ki44NS14LzI1KzEuNgppZihyPDE0KXU9eS8zLXgvNyx2PXgvNCt5LzQrLjQKaWYocjw3KXU9eC81LXkvNCx2Kz0xLjMKaWYocjwxKXU9MCx2PXkvNgp0LmZpbGxSZWN0KDUwKnUrMTQwLDUyNS01MCp2LDEsMSkKaWYobjwyZTUpaWYobisrJTk5KWkoKQplbHNlIHNldFRpbWVvdXQoaSwxKX1vbmxvYWQ9aTwvc2NyaXB0PjxjYW52YXMgaGVpZ2h0PTU1MD48L2h0bWw+Cg==

Name: Anonymous 2009-06-13 18:26

>>3
Why would you? It's like an image tag, basically. You can close it, but you don't need to, and not doing so saves nine bytes.

Name: Anonymous 2009-06-13 18:52

>>6
More like two, can't you do <canvas ... />?

Name: Anonymous 2009-06-14 0:29

>>1
334 bytes.
<script>n=u=v=0;onload=function i(){t=document.body.lastChild.getContext('2d');t.fillStyle='green';r=Math.random()*99;x=u,y=v;r<14?r<1?(u=0,v=y/6):(v=x/4+y/4+(r<7?(u=x/5-y/4,1.7):(u=y/3-x/7,.4))):(u=x*.85+y/25,v=y*.85-x/25+1.6);t.fillRect(50*u+140,525-50*v,1,1);if(n<2e5)if(n++%99)i();else setTimeout(i,1)}</script><canvas height=550>

Name: Anonymous 2009-06-14 1:35

>>8
348 bytes - 13 bytes (<html> and </html>) - 1 byte (removing i and moving onload= == 334 bytes

r<14?r<1?(u=0,v=y/6):(v=x/4+y/4+(r<7?(u=x/5-y/4,1.7):(u=y/3-x/7,.4))):(u=x*.85+y/25,v=y*.85-x/25+1.6)
that is exactly the same length, but it's more efficient, so it is an improvement.

Name: Anonymous 2009-06-14 2:30

>>9
Wow, that's a hell of a conditional statement. Nice catch on moving the onload, too.

You can actually save another 8 bytes by using a conditional in place of the last if-else, too:
[code]<html><script>n=u=v=0
onload=function i(){t=document.body.lastChild.getContext('2d')
t.fillStyle='green'
r=Math.random()*99
x=u,y=v
r<14?r<1?(u=0,v=y/6):(v=x/4+y/4+(r<7?(u=x/5-y/4,1.7):(u=y/3-x/7,.4))):u=x*.85+y/25,v=y*.85-x/25+1.6
t.fillRect(50*u+140,525-50*v,1,1)
if(n<2e5)n++%99?i():setTimeout(i,1)}</script><canvas height=550></html>[code]

Name: Anonymous 2009-06-14 2:38

>>10
And a further byte by doing the same for the other end-of-function if, actually, for a total of 325 or 338, depending on whether you leave the <html> tags in.

<html><script>n=u=v=0
onload=function i(){t=document.body.lastChild.getContext('2d')
t.fillStyle='green'
r=Math.random()*99
x=u,y=v
r<14?r<1?(u=0,v=y/6):(v=x/4+y/4+(r<7?(u=x/5-y/4,1.7):(u=y/3-x/7,.4))):(u=x*.85+y/25,v=y*.85-x/25+1.6)
t.fillRect(50*u+140,525-50*v,1,1)
n<2e5?n++%99?i():setTimeout(i,1):1}</script><canvas height=550></html>

Name: Anonymous 2009-06-14 2:51

You can save additional bytes by using 'red' instead of 'green'

Name: FrozenVoid 2009-06-14 4:32

saving extra bytes  is useless. Benchmark it for speed.



______________________________________
http://xs135.xs.to/xs135/09042/av922.jpg
orbis terrarum delenda est

Name: Anonymous 2009-06-14 4:34

<html><script>n=u=v=0
onload=function i(){t=document.body.lastChild.getContext('2d')
t.fillStyle='070'
r=Math.random()*99
x=u,y=v
r<14?r<1?(u=0,v=y/6):(v=x/4+y/4+(r<7?(u=x/5-y/4,1.7):(u=y/3-x/7,.4))):(u=x*.85+y/25,v=y*.85-x/25+1.6)
t.fillRect(50*u+140,525-50*v,1,1)
n++<2e5?r>1?i():setTimeout(i,1):1}</script><canvas height=550></html>


or, if color doesn't matter:
<html><script>n=u=v=0
onload=function i(){t=document.body.lastChild.getContext('2d')
r=Math.random()*99
x=u,y=v
r<14?r<1?(u=0,v=y/6):(v=x/4+y/4+(r<7?(u=x/5-y/4,1.7):(u=y/3-x/7,.4))):(u=x*.85+y/25,v=y*.85-x/25+1.6)
t.fillRect(50*u+140,525-50*v,1,1)
n++<2e5?r>1?i():setTimeout(i,1):1}</script><canvas height=550></html>

Name: Anonymous 2009-06-14 7:16


r<14?r<1?(u=0,v=y/6):(v=x/4+y/4+(r<7?(u=x/5-y/4,1.7):(u=y/3-x/7,.4))):(u=x*.85+y/25,v=y*.85-x/25+1.6)


Okay, but nested if/else would be nicer to read.

Name: Anonymous 2009-06-14 10:10

>>14
When setting the fillStyle, at least in Firefox, you have to use a # before the 070 to get it to work. Still saves one byte, though.

You can save some more by eliminating the y=v - the particular way >>8 wrote the conditional statement makes it redundant.

Also, v=y/6 can be replaced by v/=6.

332 bytes.

<html><script>n=u=v=0
onload=function i(){t=document.body.lastChild.getContext('2d')
t.fillStyle='#070'
r=Math.random()*99
r<14?r<1?(u=0,v/=6):(v=u/4+v/4+(r<7?(u=u/5-v/4,1.7):(u=v/3-u/7,.4))):(x=u,u=x*.85+v/25,v=v*.85-x/25+1.6)
t.fillRect(50*u+140,525-50*v,1,1)
n<2e5?n++%99?i():setTimeout(i,1):1}</script><canvas height=550></html>

Name: Anonymous 2009-06-14 11:22

I tested in Firefox 3.5 and Chrome, IE doesn't think body.lastChild exists in the calling context and firebug keeps crashing firefox whenever I try and figure out why.

<body onload="n=u=v=0,t=document.body.lastChild.getContext('2d');function i(){t.fillStyle='#070';r=Math.random()*99;r<14?r<1?(u=0,v/=6):(v=u/4+v/4+(r<7?(u=u/5-v/4,1.7):(u=v/3-u/7,.4))):(x=u,u=x*.85+v/25,v=v*.85-x/25+1.6);t.fillRect(50*u+140,525-50*v,1,1);n<2e5?n++%99?i():setTimeout(i,1):1}i()"<canvas height=550>

Name: Anonymous 2009-06-14 11:34

>>16
331 bytes.

<html><script>n=u=v=0
onload=function i(){t=document.body.lastChild.getContext('2d')
t.fillStyle='#070'
r=Math.random()*99
r<14?r<1?(u=0,v/=6):(v=u/4+v/4+(r<7?(u=u/5-v/4,1.7):(u=v/3-u/7,.4))):(x=u,u=x*.85+v/25,v=v*.85-x/25+1.6)
t.fillRect(50*u+140,525-50*v,1,1)
n++<2e5?r<1?i():setTimeout(i,1):1}</script><canvas height=550></html>

Name: Anonymous 2009-06-14 11:40

>>17
it doesn't work in lynx either.
modern browsers

also, why would you even try to use firebug? it's never done anything for me except crash firefox, since it was first released.

Name: Anonymous 2009-06-14 11:40

>>17
IE doesn't support the canvas element.

Two bytes can be saved by removing a set of parentheses in the conditional statement.

<html><body onload="n=u=v=0,t=document.body.lastChild.getContext('2d');function i(){t.fillStyle='#070';r=Math.random()*99;r<14?r<1?(u=0,v/=6):v=u/4+v/4+(r<7?(u=u/5-v/4,1.7):(u=v/3-u/7,.4)):(x=u,u=x*.85+v/25,v=v*.85-x/25+1.6);t.fillRect(50*u+140,525-50*v,1,1);n<2e5?n++%99?i():setTimeout(i,1):1}i()"><canvas height=550></html>

Name: Anonymous 2009-06-14 11:41

>>19
Because the IE8 script debugger also crashes, and firebug is the best in the business.

Name: Anonymous 2009-06-14 11:50

>>18
The problem with using r for your check to do the timeout is that it's, well, random. You'll probably run in to the "too much recursion" eventually, which is what the timeout is there to prevent.

Also, given that your code uses the timeout in 99 out of 100 cases, you may as well just use
n++<2e5?setTimeout(i,1):1, which does always work, just very, very slowly. Your code probably meant r>1 instead of r<1, although that does have a much higher chance of running into "too much recursion".

Name: Anonymous 2009-06-14 11:54

>>22
Would setTimeout(i,0) not work better, it will behave the same except for not actually recursing but starting a new thread every time.

Name: Anonymous 2009-06-14 12:10

>>23
The speed increase by waiting 0 milliseconds instead of 1 is minimal. Given that you're only calling setTimeout every 99th time, and that you have only 2e5 calls to i, you only save 2.02 seconds. Most of the wait is from the fact that setTimeout(i,0) takes a lot more time to get called than i().

Name: Anonymous 2009-06-14 13:03

Another two bytes can be saved by rephrasing (x=u,u=x*.85+v/25,v=v*.85-x/25+1.6) to u=u*.85+v/25+0*(v=v*.85-u/25+1.6), which doesn't need the parentheses. It's now 323 bytes, and I doubt it's going to get much smaller.

<html><body onload="n=u=v=0,t=document.body.lastChild.getContext('2d');function i(){t.fillStyle='#070';r=Math.random()*99;r<14?r<1?(u=0,v/=6):v=u/4+v/4+(r<7?(u=u/5-v/4,1.7):(u=v/3-u/7,.4)):u=u*.85+v/25+0*(v=v*.85-u/25+1.6);t.fillRect(50*u+140,525-50*v,1,1);n++<2e5?n%99?i():setTimeout(i,0):1}i()"><canvas height=550></html>

Name: Anonymous 2009-06-14 14:02

I'm going to write a lisp program that brute forces every combination of characters of less than 323 bytes until it finds a shorter solutions

Name: Anonymous 2009-06-14 14:24

I have written a variant of XHTML that has a tag specifically for Barnsley's Fern:

<fern/>

As usual, a DSL gives a more elegant solution.

Name: FrozenVoid 2009-06-14 14:38

287 bytes:
<html><body onload="n=u=v=0;t=document.body.lastChild.getContext('2d');t.fillStyle='#C40';while(n++<2e5){r=Math.random()*99;r<14?r<1?(u=0,v/=6):v=u/4+v/4+(r<7?(u=u/5-v/4,1.7):(u=v/3-u/7,.4)):u=u*.85+v/25+0*(v=v*.85-u/25+1.6);t.fillRect(50*u+140,525-50*v,1,1)}"><canvas height=550></html>


___________________________________
http://xs135.xs.to/xs135/09042/av922.jpg
orbis terrarum delenda est

Name: Anonymous 2009-06-14 14:39

>>27
What attributes can it have?

Name: FrozenVoid 2009-06-14 14:49

type into address bar:
javascript:window.open(['data:text/html,<html><body onload="',"n=u=v=0;t=document.body.lastChild.getContext('2d');t.fillStyle='#C40';while(n++<2e5){r=Math.random()*99;r<14?r<1?(u=0,v/=6):v=u/4+v/4+(r<7?(u=u/5-v/4,1.7):(u=v/3-u/7,.4)):u=u*.85+v/25+0*(v=v*.85-u/25+1.6);t.fillRect(50*u+140,525-50*v,1,1)}",'"><canvas height=550></html>'].join(""),'a');

_______________________________________________
http://xs135.xs.to/xs135/09042/av922.jpg
orbis terrarum delenda est

Name: Anonymous 2009-06-14 14:53

>>30
I think the point originally was that we could watch it being drawn and understand the chaos game, not to butcher the process with some ugly iterative crap.

Name: Anonymous 2009-06-14 14:55

>>28
The contents of the while loop can be re-written as a single comma-deliminated statement, making the brackets on the loop unnecessary.
285 bytes.

<html><body onload="n=u=v=0;t=document.body.lastChild.getContext('2d');t.fillStyle='#070';while(n++<2e5)r=Math.random()*99,r<14?r<1?(u=0,v/=6):v=u/4+v/4+(r<7?(u=u/5-v/4,1.7):(u=v/3-u/7,.4)):u=u*.85+v/25+0*(v=v*.85-u/25+1.6),t.fillRect(50*u+140,525-50*v,1,1)"><canvas height=550></html>

and a data:uri
data:text/html;charset=utf-8;base64,PGh0bWw+PGJvZHkgb25sb2FkPSJuPXU9dj0wO3Q9ZG9jdW1lbnQuYm9keS5sYXN0Q2hpbGQuZ2V0Q29udGV4dCgnMmQnKTt0LmZpbGxTdHlsZT0nIzA3MCc7d2hpbGUobisrPDJlNSlyPU1hdGgucmFuZG9tKCkqOTkscjwxND9yPDE/KHU9MCx2Lz02KTp2PXUvNCt2LzQrKHI8Nz8odT11LzUtdi80LDEuNyk6KHU9di8zLXUvNywuNCkpOnU9dSouODUrdi8yNSswKih2PXYqLjg1LXUvMjUrMS42KSx0LmZpbGxSZWN0KDUwKnUrMTQwLDUyNS01MCp2LDEsMSkiPjxjYW52YXMgaGVpZ2h0PTU1MD48L2h0bWw+

Name: FrozenVoid 2009-06-14 15:06

[jp]
           ';:::::::::::::::::::::::::'、     /:::::::::::::::::::',
         ':;::::::::::::::::::::::::',     /::::l:::::::::::::::::::::l
            ヽ;::_;_/⌒l:::::'、   !::::::|:::::::::::::::::::::|
            ( rっ^ヽ::┴:::‐'::-:::ヘ::::::::::::::::::l
            f´ ~ 、_.ノ:::::::::::::::::::::::::ヽ:;:_::_::ノ
           /`:ー:':::::::;:: ‐ ´  ̄ ` ヽ:;ヽ、
          /::::::::::::::/-―-、__,    ヾ:':,
            !::::::::::::/  '叨¨ヽ   `ー-、 l::l
          l::::::::::::l    ` ー    /叨¨) l::!
            !::::::::::l         ヽ,   リ
            ヽ::::::::',、   `ヽ.___´,   /
           ` -:::_ヽ、    `ニ´ _ .ィ´
[/jp]

Name: FrozenVoid 2009-06-14 15:25

>>32
284 bytes:
<html><body onload="n=u=v=0;t=document.body.lastChild.getContext('2d');t.fillStyle='red';while(n++<2e5)r=Math.random()*99,r<14?r<1?(u=0,v/=6):v=u/4+v/4+(r<7?(u=u/5-v/4,1.7):(u=v/3-u/7,.4)):u=u*.85+v/25+0*(v=v*.85-u/25+1.6),t.fillRect(50*u+140,525-50*v,1,1)"><canvas height=550></html>

________________________________________________
http://xs135.xs.to/xs135/09042/av922.jpg
orbis terrarum delenda est

Name: Anonymous 2009-06-14 15:35

This is turning into a real pissing contest.

Name: Anonymous 2009-06-14 15:37

>>34
saving extra bytes  is useless.
- FrozenVoid

Name: FrozenVoid 2009-06-14 15:50

>>36 It is useless, but you insist on measuring the worth of program by it.

______________________________
http://xs135.xs.to/xs135/09042/av922.jpg
orbis terrarum delenda est

Name: Anonymous 2009-06-14 16:25

>>34
Red is only marginally better than black. At that point you may as well just use the 262 byte

<html><body onload="n=u=v=0;while(n++<2e5)r=Math.random()*99,r<14?r<1?(u=0,v/=6):v=u/4+v/4+(r<7?(u=u/5-v/4,1.7):(u=v/3-u/7,.4)):u=u*.85+v/25+0*(v=v*.85-u/25+1.6),document.body.lastChild.getContext('2d').fillRect(50*u+140,525-50*v,1,1)"><canvas height=550></html>

But it's strayed pretty far from the original, now.

Name: FrozenVoid 2009-06-14 16:32

If for example you run a site with 150kb javascript file,
you could consider to compress it manually,if server gzip isn't enough.
There even programs which would reduce size by automatically compressing redundant text: http://en.wikipedia.org/wiki/Minification_%28programming%29
This isn't the case for it, however, since the program is already very small, smaller then minimum 576 IP packet.
_________________________________________________
http://xs135.xs.to/xs135/09042/av922.jpg
orbis terrarum delenda est

Name: FrozenVoid 2009-06-14 16:41

>>38 Okay, i'm removing the html then:
249 bytes.
<body onload="n=u=v=0;while(n++<2e5)r=Math.random()*99,r<14?r<1?(u=0,v/=6):v=u/4+v/4+(r<7?(u=u/5-v/4,1.7):(u=v/3-u/7,.4)):u=u*.85+v/25+0*(v=v*.85-u/25+1.6),document.body.lastChild.getContext('2d').fillRect(50*u+140,525-50*v,1,1)"><canvas height=550>



_______________________________________
http://xs135.xs.to/xs135/09042/av922.jpg
orbis terrarum delenda est

Newer Posts
Don't change these.
Name: Email:
Entire Thread Thread List