a-r-d/rand.html

## rand.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" value="IE=9">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <link href='http://fonts.googleapis.com/css?family=Della+Respira' rel='stylesheet' type='text/css'>
        <!-- font-family: 'Della Respira', serif;-->

        <link href='http://fonts.googleapis.com/css?family=Trocchi' rel='stylesheet' type='text/css'>
        <!-- font: font-family: 'Trocchi', serif;  -->

        <link href='http://fonts.googleapis.com/css?family=Lovers+Quarrel' rel='stylesheet' type='text/css'>
        <!-- font-family: 'Lovers Quarrel', cursive; -->

        <link href='http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here' rel='stylesheet' type='text/css'>
        <!-- font-family: 'Just Me Again Down Here', cursive; -->

        <style>
        /* a google font: */
        /*font-family: 'Press Start 2P', cursive; */

            body {
                padding: 0px;
                margin: 0px;
                background-color: black;
                color: green;
                width: 100%;
                height: 100%;
                }

                #screenArea {
                    text-align: center;
                    margin-left: auto;
                    margin-right: auto;
                    width: 75%;
                    font-size: 20px;
                    color: green;
                    text-wrap: unrestricted;
                    }

                .point {
                    font-size: 15px;
                    position: absolute;
                    }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>
            console.log("begin scripts");
            // normal functions

            clrArray =     ['#33CCFF', '#3366FF', '#33FF66', '#66FF33', '#00FF00',
                        '#00FF80', '#FFFF00', '#7AFF7A', '#FF8000'];

            hexArr =     ['0', '1', '2', '3', '4', '5', '6', '7', '8',
                        '9', 'a', 'b', 'c', 'd', 'e', 'f'];

            fontArr = ["'Lovers Quarrel', cursive", "'Della Respira', serif",
                        "'Lovers Quarrel', cursive", "'Just Me Again Down Here', cursive"];

            xArray = [1];
            yArray = [1];
            idArray = ['pt0'];

            // test this by making a diagonal of letters.
            function startMatrix(width, height) {
                var totalIters = 0;

                var timer = setInterval( function() {
                    //font size and charachter
                    var fSize = Math.round(Math.random() * 100) + 1;
                    var rand = Math.round(Math.random() * 255);
                    var toAdd = String.fromCharCode(rand);

                    // font family:
                    var fFam = Math.round(Math.random() * 3);
                    var newFont = fontArr[fFam];

                    //make the new points from a circle
                    var hypSeed = Math.random() * 2 * 3.14159;
                    var hypMax = Math.sqrt((width / 2)*(width / 2) + (height / 2)*(height / 2));
                    var hyp = Math.cos(hypSeed)*hypMax + hypMax;
                    var angle = Math.random() * 2 * 3.14159;

                    // generate x and y from the triangle
                    var newX = Math.round(Math.cos(angle)*hyp + (width / 2));
                    var newY = Math.round(Math.sin(angle)*hyp + (height / 2));

                    // add new x and y coordinates
                    xArray.push((newX));
                    yArray.push((newY));

                    var newClr = "#";
                    for(var i=0; i < 6; i++) {
                        var hex = Math.round(Math.random() * (hexArr.length - 1));
                        newClr = newClr + hexArr[hex];
                        }

                    var ptString = "<span class='point' id='" + idArray[totalIters]
                                    + "'>" + toAdd + "</span>";
                    $('#screenArea').append(ptString)
                    var ptID = "#" + idArray[totalIters];
                    $(ptID).css({
                                    top: (String(yArray[totalIters]) + "px"),
                                    left: (String(xArray[totalIters]) + "px"),
                                    color: newClr,
                                    fontSize: (String(fSize) + "px"),
                                    fontFamily: newFont
                                });

                    console.log("xpos:" + xArray[totalIters] + " ypos:" + yArray[totalIters]);
                    idArray.push(("pt" + (totalIters + 1)));
                    totalIters++;

                    /*
                    if(totalIters > 50) {
                        console.log("remove elem");
                        //clearInterval(timer);

                        // erase old elements here:
                        var toErase = 51 - totalIters;
                        //$(idArray[toErase]).remove();
                        $(idArray[toErase]).hide();
                        }
                        */
                    }, 20);


                    //startMatrix(width, height);
                } // end main looper

        /******************************************************************/

            // ready wrapper
            $(document).ready( function() {
                console.log("ready loaded");
                var width = $(window).width();
                var height = $(window).height();
                startMatrix(width, height);
                });
        </script>
    </head>


    <body>
        <code>
        <div id='screenArea'>
        </div>
        </code>
    </body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" value="IE=9">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link href='http://fonts.googleapis.com/css?family=Della+Respira' rel='stylesheet' type='text/css'>
	<!-- font-family: 'Della Respira', serif;-->

	<link href='http://fonts.googleapis.com/css?family=Trocchi' rel='stylesheet' type='text/css'>
	<!-- font: font-family: 'Trocchi', serif; -->

	<link href='http://fonts.googleapis.com/css?family=Lovers+Quarrel' rel='stylesheet' type='text/css'>
	<!-- font-family: 'Lovers Quarrel', cursive; -->

	<link href='http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here' rel='stylesheet' type='text/css'>
	<!-- font-family: 'Just Me Again Down Here', cursive; -->

	<style>
	/* a google font: */
	/font-family: 'Press Start 2P', cursive; /

	body {
	padding: 0px;
	margin: 0px;
	background-color: black;
	color: green;
	width: 100%;
	height: 100%;
	}

	#screenArea {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 75%;
	font-size: 20px;
	color: green;
	text-wrap: unrestricted;
	}

	.point {
	font-size: 15px;
	position: absolute;
	}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script>
	console.log("begin scripts");
	// normal functions

	clrArray = ['#33CCFF', '#3366FF', '#33FF66', '#66FF33', '#00FF00',
	'#00FF80', '#FFFF00', '#7AFF7A', '#FF8000'];

	hexArr = ['0', '1', '2', '3', '4', '5', '6', '7', '8',
	'9', 'a', 'b', 'c', 'd', 'e', 'f'];

	fontArr = ["'Lovers Quarrel', cursive", "'Della Respira', serif",
	"'Lovers Quarrel', cursive", "'Just Me Again Down Here', cursive"];

	xArray = [1];
	yArray = [1];
	idArray = ['pt0'];

	// test this by making a diagonal of letters.
	function startMatrix(width, height) {
	var totalIters = 0;

	var timer = setInterval( function() {
	//font size and charachter
	var fSize = Math.round(Math.random() * 100) + 1;
	var rand = Math.round(Math.random() * 255);
	var toAdd = String.fromCharCode(rand);

	// font family:
	var fFam = Math.round(Math.random() * 3);
	var newFont = fontArr[fFam];

	//make the new points from a circle
	var hypSeed = Math.random() * 2 * 3.14159;
	var hypMax = Math.sqrt((width / 2)(width / 2) + (height / 2)(height / 2));
	var hyp = Math.cos(hypSeed)*hypMax + hypMax;
	var angle = Math.random() * 2 * 3.14159;

	// generate x and y from the triangle
	var newX = Math.round(Math.cos(angle)*hyp + (width / 2));
	var newY = Math.round(Math.sin(angle)*hyp + (height / 2));

	// add new x and y coordinates
	xArray.push((newX));
	yArray.push((newY));

	var newClr = "#";
	for(var i=0; i < 6; i++) {
	var hex = Math.round(Math.random() * (hexArr.length - 1));
	newClr = newClr + hexArr[hex];
	}

	var ptString = "<span class='point' id='" + idArray[totalIters]
	+ "'>" + toAdd + "</span>";
	$('#screenArea').append(ptString)
	var ptID = "#" + idArray[totalIters];
	$(ptID).css({
	top: (String(yArray[totalIters]) + "px"),
	left: (String(xArray[totalIters]) + "px"),
	color: newClr,
	fontSize: (String(fSize) + "px"),
	fontFamily: newFont
	});

	console.log("xpos:" + xArray[totalIters] + " ypos:" + yArray[totalIters]);
	idArray.push(("pt" + (totalIters + 1)));
	totalIters++;

	/*
	if(totalIters > 50) {
	console.log("remove elem");
	//clearInterval(timer);

	// erase old elements here:
	var toErase = 51 - totalIters;
	//$(idArray[toErase]).remove();
	$(idArray[toErase]).hide();
	}
	*/
	}, 20);


	//startMatrix(width, height);
	} // end main looper

	/******************************************************************/

	// ready wrapper
	$(document).ready( function() {
	console.log("ready loaded");
	var width = $(window).width();
	var height = $(window).height();
	startMatrix(width, height);
	});
	</script>
	</head>


	<body>
	<code>
	<div id='screenArea'>
	</div>
	</code>
	</body>
	</html>