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: F r o z e n V o i d !!mJCwdV5J0Xy2A21 2011-12-06 8:23

>NP-complete problems
Fractal compression already exists, just its lossy. I think if IFS(non-determinstic) algorithm can be replaced by deterministic algorithm, this would simplify the problem into optimizations like preacaching/parameter reductions/simplified formulas/etc, which would make anything which uses IFS algorithms much more efficient(and compression would be deterministic too)

Name: Anonymous 2011-12-06 8:38

>>119
They cosplay the Start of David?

Name: Anonymous 2011-12-06 9:18

Canvas 2d Barnsley's Fern Generator http://jsdo.it/WallOfFire/f15l
Obviously superior

Name: Anonymous 2011-12-06 9:42

FV, you are more gay than this:
http://www.imagefap.com/photo/1797537875/Next_SheMale_Idol-029.jpg

Name: Anonymous 2011-12-06 9:45

>>120
LITHP is a primitive, small subset of JavaScript. Only a LITHP fanatic would use it instead of more flexible and complete language.

Name: Anonymous 2011-12-06 9:51

>>123
It says it works on safari Chrome only....

Works in Opera too.

Name: Anonymous 2011-12-06 11:25

Barnsley fractal patents expire this year

Name: VIPPER 2011-12-06 12:40

>>124
Hes hot. I wouldnt mind having my as pounded by her.

Name: F r o z e n V o i d !!mJCwdV5J0Xy2A21 2011-12-06 13:22

Unoptimized 678ms but now the fractal serves as its own PRNG(i.e. there is no external randomness or PRNG calls anymore)
<html><head><style>html,body{width:100%;height:100%;margin:0px;}
    </style></head><body><canvas  id='frozenfern'><script>

   const  w=window.innerWidth
   const  h =window.innerHeight
const M=w>h?w:h
    var canv=document.getElementById('frozenfern');
    var context=canv.getContext("2d");
    canv.width=w ;
    canv.height=h ;
var DEBUG=1;
function d(x){if(!DEBUG)return;if(typeof(x)==Array){document.body.innerHTML+=(x.join(","))}else{document.body.innerHTML+=(x.toString())}}
var green=0xff00ff00
var blue=0xffff0000
var red=0xff0000ff
//const iterations=100
const RW=30000//Random walk range
var iter100=100//00//Fill Quality(optimal ~4k)
const H=h//525;
const L=w/2;//140
const mult=50;//
const xyred=0.85
const a25=1/25;
const a4=1/4;
const a3=1/3;
const a5=1/5;
const a7=1/7;
const a6=1/6
const a20=1/20
const zoom=2.8//14//1.6
const Hzoom=0.4
const Wzoom=1.3
const WHzoom=Wzoom+Hzoom
var starttime=Date.now();
function addtm(str){document.title+=Date.now()-starttime+str;starttime=Date.now()}
var rands=Uint32Array(5);
var x3 =rands[0]= 123456789, y3 = rands[1]= 362436069, z3 =rands[2]=  521288629, w3 =rands[3]=  88675123,t3=rands[4];
var n=u=v=r=m=c=x=y=0;
var j=[]


//xorshift rnd
function r63(){
t3 = x3 ^ (x3 << 11);
x3 = y3;
y3 = z3;
z3 = w3;
w3 = w3 ^ (w3 >> 19) ^ (t3 ^ (t3 >> 8));
return w3&63}
var wtable=Uint32Array(w);
for(var i=0;i<w;i++)wtable[i]=((H-i)*w)+L;

//Stem 1/100
function stem(){
x=u;y=v;u=0;v=y*a6;
arrn[wtable[(mult*v)|0]]=green;}
//LeafSet
function leafD(){
u=x*xyred+y*a25;v=y*xyred-x*a25+zoom;
arrn[((mult*u)|0)+wtable[(mult*v)|0]]=green;}
function leafW(){
u=x*a5-y*a4,v=(x+y)*a4+WHzoom;
arrn[((mult*u)|0)+wtable[(mult*v)|0]]=blue;}
function leafH(){
u=y*a3-x*a7,v=(x+y)*a4+Hzoom;
arrn[((mult*u)|0)+wtable[(mult*v)|0]]=red;}
//Leaf

