aresnick/orbit.html

## orbit.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
    .point {
        /* Make our points circles */
        border-radius: 50%;
        /* Position them absolutely so that we can move them around */
        position: absolute;
        /* Use `transform` so that when we position the divs, their center (instead of their top and left) are at the point we want */
        transform: translateX(-50%) translateY(-50%);
        background-color: lightblue;
        transition: 125ms;
    }
    </style>
</head>

<body>
    <script>
    var Point = function(x, y) { // A function to make a new point
        var self = this; // Store the pointer to this in a convenient variable which doesn't get re-bound— You can read more about `this` at http://www.digital-web.com/articles/scope_in_javascript/

        // Store our coordinates
        self.x = x;
        self.y = y;


        // What's the biggest we want points to be?  We store it in var (and not self) because we don't want other people accessing and changing maxRadius
        var maxRadius = 10;

        // Set our radius to a random number between 0 and maxRadius
        self.radius = Math.floor(Math.random() * maxRadius);

        // Make a div and style it
        var div = document.createElement('div');
        div.classList.add('point');
        div.style.width = 2 * self.radius + 'px';
        div.style.height = 2 * self.radius + 'px';
        div.style.opacity = 1; // We set the opacity inline because we eventually want to be able to change it inline
        self.div = div; // Store our styled div in self

        self.moveTo = function(newX, newY) { // A function to move our point
            // Update our x and y
            self.x = newX;
            self.y = newY;

            // Actually move our div— Notice that we don't subtract our radius here because our CSS transform/translate rule is doing that for us
            self.div.style.left = self.x + 'px';
            self.div.style.top = self.y + 'px';
        };

        // Store how far away we want divs to orbit from our mouse
        self.orbitRadius = 50;
        self.orbit = function(newX, newY) { // A function to run to choose a random distance between 0 and orbitRadius to move away from the point
            var orbitX = newX - self.orbitRadius + Math.random() * 2*self.orbitRadius;
            var orbitY = newY - self.orbitRadius + Math.random() * 2*self.orbitRadius;
            self.moveTo(orbitX, orbitY);
        };

        document.addEventListener('mousemove', function(event) { // Whenever we move our mouse
            // Orbit to that point
            self.orbit(event.x, event.y);
        });

        document.addEventListener('keydown', function(event) { // Whenever we press keydown
            if (event.keyIdentifier == 'Up') { // If we pressed the up arrow
                self.orbitRadius *= 1.1; // Increase our orbit radius by 10%
                self.orbit(self.x, self.y); // And orbit
            } else if (event.keyIdentifier == 'Down') { // If we pressed the down arrow
                self.orbitRadius *= 0.9; // Decrease our orbit radius by 10%
                self.orbit(self.x, self.y); // And orbit
            }
        });

        self.shake = function() { // A function to shake our point a bit
            var shakeRadius = 5; // How far away from the point do we want to shake?

            // Choose a random number between -shakeRadius and shakeRadius
            var xNudge = -1 * shakeRadius + Math.random() * 2 * shakeRadius;
            var yNudge = -1 * shakeRadius + Math.random() * 2 * shakeRadius;

            // And nudge our point by that much
            self.moveTo(self.x + xNudge, self.y + yNudge);
        };

        self.randomizeColor = function() { // A function to randomize our color
            // Choose three, random numbers between 0 and 255
            var red = Math.floor(Math.random() * 255);
            var green = Math.floor(Math.random() * 255);
            var blue = Math.floor(Math.random() * 255);

            // And create a string like `rgb(R,G,B)` using https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join
            var newBg = 'rgb(' + [red, green, blue].join(',') + ')';
            self.div.style.backgroundColor = newBg;
        };

        // A loop which shakes our point around every 125ms
        self.shakeLoop = setInterval(self.shake, 125);

        // A loop which randomizes our color every 125ms;
        self.colorLoop = setInterval(self.randomizeColor, 125);


        ////////////////////////////////////////////////////////////////
        //// Actually render the point and put it in our page
        document.body.appendChild(self.div); // and put it in our page
        // Now that we have our x and y and know how to move, move there
        self.moveTo(self.x, self.y);
        self.randomizeColor();
    };

    var points = []; // An empty array to store our points
    for (var i = 0; i < 100; i++) { // 100 times
        points.push(new Point(0, 0)); // Make a new point starting at 0,0
    }

    document.addEventListener('keydown', function(event) { // Whenever we press a key
        if (event.keyIdentifier == 'U+0020') { // If the key is the space bar
            points.forEach(function(point) { // Go through every point in the point array
                clearInterval(point.colorLoop); // Stop our color loop timer
                point.div.style.backgroundColor = 'black'; // And set the color to black
            });
        };
    });

    document.addEventListener('dblclick', function(event) { // When we double click
        points.forEach(function(point) { // Go through every point
            clearInterval(point.shakeLoop); // And turn off its shaking
        });
    });
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<style>
	.point {
	/* Make our points circles */
	border-radius: 50%;
	/* Position them absolutely so that we can move them around */
	position: absolute;
	/* Use `transform` so that when we position the divs, their center (instead of their top and left) are at the point we want */
	transform: translateX(-50%) translateY(-50%);
	background-color: lightblue;
	transition: 125ms;
	}
	</style>
	</head>

	<body>
	<script>
	var Point = function(x, y) { // A function to make a new point
	var self = this; // Store the pointer to this in a convenient variable which doesn't get re-bound— You can read more about `this` at http://www.digital-web.com/articles/scope_in_javascript/

	// Store our coordinates
	self.x = x;
	self.y = y;


	// What's the biggest we want points to be? We store it in var (and not self) because we don't want other people accessing and changing maxRadius
	var maxRadius = 10;

	// Set our radius to a random number between 0 and maxRadius
	self.radius = Math.floor(Math.random() * maxRadius);

	// Make a div and style it
	var div = document.createElement('div');
	div.classList.add('point');
	div.style.width = 2 * self.radius + 'px';
	div.style.height = 2 * self.radius + 'px';
	div.style.opacity = 1; // We set the opacity inline because we eventually want to be able to change it inline
	self.div = div; // Store our styled div in self

	self.moveTo = function(newX, newY) { // A function to move our point
	// Update our x and y
	self.x = newX;
	self.y = newY;

	// Actually move our div— Notice that we don't subtract our radius here because our CSS transform/translate rule is doing that for us
	self.div.style.left = self.x + 'px';
	self.div.style.top = self.y + 'px';
	};

	// Store how far away we want divs to orbit from our mouse
	self.orbitRadius = 50;
	self.orbit = function(newX, newY) { // A function to run to choose a random distance between 0 and orbitRadius to move away from the point
	var orbitX = newX - self.orbitRadius + Math.random() * 2*self.orbitRadius;
	var orbitY = newY - self.orbitRadius + Math.random() * 2*self.orbitRadius;
	self.moveTo(orbitX, orbitY);
	};

	document.addEventListener('mousemove', function(event) { // Whenever we move our mouse
	// Orbit to that point
	self.orbit(event.x, event.y);
	});

	document.addEventListener('keydown', function(event) { // Whenever we press keydown
	if (event.keyIdentifier == 'Up') { // If we pressed the up arrow
	self.orbitRadius *= 1.1; // Increase our orbit radius by 10%
	self.orbit(self.x, self.y); // And orbit
	} else if (event.keyIdentifier == 'Down') { // If we pressed the down arrow
	self.orbitRadius *= 0.9; // Decrease our orbit radius by 10%
	self.orbit(self.x, self.y); // And orbit
	}
	});

	self.shake = function() { // A function to shake our point a bit
	var shakeRadius = 5; // How far away from the point do we want to shake?

	// Choose a random number between -shakeRadius and shakeRadius
	var xNudge = -1 * shakeRadius + Math.random() * 2 * shakeRadius;
	var yNudge = -1 * shakeRadius + Math.random() * 2 * shakeRadius;

	// And nudge our point by that much
	self.moveTo(self.x + xNudge, self.y + yNudge);
	};

	self.randomizeColor = function() { // A function to randomize our color
	// Choose three, random numbers between 0 and 255
	var red = Math.floor(Math.random() * 255);
	var green = Math.floor(Math.random() * 255);
	var blue = Math.floor(Math.random() * 255);

	// And create a string like `rgb(R,G,B)` using https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join
	var newBg = 'rgb(' + [red, green, blue].join(',') + ')';
	self.div.style.backgroundColor = newBg;
	};

	// A loop which shakes our point around every 125ms
	self.shakeLoop = setInterval(self.shake, 125);

	// A loop which randomizes our color every 125ms;
	self.colorLoop = setInterval(self.randomizeColor, 125);


	////////////////////////////////////////////////////////////////
	//// Actually render the point and put it in our page
	document.body.appendChild(self.div); // and put it in our page
	// Now that we have our x and y and know how to move, move there
	self.moveTo(self.x, self.y);
	self.randomizeColor();
	};

	var points = []; // An empty array to store our points
	for (var i = 0; i < 100; i++) { // 100 times
	points.push(new Point(0, 0)); // Make a new point starting at 0,0
	}

	document.addEventListener('keydown', function(event) { // Whenever we press a key
	if (event.keyIdentifier == 'U+0020') { // If the key is the space bar
	points.forEach(function(point) { // Go through every point in the point array
	clearInterval(point.colorLoop); // Stop our color loop timer
	point.div.style.backgroundColor = 'black'; // And set the color to black
	});
	};
	});

	document.addEventListener('dblclick', function(event) { // When we double click
	points.forEach(function(point) { // Go through every point
	clearInterval(point.shakeLoop); // And turn off its shaking
	});
	});
	</script>
	</body>

	</html>