BrowserBasic - Barnley's Fern

[Cybermonkey]

So I had a little time to try BB with porting a fractal example from EGSL. You can see the result on: http://egsl.retrogamecoding.org/media/browserbasic/ex_fern.html
(it's compiled with the Linux version of BB by the way)
Source Code:

Code: [Select]

var x as number =0
var y as number=0
var x1 as number=0
var x2 as number =0
var go as number =false
var n as number
var r as number

function OnLoad()
setBackgroundColor (0,0,0)
setColor (0,196,0)

endfunction


function OnDraw()
for n= 1 to 500000
r=rnd(1)

if r<=0.01 then
x=0
y=0.16*y
go=true

elseif r<=0.07 then
x = 0.2 * x - 0.26 * y
y = 0.23 * x + 0.22 * y + 1.6
go=true

elseif r<=0.15 then
x = -0.15 * x + 0.28 * y
y = 0.26 * x + 0.24 * y + 0.44
go=true
endif

if go = false then
x = 0.85 * x + 0.04 * y 
y = -0.04 * x + 0.85 * y + 1.6
endif

x1=(x+3)*70
x2 = 700 - y * 70
setpixel (x1,x2)

go=false
next
endfunctionMaybe there is a possibility to draw only once? I didn't find it so far ...

Here is the original EGSL source:

Code: [Select]

openwindow (800,600,0,"Barnley's Fern")
backcolour (0,00,0)
cls()
colour (0,196,0)
x=0
y=0
x1=0
x2=0
go=false
for n= 1,500000 do
r=rnd()

if r<=0.01 then
x=0
y=0.16*y
go=true

elseif r<=0.07 then
x = 0.2 * x - 0.26 * y
y = 0.23 * x + 0.22 * y + 1.6
go=true

elseif r<=0.15 then
x = -0.15 * x + 0.28 * y
y = 0.26 * x + 0.24 * y + 0.44
go=true
end

if go == false then
x = 0.85 * x + 0.04 * y 
y = -0.04 * x + 0.85 * y + 1.6
end

x1=(x+3)*70
x2=700-y*70

dot (x1,x2)
go=false
end

redraw()
key=inkey()
closewindow()
Next thing will be more interactive. BrowserBasic really becoming great imho.

[SteveOW]

Maybe there is a possibility to draw only once? I didn't find it so far ...

You could update the displayed drawing progressively using CreateCanvas, setCanvas, and getCanvas commands (for example see ex_paint.txt).

When you decide the drawing is complete just stop adding to the canvas.
Program will continue looping but will display the same canvas over and over.

[Guilect]

Here is the Fern program by Cybermonkey but using an offscreen canvas.
The whole fern is drawn off screen, then when done is shown on the screen.
Because it is drawing many pixels you might get a 'script has stopped running' message.
If so, click on continue.

Code: [Select]

var x as number =0
var y as number=0
var x1 as number=0
var x2 as number =0
var go as number =false
var n as number
var r as number
' create an offscreen canvas
var canvas as number
canvas = CreateCanvas(getWidth(), getHeight())

function OnLoad()
setBackgroundColor (0,0,0)
setColor (0,196,0)
' set the active canvas the offscreen one
setCanvas(canvas)
' only need to draw the image once
drawfern()
endfunction


function OnDraw()
' draw the offscreen canvas on the main canvas
      Draw(canvas, 0, 0, 0, 1, 1, 0, 0)
endfunction

function drawfern()
for n= 1 to 500000
r=rnd(1)

if r<=0.01 then
x=0
y=0.16*y
go=true

elseif r<=0.07 then
x = 0.2 * x - 0.26 * y
y = 0.23 * x + 0.22 * y + 1.6
go=true

elseif r<=0.15 then
x = -0.15 * x + 0.28 * y
y = 0.26 * x + 0.24 * y + 0.44
go=true
endif

if go = false then
x = 0.85 * x + 0.04 * y 
y = -0.04 * x + 0.85 * y + 1.6
endif

x1=(x+3)*70
x2 = 700 - y * 70
setpixel (x1,x2)

go=false
next

endfunction

[Guilect]

Here is another version.
This one allows you to watch the Fern being plotted.
This method is a little slower as the offscreen canvas is being 'flipped' (drawn) to the main canvas 500000 times.

Code: [Select]

var x as number =0
var y as number=0
var x1 as number=0
var x2 as number =0
var go as number =false
var n as number
var r as number
' create an offscreen canvas
var canvas as number
canvas = CreateCanvas(getWidth(), getHeight())

function OnLoad()
setBackgroundColor (0,0,0)
setColor (0,196,0)
n = 0
endfunction

function OnDraw()
' draw the offscreen canvas on the main canvas
Draw(canvas, 0, 0, 0, 1, 1, 0, 0)
' set active canvas to the offscreen one
setCanvas(canvas)
If n < 500000 then
r=rnd(1)

if r<=0.01 then
x=0
y=0.16*y
go=true

elseif r<=0.07 then
x = 0.2 * x - 0.26 * y
y = 0.23 * x + 0.22 * y + 1.6
go=true

elseif r<=0.15 then
x = -0.15 * x + 0.28 * y
y = 0.26 * x + 0.24 * y + 0.44
go=true
endif

if go = false then
x = 0.85 * x + 0.04 * y 
y = -0.04 * x + 0.85 * y + 1.6
endif

x1=(x+3)*70
x2 = 700 - y * 70
setpixel (x1,x2)

go=false
n = n + 1
endif
endfunction

[Cybermonkey]

Ah, okay, thanks.

[SteveOW]

Another variation forked from Guilect's second version but with addition of color variation and progress counter and fewer points...

Code: [Select]

var x as number =0
var y as number=0
var x1 as number=0
var x2 as number =0
var go as number =false
var n as number
var r as number

var label_time as number = 1

var nPoints as number = 500*1000
nPoints = 500*100 '...fewer points gives a faster but coarser animation

' create an offscreen canvas
var OffCanvas as number
OffCanvas = CreateCanvas(getWidth(), getHeight())

'--- end of global declarations ---

function OnLoad()
setBackgroundColor (0,0,0)
setColor (0,196,0)
n = 0
endfunction

function OnDraw()
' draw the offscreen canvas on the main canvas
Draw(OffCanvas, 0, 0, 0, 1, 1, 0, 0)


' set active canvas to the offscreen one
setCanvas(OffCanvas)

n = n + 1
If n > nPoints then
'...do nothing else
else

var iRed as number
var iGreen as number
var iBlue as number = 0
iRed = int(255*(n/nPoints))
iGreen = (255 - iRed)

label_time = label_time-1
if label_time <= 0 then
setColor(50,50,50)
FillRectangle(40, 80, 140, 40)
setColor(iRed,iGreen,0)
print("Points = "+str$(n)+" of "+str$(nPoints),40,90)
print("color = (" +str$(iRed) + "," +str$(iGreen)+ "," + str$(iBlue) + ")",40,110)
label_time=50
endif

r=rnd(1)

if r<=0.01 then
x=0
y=0.16*y
go=true

elseif r<=0.07 then
x = 0.2 * x - 0.26 * y
y = 0.23 * x + 0.22 * y + 1.6
go=true

elseif r<=0.15 then
x = -0.15 * x + 0.28 * y
y = 0.26 * x + 0.24 * y + 0.44
go=true
endif

if go = false then
x = 0.85 * x + 0.04 * y 
y = -0.04 * x + 0.85 * y + 1.6
endif

x1 = (x+3)*70
x2 = 700 - y * 70
setpixel (x1,x2)

go=false

endif
endfunction