function leaf(){;var t;stem()
for(t=0;t<RW;t++){
x=u;y=v;//r=r63();
r=(((u*v)*0xff)&63);
(r&1)|(r&3)?leafD():r&7?leafW():leafH();
};

}
//Main
var arrn=Uint32Array(w*h)
var co={width:w,height:h,data:Uint8ClampedArray(arrn.buffer)}
while(iter100--){
/* inlined version 3ms faster:
;stem();var t;
for(t=0;t<RW;t++){
x=u;y=v;r=r63();
((r&1)|(r&3))?(u=x*xyred+y*a25,v=y*xyred-x*a25+zoom):((r&7)?(u=x*a5-y*a4,v=(x+y)*a4+WHzoom):(u=y*a3-x*a7,v=(x+y)*a4+Hzoom));
arrn[L+(     ((mult*u))|0   )+(H-(mult*v)|0)*w]=green;}
*/
leaf();};//47ms
context.putImageData(co,0,0);//42ms
document.title+=Date.now()-starttime+" ms"
</script></body></html>

Name: F r o z e n V o i d !!mJCwdV5J0Xy2A21 2011-12-06 13:55

*should be r=(((v+u*v)*0xff)&63); to avoid u=0

Name: F r o z e n V o i d !!mJCwdV5J0Xy2A21 2011-12-06 13:56

this version also messes up the stem, but doesn't detract quality.

Name: Anonymous 2011-12-06 13:57

USE CODE TAG, CODE FAG

Name: F r o z e n V o i d !!mJCwdV5J0Xy2A21 2011-12-06 14:09

68ms:optimized+ stem fix
<html><head><style>html,body{width:100%;height:100%;margin:0px;}
    </style></head><body><canvas  id='frozenfern'><script>

   const  w=window.innerWidth
   const  h =window.innerHeight
const M=w>h?w:h
    var canv=document.getElementById('frozenfern');
    var context=canv.getContext("2d");
    canv.width=w ;
    canv.height=h ;
var DEBUG=1;
function d(x){if(!DEBUG)return;if(typeof(x)==Array){document.body.innerHTML+=(x.join(","))}else{document.body.innerHTML+=(x.toString())}}
var green=0xff00ff00
var blue=0xffff0000
var red=0xff0000ff
//const iterations=100
const RW=2000//Random walk range
var iter100=50//00//Fill Quality(optimal ~4k)
const H=h//525;
const L=w/2;//140
const mult=50;//
const xyred=0.85
const a25=1/25;
const a4=1/4;
const a3=1/3;
const a5=1/5;
const a7=1/7;
const a6=1/6
const a20=1/20
const zoom=2.8//14//1.6
const Hzoom=0.4
const Wzoom=1.3
const WHzoom=Wzoom+Hzoom
var starttime=Date.now();
function addtm(str){document.title+=Date.now()-starttime+str;starttime=Date.now()}
var rands=Uint32Array(5);
var x3 =rands[0]= 123456789, y3 = rands[1]= 362436069, z3 =rands[2]=  521288629, w3 =rands[3]=  88675123,t3=rands[4];
var n=u=v=r=m=c=x=y=0;
var j=[]


//xorshift rnd
function r63(){
t3 = x3 ^ (x3 << 11);
x3 = y3;
y3 = z3;
z3 = w3;
w3 = w3 ^ (w3 >> 19) ^ (t3 ^ (t3 >> 8));
return w3&63}
var wtable=Uint32Array(w);
for(var i=0;i<w;i++)wtable[i]=((H-i)*w)+L;

//Stem 1/100
function stem(){
x=u;y=v;u=0;v=y*a6;
arrn[wtable[(mult*v)|0]]=green;}
//LeafSet
function leafD(){
u=x*xyred+y*a25;v=y*xyred-x*a25+zoom;
arrn[((mult*u)|0)+wtable[(mult*v)|0]]=green;}
function leafW(){
u=x*a5-y*a4,v=(x+y)*a4+WHzoom;
arrn[((mult*u)|0)+wtable[(mult*v)|0]]=blue;}
function leafH(){
u=y*a3-x*a7,v=(x+y)*a4+Hzoom;
arrn[((mult*u)|0)+wtable[(mult*v)|0]]=red;}
//Leaf

