Cellular Automata in Raphael

HTML

<div id="canvas"></div>
<!DOCTYPE html>
<!--html-->
<body>

<p>Click the button to add new elements to the array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
    fruits.push("Kiwi", "Lemon", "Pineapple");
    document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
<!--/html-->

CSS

.instructions {
    font-style: italic;
}

JavaScript

// Creates canvas 320 Ă— 200 at 10, 50
var paper = Raphael(10, 20, 800, 400);
paper.path("M 100 100 L 200 100 L 150 200 z").attr({stroke:"blue"});
paper.rect(308,50,15,60,3)
paper.path("M "+329+" "+(65)+" L "+323+" "+(65));
paper.path("M "+308+" "+(95)+" L "+323+" "+(95));
paper.text(335,(65), 'Show all targets').attr({'font-size':12, 'text-anchor':'start'})
paper.text(335,(95), 'Show significant targets').attr({'font-size':12, 'text-anchor':'start'})

paper.rect(308,150,15,150,3)

paper.text(283, 225, 'Time (h)').attr({'font-size':12}).transform('r270')

paper.text(183, 225, 'Dose (\u03BCM)').attr({'font-size':14})//.transform('r270')


paper.rect(300,60,30,10,4).attr({fill:'#dddddd',stroke:'#3b4449','stroke-width': 5});

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(100, 100, 10);

// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#000");

circle.draggable();