samrahimi/godfunction.html

## godfunction.html
<html>
<body>
<style>
/*
 * This code will run as is in desktop versions of Chrome. Download and enjoy.
 * Inspired by truth and beauty ;)
 */
body {
  background-color:black;
}
.instance {
  stroke-width:0.2;
  opacity:1
}
.container, .container svg {width:1400px; height:600px;}
.inverse svg{transform:rotate(180deg); filter:invert(100%)}
</style>

<div class="container">
    <svg id="yin">
        <path class="instance" id="u1" d="" style="stroke:green" />
        <path class="instance" id="u2" d="" style="stroke:blue" />
        <path class="instance" id="u3" d="" style="stroke:red" />
    </svg>
</div>

<div class="container inverse" style="margin-top:-25px;">
    <svg id="yang">

    </svg>
</div>

<script>
var flip = function(qubit) {
    return (qubit[0] ? [false, true] : [true, false])
}

//This is why you shouldn't give a fuck about the outcome of your decisions...
//and also why you should ;)
var resolve = function(qubit) {
    //randomly flip a qubit as if collapsing the wave function
    if (Math.random() < 0.5)
        return qubit
    else
        return flip(qubit)
}
var getPathSegment = function(cmd, x, y) {
    return cmd+x.toString()+","+y.toString()+" "
}

//Rendering options
var opts = {
     maxLayers: 15,
     baseLength: 20,
     cTrue: 1.2,
     cFalse: 0.8,
     angle: 20,
     direction: "up"
}

//Globals... Someone else can refactor this, I'm going to bed now
var rootValue = [true, false]
var tree= {}
var svgPath = ""

var init=function() {
   tree.root= {value: resolve(rootValue), coords:{x: 700, y: 600, distance: opts.baseLength}}
   svgPath= getPathSegment("M", tree.root.coords.x, tree.root.coords.y)
}

//Gets the co-ordinates for a child node, based on its attributes and those of its parents
var getCoords = function(parentCoords, direction, outcome) {
    //The length of the line to draw
    var newDistance = parentCoords.distance * (outcome[0] ? opts.cTrue: opts.cFalse)

    //dX and dY from current position
    var radians = opts.angle * (Math.PI/180)

    var dY = newDistance * Math.sin(radians)
    var dX = Math.sqrt(Math.pow(newDistance, 2) - Math.pow(dY, 2))

    if (direction == "left")
        dX = dX * -1
    if (opts.direction == "up")
        dY = dY * -1

    return {x: parentCoords.x + dX,
            y: parentCoords.y + dY,
            distance: newDistance }
}


//Initialize the SVG path string that is going to draw the fractal, using a straight line for the trunk
var generateFractal= function (node, currentLayer) {
    //console.log("layer: "+currentLayer)
    if (currentLayer >= opts.maxLayers)
        return

    //Resolve the node's value and create the child nodes
    var outcome = resolve(node.value)

    node.left = {value: outcome,
                 coords: getCoords(node.coords, "left", outcome) }

    node.right = {value: flip(outcome),
                  coords: getCoords(node.coords, "right", flip(outcome))}

    //Draw the lines
    svgPath += getPathSegment("M", node.coords.x, node.coords.y)
    svgPath += getPathSegment("L", node.left.coords.x, node.left.coords.y)
    svgPath += getPathSegment("M", node.coords.x, node.coords.y)
    svgPath += getPathSegment("L", node.right.coords.x, node.right.coords.y)

    //Generate the next layer of the tree
    generateFractal(node.left, currentLayer+1)
    generateFractal(node.right, currentLayer+1)
 }

var render = function(targetElement) {
        init()
        generateFractal(tree.root, 0)
        //res.end(JSON.stringify(tree, null, 4))
        document.querySelector(targetElement).setAttribute("d", svgPath)
}

for (var i = 1; i<= 3; i++ ) {
    render("#u"+i)
}

document.querySelector("#yang").innerHTML = document.querySelector("#yin").innerHTML;

