Mandelbrot

Using HTML5 canvas

Mandelbrot

×
 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
[<ReflectedDefinition>]
module Program

open FunScript
open FunScript.TypeScript

type Complex = { r : double; i : double }
type Color = { r : int; g : int; b : int; a : int }

let maxIter = 512

let height = 800
let width = 1000

let minX = -2.1 
let maxX = 0.5
let minY = -1.4
let maxY = 1.4

let iteratePoint (s : Complex) (p : Complex) : Complex =
    { r = s.r + p.r*p.r - p.i*p.i; i = s.i + 2.0 * p.i * p.r }

let getIterationCount (p : Complex) =
    let mutable z = p
    let mutable i = 0
    while i < maxIter && (z.r*z.r + z.i*z.i < 4.0) do
      z <- iteratePoint p z
      i <- i + 1
    i
    
let iterCountToColor (i : int) : Color =
    let i = maxIter - i
    { r = 0; g = i % 256; b = 100 * (i / 256); a = 255 }

let getCoordColor (x : int, y : int) : Color =
    let p = { r = float x * (maxX - minX) / float width + minX
            ; i = float y * (maxY - minY) / float height + minY }
    let i = getIterationCount p
    iterCountToColor i

let showSet() =
    let ctx = Globals.document.getElementsByTagName_canvas().[0].getContext_2d()
    
    let img = ctx.createImageData(float width, float height)
    for y = 0 to height-1 do
        for x = 0 to width-1 do
            let index = (x + y * width) * 4
            let color = getCoordColor (x, y)
            img.data.[index+0] <- float color.r
            img.data.[index+1] <- float color.g
            img.data.[index+2] <- float color.b
            img.data.[index+3] <- float color.a
    ctx.putImageData(img, 0., 0.)

let main() =
    showSet()
    
do Runtime.Run(directory="Web")
Multiple items
type ReflectedDefinitionAttribute =
  inherit Attribute
  new : unit -> ReflectedDefinitionAttribute

Full name: Microsoft.FSharp.Core.ReflectedDefinitionAttribute

--------------------
new : unit -> ReflectedDefinitionAttribute
module Program
namespace FunScript
namespace FunScript.TypeScript
type Complex =
  {r: double;
   i: double;}

Full name: Program.Complex
Complex.r: double
Multiple items
val double : value:'T -> float (requires member op_Explicit)

Full name: Microsoft.FSharp.Core.ExtraTopLevelOperators.double

--------------------
type double = System.Double

Full name: Microsoft.FSharp.Core.double
Complex.i: double
type Color =
  {r: int;
   g: int;
   b: int;
   a: int;}

Full name: Program.Color
Color.r: int
Multiple items
val int : value:'T -> int (requires member op_Explicit)

Full name: Microsoft.FSharp.Core.Operators.int

--------------------
type int = int32

Full name: Microsoft.FSharp.Core.int

--------------------
type int<'Measure> = int

Full name: Microsoft.FSharp.Core.int<_>
Color.g: int
Color.b: int
Color.a: int
val maxIter : int

Full name: Program.maxIter
val height : int

Full name: Program.height
val width : int

Full name: Program.width
val minX : float

Full name: Program.minX
val maxX : float

Full name: Program.maxX
val minY : float

Full name: Program.minY
val maxY : float

Full name: Program.maxY
val iteratePoint : s:Complex -> p:Complex -> Complex

Full name: Program.iteratePoint
val s : Complex
val p : Complex
val getIterationCount : p:Complex -> int

Full name: Program.getIterationCount
val mutable z : Complex
val mutable i : int
val iterCountToColor : i:int -> Color

Full name: Program.iterCountToColor
val i : int
val getCoordColor : x:int * y:int -> Color

Full name: Program.getCoordColor
val x : int
val y : int
Multiple items
val float : value:'T -> float (requires member op_Explicit)

Full name: Microsoft.FSharp.Core.Operators.float

--------------------
type float = System.Double

Full name: Microsoft.FSharp.Core.float

--------------------
type float<'Measure> = float

Full name: Microsoft.FSharp.Core.float<_>
val showSet : unit -> unit

Full name: Program.showSet
val ctx : CanvasRenderingContext2D
type Globals

Full name: FunScript.TypeScript.Globals
property Globals.document: Document
member Document.getElementsByTagName_canvas : unit -> NodeListOf<HTMLCanvasElement>
val img : ImageData
member CanvasRenderingContext2D.createImageData : imageDataOrSw:obj * ?sh:float -> ImageData
val index : int
val color : Color
property ImageData.data: float array
member CanvasRenderingContext2D.putImageData : imagedata:ImageData * dx:float * dy:float * ?dirtyX:float * ?dirtyY:float * ?dirtyWidth:float * ?dirtyHeight:float -> unit
val main : unit -> unit

Full name: Program.main

Live demo

Click here to open the sample live, running using JavaScript in a dialog window.

To look at the generated JavaScript, view the source of this web page and scroll to the end of the file.

Tutorials

Learn FunScript from the following introductory tutorials

Samples

Browse other amazing samples created with FunScript

Fork me on GitHub