Orbit CSS

orbit-css.markdown

Orbit CSS

The latest version of my blackhole thing, but this time with far more stars than I care to count. (it can now smootly animate over 100,000 stars orbiting, more than 100x more stars than I've ever been able to get before)

Forked from Darryl Huffman on CodePen.

License.

script.js

var container = 'body';
var size = {
	x: $(container).width(),
	y: $(container).height()
};

var canvas = $('<canvas/>').attr({width: size.x, height: size.y}).appendTo(container),
    context = canvas.get(0).getContext("2d");

var waveFrequency = 20;

var voidWidth = 100;
var starEscapeWidth = 255;

var starCount = 25000;

var startTime = new Date().getTime();
var currentTime = 0;

var imagedata = context.createImageData(size.x, size.y);
var buf = new ArrayBuffer(imagedata.data.length);
var buf8 = new Uint8ClampedArray(buf);
var data = new Uint32Array(imagedata.data.buffer);

function updateData(){
	imagedata = context.getImageData(0, 0, size.x, size.y);
	data = new Uint32Array(imagedata.data.buffer);
}

function setSize() {
	size = {
		x: $(container).width(),
		y: $(container).height()
	};
	canvas.attr({width: size.x, height: size.y});
}

function rotate(cx, cy, x, y, radians) {
	var cos = Math.cos(radians),
	    sin = Math.sin(radians),
	    nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,
	    ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
	return {x: nx, y: ny};
}

var stars = [];
var star = function(){
	var rands = [];
	rands.push(Math.random() * (starEscapeWidth/2) + 1);
	rands.push(Math.random() * (starEscapeWidth/2) + starEscapeWidth);

	this.orbital = (rands.reduce(function(p, c) {
		return p + c;
	}, 0) / rands.length);
	
	this.opacity = Math.floor((1 - ((this.orbital) / starEscapeWidth)) * starEscapeWidth) + Math.floor(Math.random() * 80);
	
	this.position = {
		x: (size.x/2),
		y: (size.y/2) + this.orbital
	};
	this.originPosition = this.position;
	
	this.rotation = Math.PI * (Math.random() * 2);
	this.position = rotate(size.x/2, size.y/2, this.position.x, this.position.y, this.rotation);
	this.realPosition = this.position;
	this.rSpeed = (Math.random() * 0.0005 + (this.opacity / 20000));
	this.waveSpeed1 = Math.random() * 0.01;
	this.waveSpeed2 = Math.random() * 0.01;
	this.wave1 = Math.sin(currentTime * this.waveSpeed1) * waveFrequency;
	this.wave2 = Math.sin(currentTime * this.waveSpeed2) * waveFrequency;
	
	this.id = stars.length;
	stars.push(this);
}

function drawStar(star){
	data[Math.floor(star.realPosition.y + star.wave1) * size.x + Math.floor(star.realPosition.x + star.wave2)] =
				(0  << 24) |	// alpha
				(255 << 16) |	// blue
				(255 <<  8) |	// green
				255;		// red
	star.wave1 = Math.sin(currentTime * star.waveSpeed1) * waveFrequency;
	star.wave2 = Math.sin(currentTime * star.waveSpeed2) * waveFrequency;
	star.realPosition = rotate(size.x/2, size.y/2, star.position.x, star.position.y, star.rSpeed * currentTime);
	star.opacity = Math.floor((1 - ((star.orbital) / starEscapeWidth)) * starEscapeWidth) + Math.floor(Math.random() * 80);
	data[Math.floor(star.realPosition.y + star.wave1) * size.x + Math.floor(star.realPosition.x + star.wave2)] =
		(star.opacity  << 24) |	// alpha
		(255 << 16) |	// blue
		(255 <<  8) |	// green
		255;		// red
}

window.requestFrame = (function(){
	return  window.requestAnimationFrame       ||
		window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame    ||
		function( callback ){
		window.setTimeout(callback, 1000 / 60);
	};
})();

function render(){
	var now = new Date().getTime();
	currentTime = (now - startTime) / 10;
	
	if(starCount >= stars.length){
		for(var i = 0; i < 100; i++){
			new star();
		}
	}
	
	for(var i = 0; i <= stars.length; i++){
		if(stars[i]){
			drawStar(stars[i]);
		}
	}
	
	context.putImageData(imagedata, 0, 0); // Push the pixel data to the canvas
	
	requestFrame(render);
}
render();

$('#display').on('resize', setSize);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

body, html { height: 100%; }
body {
	height: 100%;
	background-color: rgba(10,10,10,1);
	overflow: hidden;
}

canvas {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: auto;
}