function leaf(){;var t;stem()
for(t=0;t<RW;t++){
x=u;y=v;//r=r63();
r=(((v+u*v)*0xff)&63);
if(r==0)stem();
(r&1)|(r&3)?leafD():(r&7?leafW():(leafH()));

};

}
//Main
var arrn=Uint32Array(w*h)
var co={width:w,height:h,data:Uint8ClampedArray(arrn.buffer)}
while(iter100--){
/* inlined version 3ms faster:
;stem();var t;
for(t=0;t<RW;t++){
x=u;y=v;r=r63();
((r&1)|(r&3))?(u=x*xyred+y*a25,v=y*xyred-x*a25+zoom):((r&7)?(u=x*a5-y*a4,v=(x+y)*a4+WHzoom):(u=y*a3-x*a7,v=(x+y)*a4+Hzoom));
arrn[L+(     ((mult*u))|0   )+(H-(mult*v)|0)*w]=green;}
*/
leaf();};//47ms
context.putImageData(co,0,0);//42ms
document.title+=Date.now()-starttime+" ms"
</script></body></html>

Name: F r o z e n V o i d !!mJCwdV5J0Xy2A21 2011-12-07 3:26

91ms randomizer reduced to union float:int
<html><head><style>html,body{width:100%;height:100%;margin:0px;}
    </style></head><body><canvas  id='frozenfern'><script>
   const  w=window.innerWidth
   const  h =window.innerHeight
const M=w>h?w:h
    var canv=document.getElementById('frozenfern');
    var context=canv.getContext("2d");
    canv.width=w ;
    canv.height=h ;
var DEBUG=1;
function d(x){if(!DEBUG)return;if(typeof(x)==Array){document.body.innerHTML+=(x.join(","))}else{document.body.innerHTML+=(x.toString())}}
const green=0xff00ff00
const blue=0xffff0000
const red=0xff0000ff
const purple=0xffff00ff
const yellow=0xff00ffff
var quality=200000
const H=h//525;
const L=w/2;//140
const mult=50;//
const xyred=0.85
const a25=1/25;
const a4=1/4;
const a3=1/3;
const a5=1/5;
const a7=1/7;
const a6=1/6
const a20=1/20
const zoom=2.8//14//1.6
const Hzoom=0.4
const Wzoom=1.3
const WHzoom=Wzoom+Hzoom
var starttime=Date.now();
function addtm(str){document.title+=Date.now()-starttime+str;starttime=Date.now()}
var x=y=0;
var farr=Float64Array(4)
var vars=Uint32Array(farr.buffer)
var wtable=Uint32Array(w);
for(var i=0;i<w;i++)wtable[i]=((H-i)*w)+L;
//Main
var color=green;
var arrn=Uint32Array(w*h)
var co={width:w,height:h,data:Uint8ClampedArray(arrn.buffer)}
while(quality--){
//u=farr[1],v=farr[0]
x=farr[1],y=farr[0];
(vars[1]&3)?(color=yellow,farr[1]=x*xyred+y*a25,farr[0]=y*xyred-x*a25+zoom):((vars[1]&7)?(color=red,farr[1]=x*a5-y*a4,farr[0]=(x+y)*a4+WHzoom):(color=blue,farr[1]=y*a3-x*a7,farr[0]=(x+y)*a4+Hzoom));
if((vars[0]&0xff)==0)farr[1]=0,farr[0]=y*a6,color=green;
arrn[ ( ((mult*farr[1]))|0)+wtable[(mult*farr[0])|0]]=color};
context.putImageData(co,0,0);//42ms
document.title+=Date.now()-starttime+" ms"
</script></body></html>

Name: Anonymous 2011-12-07 10:02

To the OP: Because most browsers clamp the minimum setTimeout/setInterval delay value to 10ms, even if you use a lower value, the upper bound is 100 timer-based function calls per second, which directly translates to a maximum of 100 pixels per second. If you were to fill multiple pixels in one call of i(), you could increase runtime speed.

Name: Anonymous 2011-12-07 10:19

>>135
The OP already draws 100 pixels for each timer event.

Name: Anonymous 2011-12-07 10:33

>>136
Bullshit!

Name: Anonymous 2011-12-07 11:21

>>137
are you blind!
if(n<2e5)if(n++%99)i()
else setTimeout(i,1)

Name: lol 2011-12-07 18:51

lulllllllllllz .im s0 hapy

Name: Anonymous 2011-12-07 19:42

RANDOM PROSESSES make me feel like i am everythnig the univeres was meant to be.

Name: Anonymous 2011-12-07 19:45

AHHHHHHHHHH I AM ONE WIT / NATURE & LOGIK
Newer Posts
Don't change these.
Name: Email:
Entire Thread Thread List
All trademarks and copyrights on this site are owned by their respective parties. All comments and posts are the responsibility of their own posters.
- Tinychan + 2ch Mode -