Blackhole

Developer
Darryl Huffman
Size
4,946 Kb
Views
4,048
  1. Blackhole Previews
  2. Blackhole HTML Codes
  3. Blackhole CSS Codes
  4. Blackhole JS Codes

How do I make an blackhole?

Any tips on how to optimize the framerate would be much appritiated! I have added comments to the code so other eyes can see what is going on. :). What is a blackhole? How do you make a blackhole? This script and codes were developed by Darryl Huffman on 01 January 2023, Sunday.

Blackhole Previews
IQ Test

Blackhole - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blackhole</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="blackhole">	<div class="centerHover"><span>ENTER</span></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Blackhole - Script Codes CSS Codes

body, html { height: 100%;
}
body { height: 100%; background-color: #191919;
}
#blackhole { height: 100%; width: 100%; position: relative; display: flex;
}
.centerHover { width: 255px; height: 255px; background-color: transparent; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-top: -128px; margin-left: -128px; z-index: 2; cursor: pointer; line-height: 255px; text-align: center; transition: all 500ms;
}
.centerHover.open { opacity: 0; pointer-events: none;
}
.centerHover:hover span { color: #DDD;
}
.centerHover:hover span:before { background-color: #DDD;
}
.centerHover:hover span:after { background-color: #DDD;
}
.centerHover span { color: #666; font-family: serif; font-size: 18px; position: relative; transition: all 500ms;
}
.centerHover span:before { content: ''; display: inline-block; height: 1px; width: 16px; margin-right: 12px; margin-bottom: 4px; background-color: #666; transition: all 500ms;
}
.centerHover span:after { content: ''; display: inline-block; height: 1px; width: 16px; margin-left: 12px; margin-bottom: 4px; background-color: #666; transition: all 500ms;
}
canvas { position: relative; z-index: 1; width: 100%; height: 100%; margin: auto;
}

Blackhole - Script Codes JS Codes

