KevinGutowski/index.html

## index.html
<head>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="script.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
    <svg width="1050" height="1500"></svg>

</body>


## script.js
window.onload = function() {
    start();
}

function start() {
    var svg = d3.select("svg");
    var initialWidth;
    var initialHeight;
    function getRectArray(scale, rotateAngle) {
        var rect = {
            centerX: +svg.attr("width")/2,
            centerY: +svg.attr("height")/2,
            width: +svg.attr("width")/1.3 * scale,
            height: +svg.attr("width")/1.3 * scale,
            cornerRadius: 0,
            strokeWidth: 1,
            rotateAngle: 0,
            fill: 'none',
            stroke: 'rgba(255,255,255,1)'
        }

        initialHeight = +svg.attr("width")/1.3 * scale;
        initialWidth = +svg.attr("width")/1.3 * scale;

        // Draw Params
        var scaleWidth = scale;
        var scaleHeight = scale;

        var scaleStrokes = false;

        var moveX = 0;
        var moveY = 0;

        var rotateAngle = rotateAngle;

        var rectArray = [];
        var numCopies = 60;
        var scaledOrConstant = false;

        for (var i=0; i < numCopies; i++) {
            if (scaleStrokes) {
                    scaledOrConstant = rect.strokeWidth * Math.pow((scaleWidth + scaleHeight) / 2, i);
                } else {
                    scaledOrConstant = rect.strokeWidth;
            }

            var tempRect = {
                centerX: rect.centerX + (moveX * i),
                centerY: rect.centerY + (moveY * i),
                width: rect.width * Math.pow(scaleWidth, i),
                height: rect.height * Math.pow(scaleHeight, i),
                cornerRadius: rect.cornerRadius,
                strokeWidth: scaledOrConstant,
                rotateAngle: rotateAngle * i,
                scale: scale,
                fill: rect.fill,
                stroke: rect.stroke
            };
            rectArray.push(tempRect);
        }

        return rectArray;
    }

    function update(data) {
        var t = d3.transition().duration(4000);

        //Join data with elements
        var rect = svg.selectAll('rect')
            .data(data);

        // Exit old elements
        rect.exit()
                .attr('class',  'exit')
            .transition(t)
                .attr('stroke-width', 1e-6)
                .remove();

        // Update old elements
        rect.attr('class', 'update')
            .transition(t)
                .attr('width', function(d) { return d.width})
                .attr('height', function(d) { return d.height})
                .attr("x", function(d) {
                    var dX = (1 - d.scale) * d.width / 2;
                    var x = (d.centerX / 4) + ((initialWidth - d.width) / 2) + dX - 10;
                    return x;
                })
                .attr('y', function(d) {
                    var dY = (1 - d.scale) * d.height / 2;
                    var y = (d.centerY / 4) + ((initialHeight - d.height) / 2) + dY + 230;
                    return y;
                })
                .attr('style', function(d) { return "transform-origin: center; transform: rotate(" + d.rotateAngle + "deg);"})

        // Enter new elements
        rect.enter().append('rect')
                .attr('class', 'enter')
                .attr("x", function(d) {
                    var dX = (1 - d.scale) * d.width / 2;
                    var x = (d.centerX / 4) + ((initialWidth - d.width) / 2) + dX - 10;
                    return x;
                })
                .attr('y', function(d) {
                    var dY = (1 - d.scale) * d.height / 2;
                    var y = (d.centerY / 4) + ((initialHeight - d.height) / 2) + dY + 230;
                    return y;
                })
                .attr('fill', function(d) { return d.fill})
                .attr('stroke', function(d) { return d.stroke})
                .attr('stroke-width', 1e-6)
                .attr('style', function(d) { return "transform-origin: center; transform: rotate(" + d.rotateAngle + "deg);"})
                .attr('width', function(d) { return d.width})
                .attr('height', function(d) { return d.height})
            .transition(t)
                .attr('stroke-width', function(d) {return d.strokeWidth});
    }

    update(getRectArray(.92, 5));
    var previousAngle = 5;
    var ratio = 1.61803398875;
    d3.interval(function() {
        // var convert = d3.scaleLinear()
        //     .domain([0,1])
        //     .range([.985,1])
        // var scale = convert(Math.random()*Math.random()*ratio);
        // var newAngle = ( Math.random() - .5 )* 33 * ratio;
        // var rotateAngle = newAngle + (previousAngle*10000) / 10001;
        // previousAngle = newAngle;
        update(getRectArray(.99, -4));
    }, 4000);

}

