Created
April 14, 2016 17:31
-
-
Save aresnick/480a98f55218defcc7453db58eb771d8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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'; | |
}; | |
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; | |
}; | |
self.fade = function() { // A function to fade our point a bit | |
self.div.style.opacity *= 0.66; // Reduce our opacity by 33% | |
if (self.div.style.opacity < 0.05) { // If our opacity drops below 0.05 | |
clearInterval(self.fadeLoop); // Stop fading | |
self.div.remove(); // And remove the div from the page (to prevent lag from having too many divs hanging around) | |
} | |
} | |
// In these loops, we've chosen 125ms as our period since we set our CSS transition-duration to that. We could use different numbers, but we'd then want to make sure the CSS transition duration was different for different properties | |
self.shakeLoop = setInterval(self.shake, 125); | |
self.colorLoop = setInterval(self.randomizeColor, 125); | |
self.fadeLoop = setInterval(self.fade, 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); | |
}; | |
document.addEventListener('mousemove', function(event) { // Whenever our mouse moves | |
new Point(event.x, event.y); // Make a new point | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment