Skip to content

Instantly share code, notes, and snippets.

@rniswonger rniswonger/rays.js forked from alanedwardes/rays.js
Last active Nov 16, 2016

Embed
What would you like to do?
Generates animated sun rays using HTML canvas
var rays = new Object({
canvas: false,
context: false,
offset: 0,
speed: 0.005,
animating: false,
color_1: '',
color_2: '',
mid_x: 0,
mid_y: 0,
diameter: 0,
radius: 0,
num_rays: 12,
ray_angle: 0,
sweep_angle: 0,
init: function(id, color_1, color_2) {
this.canvas = document.getElementById(id);
this.color_1 = color_1;
this.color_2 = color_2;
this.ray_angle = Math.PI / this.num_rays;
this.sweep_angle = this.ray_angle * 2;
this.resetCanvas();
requestAnimationFrame(this.animate);
this.draw();
window.addEventListener('resize', this.resetCanvas);
},
animate: function() {
if ( !rays.animating ) { // prevent calling too frequently if animating
rays.animating = true;
rays.update();
rays.draw();
window.requestAnimationFrame(rays.animate);
}
},
update: function() {
rays.offset += rays.speed;
},
resetCanvas: function() {
// Resize the canvas and reset context options
rays.canvas.width = rays.canvas.offsetWidth;
rays.canvas.height = rays.canvas.offsetHeight;
rays.context = rays.canvas.getContext('2d');
rays.canvas.style.background = rays.color_1;
rays.context.fillStyle = rays.color_2;
// Update vars for drawing (based on the screen size)
rays.mid_x = rays.canvas.width / 2;
rays.mid_y = rays.canvas.height / 2;
rays.diameter = Math.sqrt( Math.pow(rays.canvas.width, 2) + Math.pow(rays.canvas.height, 2) );
rays.radius = rays.diameter / 2;
},
draw: function() {
var c = this.canvas;
this.context.clearRect(0, 0, c.width, c.height);
this.context.beginPath();
for (i = 0; i < this.num_rays; i++) {
var start_angle = (this.sweep_angle * i) + this.offset;
var end_angle = start_angle + this.ray_angle;
this.context.moveTo(this.mid_x, this.mid_y);
this.context.arc(this.mid_x, this.mid_y, this.radius, start_angle, end_angle, false);
};
this.context.fill();
rays.animating = false;
}
});
rays.init('bg-banner', '#ffffff', '#ffff00');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.