blackhole('#blackhole');
function blackhole(element) {	var h = $(element).height(), w = $(element).width(), cw = w, ch = h, maxorbit = 255, // distance from center centery = ch/2, centerx = cw/2;	var startTime = new Date().getTime();	var currentTime = 0;	var stars = [], collapse = false, // if hovered expanse = false; // if clicked	var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo(element), context = canvas.get(0).getContext("2d");	context.globalCompositeOperation = "multiply";	function setDPI(canvas, dpi) {	// Set up CSS size if it's not set up already	if (!canvas.get(0).style.width)	canvas.get(0).style.width = canvas.get(0).width + 'px';	if (!canvas.get(0).style.height)	canvas.get(0).style.height = canvas.get(0).height + 'px';	var scaleFactor = dpi / 96;	canvas.get(0).width = Math.ceil(canvas.get(0).width * scaleFactor);	canvas.get(0).height = Math.ceil(canvas.get(0).height * scaleFactor);	var ctx = canvas.get(0).getContext('2d');	ctx.scale(scaleFactor, scaleFactor);	}	function rotate(cx, cy, x, y, angle) {	var radians = angle, 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 [nx, ny];	}	setDPI(canvas, 192);	var star = function(){	// Get a weighted random number, so that the majority of stars will form in the center of the orbit	var rands = [];	rands.push(Math.random() * (maxorbit/2) + 1);	rands.push(Math.random() * (maxorbit/2) + maxorbit);	this.orbital = (rands.reduce(function(p, c) {	return p + c;	}, 0) / rands.length);	// Done getting that random number, it's stored in this.orbital	this.x = centerx; // All of these stars are at the center x position at all times	this.y = centery + this.orbital; // Set Y position starting at the center y + the position in the orbit	this.yOrigin = centery + this.orbital; // this is used to track the particles origin	this.speed = (Math.floor(Math.random() * 2.5) + 1.5)*Math.PI/180; // The rate at which this star will orbit	this.rotation = 0; // current Rotation	this.startRotation = (Math.floor(Math.random() * 360) + 1)*Math.PI/180; // Starting rotation. If not random, all stars will be generated in a single line.	this.id = stars.length; // This will be used when expansion takes place.	this.collapseBonus = this.orbital - (maxorbit * 0.7); // This "bonus" is used to randomly place some stars outside of the blackhole on hover	if(this.collapseBonus < 0){ // if the collapse "bonus" is negative	this.collapseBonus = 0; // set it to 0, this way no stars will go inside the blackhole	}	stars.push(this);	this.color = 'rgba(255,255,255,'+ (1 - ((this.orbital) / 255)) +')'; // Color the star white, but make it more transparent the further out it is generated	this.hoverPos = centery + (maxorbit/2) + this.collapseBonus; // Where the star will go on hover of the blackhole	this.expansePos = centery + (this.id%100)*-10 + (Math.floor(Math.random() * 20) + 1); // Where the star will go when expansion takes place	this.prevR = this.startRotation;	this.prevX = this.x;	this.prevY = this.y;	// The reason why I have yOrigin, hoverPos and expansePos is so that I don't have to do math on each animation frame. Trying to reduce lag.	}	star.prototype.draw = function(){	// the stars are not actually moving on the X axis in my code. I'm simply rotating the canvas context for each star individually so that they all get rotated with the use of less complex math in each frame.	if(!expanse){	this.rotation = this.startRotation + (currentTime * this.speed);	if(!collapse){ // not hovered	if(this.y > this.yOrigin){	this.y-= 2.5;	}	if(this.y < this.yOrigin-4){	this.y+= (this.yOrigin - this.y) / 10;	}	} else { // on hover	this.trail = 1;	if(this.y > this.hoverPos){	this.y-= (this.hoverPos - this.y) / -5;	}	if(this.y < this.hoverPos-4){	this.y+= 2.5;	}	}	} else {	this.rotation = this.startRotation + (currentTime * (this.speed / 2));	if(this.y > this.expansePos){	this.y-= Math.floor(this.expansePos - this.y) / -140;	}	}	context.save();	context.fillStyle = this.color;	context.strokeStyle = this.color;	context.beginPath();	var oldPos = rotate(centerx,centery,this.prevX,this.prevY,-this.prevR);	context.moveTo(oldPos[0],oldPos[1]);	context.translate(centerx, centery);	context.rotate(this.rotation);	context.translate(-centerx, -centery);	context.lineTo(this.x,this.y);	context.stroke();	context.restore();	this.prevR = this.rotation;	this.prevX = this.x;	this.prevY = this.y;	}	$('.centerHover').on('click',function(){	collapse = false;	expanse = true;	$(this).addClass('open');	$('.fullpage').addClass('open');	setTimeout(function(){	$('.header .welcome').removeClass('gone');	}, 500);	});	$('.centerHover').on('mouseover',function(){	if(expanse == false){	collapse = true;	}	});	$('.centerHover').on('mouseout',function(){	if(expanse == false){	collapse = false;	}	});	window.requestFrame = (function(){	return window.requestAnimationFrame ||	window.webkitRequestAnimationFrame ||	window.mozRequestAnimationFrame ||	function( callback ){	window.setTimeout(callback, 1000 / 60);	};	})();	function loop(){	var now = new Date().getTime();	currentTime = (now - startTime) / 50;	context.fillStyle = 'rgba(25,25,25,0.2)'; // somewhat clear the context, this way there will be trails behind the stars	context.fillRect(0, 0, cw, ch);	for(var i = 0; i < stars.length; i++){ // For each star	if(stars[i] != stars){	stars[i].draw(); // Draw it	}	}	requestFrame(loop);	}	function init(time){	context.fillStyle = 'rgba(25,25,25,1)'; // Initial clear of the canvas, to avoid an issue where it all gets too dark	context.fillRect(0, 0, cw, ch);	for(var i = 0; i < 2500; i++){ // create 2500 stars	new star();	}	loop();	}	init();
}
Blackhole - Script Codes
Blackhole - Script Codes
Home Page Home
Developer Darryl Huffman
Username darrylhuffman
Uploaded January 01, 2023
Rating 4.5
Size 4,946 Kb
Views 4,048
Do you need developer help for Blackhole?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Darryl Huffman (darrylhuffman) Script Codes
Name
Hot Arrrr Balloon.
Fur
Spilled Galaxy
Red Oak
Spilled Paint v2
Let it snow, let it snow, code the snow.
LightBulb
Followers Solar System
Pixelot
Orbit
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!