## style.css
body {
    margin: 0;
    background-color: black;
    overflow: hidden;
}
	<head>
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="script.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>

	<body>
	<svg width="1050" height="1500"></svg>

	</body>
	window.onload = function() {
	start();
	}

	function start() {
	var svg = d3.select("svg");
	var initialWidth;
	var initialHeight;
	function getRectArray(scale, rotateAngle) {
	var rect = {
	centerX: +svg.attr("width")/2,
	centerY: +svg.attr("height")/2,
	width: +svg.attr("width")/1.3 * scale,
	height: +svg.attr("width")/1.3 * scale,
	cornerRadius: 0,
	strokeWidth: 1,
	rotateAngle: 0,
	fill: 'none',
	stroke: 'rgba(255,255,255,1)'
	}

	initialHeight = +svg.attr("width")/1.3 * scale;
	initialWidth = +svg.attr("width")/1.3 * scale;

	// Draw Params
	var scaleWidth = scale;
	var scaleHeight = scale;

	var scaleStrokes = false;

	var moveX = 0;
	var moveY = 0;

	var rotateAngle = rotateAngle;

	var rectArray = [];
	var numCopies = 60;
	var scaledOrConstant = false;

	for (var i=0; i < numCopies; i++) {
	if (scaleStrokes) {
	scaledOrConstant = rect.strokeWidth * Math.pow((scaleWidth + scaleHeight) / 2, i);
	} else {
	scaledOrConstant = rect.strokeWidth;
	}

	var tempRect = {
	centerX: rect.centerX + (moveX * i),
	centerY: rect.centerY + (moveY * i),
	width: rect.width * Math.pow(scaleWidth, i),
	height: rect.height * Math.pow(scaleHeight, i),
	cornerRadius: rect.cornerRadius,
	strokeWidth: scaledOrConstant,
	rotateAngle: rotateAngle * i,
	scale: scale,
	fill: rect.fill,
	stroke: rect.stroke
	};
	rectArray.push(tempRect);
	}

	return rectArray;
	}

	function update(data) {
	var t = d3.transition().duration(4000);

	//Join data with elements
	var rect = svg.selectAll('rect')
	.data(data);

	// Exit old elements
	rect.exit()
	.attr('class', 'exit')
	.transition(t)
	.attr('stroke-width', 1e-6)
	.remove();

	// Update old elements
	rect.attr('class', 'update')
	.transition(t)
	.attr('width', function(d) { return d.width})
	.attr('height', function(d) { return d.height})
	.attr("x", function(d) {
	var dX = (1 - d.scale) * d.width / 2;
	var x = (d.centerX / 4) + ((initialWidth - d.width) / 2) + dX - 10;
	return x;
	})
	.attr('y', function(d) {
	var dY = (1 - d.scale) * d.height / 2;
	var y = (d.centerY / 4) + ((initialHeight - d.height) / 2) + dY + 230;
	return y;
	})
	.attr('style', function(d) { return "transform-origin: center; transform: rotate(" + d.rotateAngle + "deg);"})

	// Enter new elements
	rect.enter().append('rect')
	.attr('class', 'enter')
	.attr("x", function(d) {
	var dX = (1 - d.scale) * d.width / 2;
	var x = (d.centerX / 4) + ((initialWidth - d.width) / 2) + dX - 10;
	return x;
	})
	.attr('y', function(d) {
	var dY = (1 - d.scale) * d.height / 2;
	var y = (d.centerY / 4) + ((initialHeight - d.height) / 2) + dY + 230;
	return y;
	})
	.attr('fill', function(d) { return d.fill})
	.attr('stroke', function(d) { return d.stroke})
	.attr('stroke-width', 1e-6)
	.attr('style', function(d) { return "transform-origin: center; transform: rotate(" + d.rotateAngle + "deg);"})
	.attr('width', function(d) { return d.width})
	.attr('height', function(d) { return d.height})
	.transition(t)
	.attr('stroke-width', function(d) {return d.strokeWidth});
	}

	update(getRectArray(.92, 5));
	var previousAngle = 5;
	var ratio = 1.61803398875;
	d3.interval(function() {
	// var convert = d3.scaleLinear()
	// .domain([0,1])
	// .range([.985,1])
	// var scale = convert(Math.random()Math.random()ratio);
	// var newAngle = ( Math.random() - .5 )* 33 * ratio;
	// var rotateAngle = newAngle + (previousAngle*10000) / 10001;
	// previousAngle = newAngle;
	update(getRectArray(.99, -4));
	}, 4000);

	}