</script>
</body>
</html>
	<html>
	<body>
	<style>
	/*
	* This code will run as is in desktop versions of Chrome. Download and enjoy.
	* Inspired by truth and beauty ;)
	*/
	body {
	background-color:black;
	}
	.instance {
	stroke-width:0.2;
	opacity:1
	}
	.container, .container svg {width:1400px; height:600px;}
	.inverse svg{transform:rotate(180deg); filter:invert(100%)}
	</style>

	<div class="container">
	<svg id="yin">
	<path class="instance" id="u1" d="" style="stroke:green" />
	<path class="instance" id="u2" d="" style="stroke:blue" />
	<path class="instance" id="u3" d="" style="stroke:red" />
	</svg>
	</div>

	<div class="container inverse" style="margin-top:-25px;">
	<svg id="yang">

	</svg>
	</div>

	<script>
	var flip = function(qubit) {
	return (qubit[0] ? [false, true] : [true, false])
	}

	//This is why you shouldn't give a fuck about the outcome of your decisions...
	//and also why you should ;)
	var resolve = function(qubit) {
	//randomly flip a qubit as if collapsing the wave function
	if (Math.random() < 0.5)
	return qubit
	else
	return flip(qubit)
	}
	var getPathSegment = function(cmd, x, y) {
	return cmd+x.toString()+","+y.toString()+" "
	}

	//Rendering options
	var opts = {
	maxLayers: 15,
	baseLength: 20,
	cTrue: 1.2,
	cFalse: 0.8,
	angle: 20,
	direction: "up"
	}

	//Globals... Someone else can refactor this, I'm going to bed now
	var rootValue = [true, false]
	var tree= {}
	var svgPath = ""

	var init=function() {
	tree.root= {value: resolve(rootValue), coords:{x: 700, y: 600, distance: opts.baseLength}}
	svgPath= getPathSegment("M", tree.root.coords.x, tree.root.coords.y)
	}

	//Gets the co-ordinates for a child node, based on its attributes and those of its parents
	var getCoords = function(parentCoords, direction, outcome) {
	//The length of the line to draw
	var newDistance = parentCoords.distance * (outcome[0] ? opts.cTrue: opts.cFalse)

	//dX and dY from current position
	var radians = opts.angle * (Math.PI/180)

	var dY = newDistance * Math.sin(radians)
	var dX = Math.sqrt(Math.pow(newDistance, 2) - Math.pow(dY, 2))

	if (direction == "left")
	dX = dX * -1
	if (opts.direction == "up")
	dY = dY * -1

	return {x: parentCoords.x + dX,
	y: parentCoords.y + dY,
	distance: newDistance }
	}


	//Initialize the SVG path string that is going to draw the fractal, using a straight line for the trunk
	var generateFractal= function (node, currentLayer) {
	//console.log("layer: "+currentLayer)
	if (currentLayer >= opts.maxLayers)
	return

	//Resolve the node's value and create the child nodes
	var outcome = resolve(node.value)

	node.left = {value: outcome,
	coords: getCoords(node.coords, "left", outcome) }

	node.right = {value: flip(outcome),
	coords: getCoords(node.coords, "right", flip(outcome))}

	//Draw the lines
	svgPath += getPathSegment("M", node.coords.x, node.coords.y)
	svgPath += getPathSegment("L", node.left.coords.x, node.left.coords.y)
	svgPath += getPathSegment("M", node.coords.x, node.coords.y)
	svgPath += getPathSegment("L", node.right.coords.x, node.right.coords.y)

	//Generate the next layer of the tree
	generateFractal(node.left, currentLayer+1)
	generateFractal(node.right, currentLayer+1)
	}

	var render = function(targetElement) {
	init()
	generateFractal(tree.root, 0)
	//res.end(JSON.stringify(tree, null, 4))
	document.querySelector(targetElement).setAttribute("d", svgPath)
	}

	for (var i = 1; i<= 3; i++ ) {
	render("#u"+i)
	}

	document.querySelector("#yang").innerHTML = document.querySelector("#yin").innerHTML;

	</script>
	</body>
	</html>