Skip to content

Instantly share code, notes, and snippets.

@roryashfordbentley

roryashfordbentley/dots.js

Last active November 12, 2015 09:54
Show Gist options
  • Save roryashfordbentley/81afd8ffa004769e247e to your computer and use it in GitHub Desktop.
Save roryashfordbentley/81afd8ffa004769e247e to your computer and use it in GitHub Desktop.
Download ZIP
First attempt at OOJS
Raw
dots.js
/**
* dots.js
* Create dots for the explosion animation
* on the homepage
*/
/**
* generates random dots within a circular outline
*
* @param {obj} options options obj overrides this.defaults below
*/
var CreateDots = function (options) {
// Default options
this.defaults = {
element_id: "animation_circle",
inner_radius: 230,
outer_radius: 300,
dot_size_min: 2,
dot_size_max: 2.5,
number_of_dots: 100,
gradients: {
light: "r(0.33, 0.33, 0.5)rgba(239,239,239,1)-rgba(169,169,169,1)",
medium: "r(0.33, 0.33, 0.5)rgba(214,214,214,1)-rgba(134,134,134,1)",
dark: "r(0.33, 0.33, 0.5)rgba(170,170,170,1)-rgba(93,93,93,1)"
}
};
// Use defaults if options are not supplied
if(typeof options === "undefined") {
this.options = this.defaults;
} else {
this.options = options;
for (var option in this.defaults){
if (this.defaults.hasOwnProperty(option) && !this.options.hasOwnProperty(option)){
options[option] = this.defaults[option];
}
}
}
this.element_id = document.getElementById(this.options.element_id);
this.canvas_width = this.element_id.offsetWidth;
this.canvas_height = this.element_id.offsetHeight;
this.center_x = this.canvas_width / 2;
this.center_y = this.canvas_height / 2;
this.inner_diameter = this.options.inner_radius*2;
this.outer_diameter = this.options.outer_radius*2;
this.s = Snap("#animation_circle").attr({viewBox: "0 0 " + this.canvas_width + " " + this.canvas_height});
/**
* selects a gradient from an object literal
*
* @return {string} the return value is a string containing css gradient values
*/
function getRandomGradient() {
var keys = Object.keys(this.options.gradients);
return this.options.gradients[keys[ keys.length * Math.random() << 0]];
}
/**
* Determine if an x/y coordinate is outside of a circle
*
* @param {int} x X position of dot
* @param {int} y Y position of dot
* @param {int} radius Radius of circle area
* @return {Boolean} Returns true if dot is within radus
*/
function isOutside(x,y,radius){
if( Math.pow((x - this.center_x), 2) + Math.pow((y - this.center_y), 2) > Math.pow(radius,2) ){
return true;
}
return false;
}
/**
* Determine if an x/y coordinate is inside of a circle
*
* @param {int} x X position of dot
* @param {int} y Y position of dot
* @param {int} radius Radius of circle area
* @return {Boolean} Returns true if dot is within radus
*/
function isInside(x,y,radius){
if( Math.pow((x - this.center_x), 2) + Math.pow((y - this.center_y), 2) < Math.pow(radius,2) ){
return true;
}
return false;
}
/**
* returns a random number between two integers
*
* @param {int} min the smallest number of the range
* @param {int} max the largest number of the range
* @return {int} a random integer between the min and max values
*/
function randomPos(min,max){
return Math.floor(Math.random() * (max - min)) + min;
}
/**
* creates a single dot using svg
*
* @param {int} min_radius the smallest size a dot can be
* @param {int} max_radius the largest size a dot can be
*/
function makeDot(min_radius,max_radius) {
var radius = Math.floor(Math.random()*(max_radius) + min_radius);
var min_x = ( this.canvas_width - (this.outer_diameter) ) / 2;
var max_x = ( this.canvas_width - (this.outer_diameter) ) / 2 + this.outer_diameter;
var min_y = ( this.canvas_height - (this.outer_diameter) ) / 2;
var max_y = ( this.canvas_height - (this.outer_diameter) ) / 2 + this.outer_diameter;
// Element positions
var x_pos = Math.floor(Math.random() * (max_x - min_x)) + min_x;
var y_pos = Math.floor(Math.random() * (max_y - min_y)) + min_y;
// Make sure the dots are within the max/min radiuses
if( isInside(x_pos,y_pos,this.options.outer_radius) && isOutside(x_pos,y_pos,this.options.inner_radius) ){
var dot = s.circle(x_pos, y_pos, radius);
var g = getRandomGradient();
dot.attr({
fill: g,
'data-x': randomPos(-1000,1000),
'data-y': randomPos(-1000,1000),
'class': 'dot'
});
} else {
// Call function recursively to regen where dots are outside the area
makeDot(min_radius, max_radius);
}
}
/**
* generate multiple dots
*/
function generateDots(){
for(var i=0;i<this.options.number_of_dots;i++){
makeDot(this.options.dot_size_min,this.options.dot_size_max);
console.log(i);
}
}
generateDots();
};
/**
* Module Export for browserify
*
* @param {obj} options [description]
* @return {obj} [description]
*/
module.exports = function (options) {
return CreateDots(options);
};
Raw
scripts.js
// browserify with options
var generateDots = require('./libs/dots.js')({
element_id: "animation_circle",
inner_radius: 230,
outer_radius: 300,
dot_size_min: 2,
dot_size_max: 2.5,
number_of_dots: 500,
gradients: {
light: "r(0.33, 0.33, 0.5)rgba(239,239,239,1)-rgba(169,169,169,1)",
medium: "r(0.33, 0.33, 0.5)rgba(214,214,214,1)-rgba(134,134,134,1)",
dark: "r(0.33, 0.33, 0.5)rgba(170,170,170,1)-rgba(93,93,93,1)"
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment