Conway's Game of Life - online JavaScript version

Game of life is an example of a system with very simple rules but unpredictable state in the long term.

Each square represents a living space available for a single cell. If there aren't enough cells in the neighborhood, the space is empty, if the cell was present there it dies from loneliness. If in the neighborhood is enough of other cells, the cell can survive in its square, or a new cell is born if it was empty before.

It's interesting to notice that we can't compute the n-th iteration directly, we have to go through all previous iterations.

Controls: generate new map / start / pause-unpause.

I wrote this implementation almost ten years ago, so it may not be how it should be done today, especially the table should be replaced by canvas, but it's still usable and shows the concept.

If you are interested, how it works, please take a look on the source code of this page.

Read More

Fractal way of map generation by using diamond-square algorithm

Diamond-square algorithm is a simple way to generate maps by using fractal approach. The idea is to generate recursively a point based on the values of its neighbors and an additional fluctuation.

The main disadvantage is that landscapes aren't realistic and there exist visible edges created during recursive slicing of the terrain during recursive computing

Below you may see how the diamond-square algorithm works. Availability to change perspective is not part of the algorithm, but I've added it to make the visualisation more user-friendly.

	up
left	create new	right
	down

To check exactly, how the scripts are working please take a look on the source code of this page.

Above scripts were created a couple of years ago, they may not be aligned with the modern way of doing things in JavaScript. The code can be hard to read, I've written it when I was a student, back in those days I've been in love in short variable names and lack of comments.

Read More

Julia set, Cantor set and Fern fractal implemented in JavScript

In the previous post, I presented a simple fractal - bifurcation diagram of the logistic map. Today I will show more fractals and their implementation in JavaScript, they are embedded below so it's possible to run them on this page.

Julia set

The equitation for Julia set is given for complex numbers:

f_c(x) = x² + c

This implementation uses random numbers to create the fractal.

Click to draw Julia set. This can take a while.

function drawJuliaFractal(canvasID)
{
    // get canvas to be able to draw into it
    var canvas = document.getElementById(canvasID)
    var ctx = canvas.getContext("2d")

    var width = canvas.width
    var height = canvas.height

    var c_r = -0.73
    var c_i = 0.19
    var step = 0.002

    // z= a+bi
    for(var a = -2; a < 2; a+=step)
    {
        for(var b = -2; b < 2; b+=step)
        {
            var za = a
            var zb = b
            for(var n = 0; n < 160; n++){
               var za_temp = (za * za) - (zb * zb)
               zb = 2 * za *zb
               za = za_temp

               // add c constant
               za+=c_r
               zb+=c_i
            }

            if(Math.sqrt((za * za) + (zb * zb)) < 2)
            {
                var zoom = width / 3
                var x_print = (zoom * a) + (width / 2)
                var y_print = (zoom * b) + (height / 2)
                putPixel(ctx, x_print, y_print)
            }

        }
    }
}

Fern fractal

Unfortunately, I don't remember the direct mathematics formula.

This implementation uses random numbers to create the fractal.

Click to draw Fern fractal.

function drawFernFractal(canvasID)
{
    // get canvas to be able to draw into it
    var canvas = document.getElementById(canvasID)
    var ctx = canvas.getContext("2d")

    var width = canvas.width
    var height = canvas.height

    var max_step = 20000
    var x = 0
    var y = 0

    for(var i=0; i<max_step; i++)
    {
        var r = Math.random()

        if(r <= 0.01)
        {
            x = 0
            y = 0.16 * y
        }
        else if(r <= 0.08)
        {
            x = (0.2 * x) - (0.26 * y)
            y = 0.23*x+0.22*y+1.6
        }
        else if(r <= 0.15)
        {
            x = (-0.15 * x) + (0.28 * y)
            y = (0.26 * x) + (0.24 * y) + 0.44
        }
        else 
        {
            x = (0.85 * x) + (0.04 * y)
            y = (-0.04 * x) + (0.85 * y) + 1.6
        }


        // scale fractal to best fit to the canvas object
        var zoom = width / 10
        x_print = width - ((x * zoom) + (width / 2))
        y_print = height - (y * zoom)

        putPixel(ctx, x_print, y_print)
    }
}

Cantor set

The equitation for Cantor set is given by formula:

C_n = C_n-1/3 ∪ (2/3 + C_n-1/3), C₀ = [0,1]

This implementation uses recursion to create the fractal.

Click to draw Cantor set.

// Note, initial invocation should be with xb = canvas width
function drawCantor(canvasID, level, xa, xb)
{
    // get canvas to be able to draw into it
    var canvas = document.getElementById(canvasID)
    var ctx = canvas.getContext("2d")

    var width = canvas.width
    var height = canvas.height

    var level_max = 10;
    if(level < level_max)
    {
        // put bar
        var bar_height = 3
        for(var i = xa; i < xb; i++)
        {
            var h = level * 6

            for(var j = h; j != (h + bar_height); j++)
            {
                var y_print = j +( height / 2)
                putPixel(ctx, i, y_print)
            }
        }

        //  call itself to print two child bars
        drawCantor(canvasID, level+1, xa, xa+ (xb-xa)/3)
        drawCantor(canvasID, level+1, xb - (xb-xa)/3, xb)
    }
}

To check exactly, how the scripts are working please take a look on the source code of this page.

Above scripts were created a couple of years ago, they may not be aligned with the modern way of doing things in JavaScript.

Read More

Bifurcation diagram of the logistic map [online version]

One of the reasons why mathematics is so amazing is that even a simple at first glance concepts have interesting behaviors and features. I think that the bifurcation diagram of the logistic map is a great example.

The logistic map is given by the equitation:

x_n+1 = rx_n(1 - x_n), x₀ < 1, r ∈ (0,4]

Below you may generate its bifurcation diagrams for different ranges and for different values of the x₀. It's amazing that those diagrams have fractal nature - self-similarity is even visible at first glance.

X-axis represents values for different r values, Y-axis represents x_0...n element value, n < 90 because in real world we can't show elements ad infinimum.

r_start>0: r_stop≤4: x₀<1:

The script was originally created a couple of years ago, so it may not be aligned with the modern JavaScript way of doing things. If you are interested how it works, please take a look on the source code of this page.

Read More