Orbit

orbit.markdown

Orbit

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)

A Pen by BLVKOBLSK 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;
}