Followers Solar System

Developer
Darryl Huffman
Size
6,724 Kb
Views
8,096
  1. Followers Solar System Previews
  2. Followers Solar System HTML Codes
  3. Followers Solar System CSS Codes
  4. Followers Solar System JS Codes

How do I make an followers solar system?

A solar system made out of my followers here on CodePen! Click on any of the stars orbiting around the center in order to see who that star belongs to! Follow me to be added in! ;). What is a followers solar system? How do you make a followers solar system? This script and codes were developed by Darryl Huffman on 07 January 2023, Saturday.

Followers Solar System Previews
IQ Test

Followers Solar System - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Followers Solar System</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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> <canvas id="SCENE"></canvas>
<div id="personInfo">	<div class="thanks">Thank You,</div>	<div class="image"></div>	<div class="info">	<div class="username"></div>	<div class="name"></div>	</div>	<a class="bg" href="#"></a>
</div>
<div id="instructions">	<p>Hover over the stars that are orbiting around the center, each one coorisponds to someone who follows me!</p>	<p>Current Followers: <span class="count"></span></p>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Followers Solar System - Script Codes CSS Codes

body { background-color: #222; margin: 0px; padding: 0px; overflow: hidden;
}
canvas { position: relative; z-index: 0;
}
#instructions { padding: 20px; width: 300px; position: absolute; bottom: 0px; right: 0px; color: #FFF; z-index: 5; text-align: center; font-family: Helvetica, sans-serif; font-size: 13px;
}
#instructions p { padding-top: 20px;
}
#personInfo { position: absolute; top: 50%; left: 50%; z-index: 2;
}
#personInfo.open .image { transform: scale(1); transition: all 500ms;
}
#personInfo.open .bg { left: -20px; width: 400px; transition: all 1000ms; box-shadow: 0px 3px 50px 4px rgba(255, 255, 255, 0.6);
}
#personInfo.open .info { opacity: 1;
}
#personInfo.open .thanks { opacity: 1;
}
#personInfo .thanks { transition: all 500ms; position: absolute; z-index: 5; top: -126px; font-family: Helvetica, sans-serif; font-weight: bold; white-space: nowrap; width: 300px; left: -84px; font-size: 50px; line-height: 50px; color: #FFF; transition-delay: 1200ms !important; text-shadow: 0px -3px 30px rgba(255, 255, 255, 0.6); opacity: 0;
}
#personInfo .info { z-index: 4; position: absolute; left: 90px; top: -84px; height: 168px; width: 205px; opacity: 0; transition-delay: 1200ms !important; transition: all 400ms; pointer-events: none;
}
#personInfo .name { line-height: 38px; font-size: 21px; font-family: Helvetica; font-weight: bold;
}
#personInfo .username { line-height: 25px; margin-top: 40px; font-family: Helvetica, sans-serif; color: #999;
}
#personInfo .image { position: relative; transition: all 0ms; transform: scale(0); width: 128px; height: 128px; margin-left: -64px; margin-top: -64px; border-radius: 50%; background-size: cover; background-position: center; z-index: 4;
}
#personInfo .bg { display: block; text-decoration: none; box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.6); transition-delay: 1000ms !important; background-color: #FFF; width: 0px; height: 168px; position: absolute; top: -20px; margin-top: -64px; margin-left: -64px; left: 0px; z-index: 3;
}

Followers Solar System - Script Codes JS Codes

function fillInfo(data){	$('#personInfo .image').attr('style','background-image: url('+data.avatar+')');	$('#personInfo .name').html(data.nicename);	$('#personInfo .username').html(data.username);	$('#personInfo .bg').attr('href',data.url);	setTimeout(function(){	$('#personInfo').addClass('open');	},1000);
}
var starCanvas = document.createElement('canvas');
//document.getElementById('body').appendChild(starCanvas);
var size = window.innerWidth;
starCanvas.width = size;
starCanvas.height = size;
var context = starCanvas.getContext('2d');
for(var y = 0; y < size; y++){	for(var x = 0; x < size; x++){	var grav = 0;	var dx = x - size/2, dy = y - size/2	var dist = Math.floor(Math.sqrt(dx * dx + dy * dy));	grav = (size*10 / (dist * dist)) * 1;	context.fillStyle = "rgba(255,255,255,"+grav*0.1+")";	context.fillRect(x,y,1,1);	}
}
var hoverCanvas = document.createElement('canvas');
var hoverCanvas2 = document.createElement('canvas');
//document.getElementById('body').appendChild(starCanvas);
var size2 = window.innerWidth/2;
hoverCanvas.width = size2;
hoverCanvas.height = size2;
hoverCanvas2.width = size2;
hoverCanvas2.height = size2;
var context2 = hoverCanvas.getContext('2d');
var context3 = hoverCanvas2.getContext('2d');
var curSrc = '';
function drawImg(imgSrc,callback){	var img = new Image();	img.crossOrigin = "codepen.io";	var error = false;	img.onload = work;	img.onerror= function(){	img.src = 'https://i2.wp.com/codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png?ssl=1';	}	function work(){	context2.clearRect(0,0,size2,size2);	curSrc = imgSrc;	context3.drawImage(img, size2*0.47, size2*0.47,size2*0.06,size2*0.06);	context2.drawImage(starCanvas,0,0,size2,size2);	var lightData = context3.getImageData(0, 0, size2, size2).data;	for(var y = 0; y <= size2; y++){	for(var x = 0; x <= size2; x++){	var grav = 0;	var dx = x - size2/2, dy = y - size2/2	var dist = Math.floor(Math.sqrt(dx * dx + dy * dy));	if(dist < size2*0.02){	l = (y * size2 + x) * 4;	p = [lightData[l],lightData[l+1],lightData[l+2],lightData[l+3]];	var b = p[2];	var g = p[1];	var r = p[0];	context2.fillStyle = "rgba("+r+","+g+","+b+",255)";	context2.fillRect(x,y,1,1);	}	}	}	callback(hoverCanvas);	}	if(curSrc != imgSrc){	img.src = imgSrc;	} else {	callback(hoverCanvas);	}
}
var opts = {	speed: {	min: 0.001,	max: 0.001	},	speedAverage: 150000, //Ms	zCamera: 32,	mobile_zCamera: 15
};
var ww = window.innerWidth, wh = window.innerHeight;
var PI = Math.pi;
var followMouse = true;
var renderer = new THREE.WebGLRenderer({	canvas: document.querySelector("canvas"),	alpha: true
});
renderer.setSize(ww, wh);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, ww / wh, 1, 2000);
camera.position.set(0, 0, opts.zCamera);
camera.destinationLook = new THREE.Vector3();
function resetCamera() {	TweenMax.to(camera.position, 2, {	x: 0,	y: 0,	z: opts.zCamera,	ease: Power1.easeInOut	});	TweenMax.to(camera.rotation, 2, {	x: 0,	y: 0,	z: 0,	ease: Power1.easeInOut	});
}
resetCamera();
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2(0.3, 0.3);
mouse.activated = false;
document.querySelector("canvas").addEventListener("mouseup", onMouseUp);
document.querySelector("canvas").addEventListener("touchstart", onMouseUp);
window.addEventListener("mousemove", detectSphereMouse);
var clickables = [], hoverables = [];
var clickedItem = null;
var hoveredItem = null;
window.addEventListener("resize", function() {	ww = window.innerWidth;	wh = window.innerHeight;	camera.aspect = ww / wh;	camera.updateProjectionMatrix();	renderer.setSize(ww, wh);
});
function onMouseUp(e) {	if (e.type === "touchstart") {	mouse.x = (e.touches[0].clientX / ww) * 2 - 1;	mouse.y = -(e.touches[0].clientY / wh) * 2 + 1;	} else {	mouse.x = (e.clientX / ww) * 2 - 1;	mouse.y = -(e.clientY / wh) * 2 + 1;	}	raycaster.setFromCamera(mouse, camera);	var intersects = raycaster.intersectObjects(hoverables, true);	if (intersects.length > 0) {	followMouse = false;	//Check if clicked item is instance of a Mesh	if(intersects[0].object.userData.type == 'hoverSphere'){	if (clickedItem) {	clickedItem.material.map = starMap;	clickedItem.cameraMustFollow = false;	clickedItem.visible = true;	clickedItem.material.map = starMap;	TweenMax.to(clickedItem.material, 0.6, {	opacity: 1,	ease: Power1.easeIn	});	}	clickedItem = intersects[0].object.parent.children[1];	fillInfo(clickedItem.userData.data);	$('body').attr('style','');	var data = clickedItem.userData.data;	drawImg(data.avatar,function(i){	var hoverMap = new THREE.Texture(i);	hoverMap.needsUpdate = true;	clickedItem.material.map = hoverMap;	});	TweenMax.to(clickedItem.material, 0.6, {	opacity: 1,	ease: Power1.easeIn,	onComplete: function() {	clickedItem.visible = true;	}	});	clickedItem.cameraMustFollow = true;	}	} else {	$('#personInfo').removeClass('open');	$('body').attr('style','');	followMouse = true;	if (clickedItem) {	clickedItem.material.map = starMap;	clickedItem.cameraMustFollow = false;	clickedItem.visible = true;	TweenMax.to(clickedItem.material, 0.6, {	opacity: 1,	ease: Power1.easeIn	});	}	clickedItem = null;	resetCamera();	}
}
function detectSphereMouse(e) {	if (!mouse.activated) {	mouse.activated = true;	}	if(followMouse == true){	mouse.x = (e.clientX / ww) * 2 - 1;	mouse.y = -(e.clientY / wh) * 2 + 1;	}	var ratio = 0.2;	if (clickedItem) {	ratio = Math.PI * 0.6;	}	TweenMax.to(camera.rotation, 1, {	ease: Back.easeOut,	y: -mouse.x * ratio,	x: mouse.y * ratio	});	raycaster.setFromCamera(mouse, camera);	var intersects = raycaster.intersectObjects(hoverables, true);	var lh = hoveredItem;	if (hoveredItem) {	TweenMax.to(hoveredItem.scale, 1.5, {	ease: Elastic.easeOut.config(1.55, 0.2),	x: 10,	y: 10,	z: 1	});	}	if (intersects.length > 0) {	document.body.style.cursor = "pointer";	hoveredItem = intersects[0].object;	if(hoveredItem.userData.type == 'hoverSphere'){	hoveredItem = intersects[0].object.parent.children[1];	}	if(hoveredItem){	var data = hoveredItem.userData.data;	drawImg(data.avatar,function(i){	hoverMap = new THREE.Texture(i);	hoverMap.needsUpdate = true;	hoveredItem.material.map = hoverMap;	});	}	if(hoveredItem != clickedItem){	var stretch = 1.3;	TweenMax.to(hoveredItem.scale, stretch, {	ease: Back.easeOut,	x: 10 * stretch,	y: 10 * stretch,	z: 1 * stretch	});	}	} else {	if(hoveredItem != undefined){	hoveredItem.material.map = starMap;	}	document.body.style.cursor = "default";	hoveredItem = null;	}
};
var followers = [], pageNumber = 1, stars = [];
function getFollowers(page){	$.getJSON("https://cpv2api.com/followers/darrylhuffman?page="+pageNumber, function(resp){	if(resp.success){	pageNumber++;	followers.push.apply(followers,resp.data);	getFollowers(pageNumber);	} else {	// no more followers :(	$('.count').text(followers.length);	init();	}	});
}
getFollowers(pageNumber);
var hoverMap = new THREE.Texture(hoverCanvas);
hoverMap.needsUpdate = true;
var starMap = new THREE.Texture(starCanvas);
starMap.needsUpdate = true;
var solarSystem = new THREE.Object3D();
solarSystem.position.x = 0; solarSystem.position.y = 0; solarSystem.position.z = 0;
scene.add(solarSystem);
var meMat = new THREE.SpriteMaterial({	map: starMap,	transparent: false,	useScreenCoordinates: false,	color: 0xffffff // CHANGED
});
var sun = sprite = new THREE.Sprite(meMat);
sun.scale.set( 100, 100, 1 );
sun.position.x = 0; sun.position.y = 0; sun.position.z = 0;
solarSystem.add(sun);
var followersHolder = new THREE.Object3D();
followersHolder.position.x = 0; followersHolder.position.y = 0; followersHolder.position.z = 0;
scene.add(followersHolder);
var follower = function(data){	var followerHolder = new THREE.Object3D();	followerHolder.x = 0; followerHolder.y = 0; followerHolder.z = 0;	var orbit = ((Math.floor(Math.random() * 300) + 100) / 75);	var speed = (Math.random() * opts.speed.max) - opts.speed.max;	if(speed < 0) { speed -= opts.speed.min; } else { speed += opts.speed.min; }	followerHolder.userData.speed = speed;	var mat = new THREE.SpriteMaterial({	map: starMap,	transparent: false,	useScreenCoordinates: false,	opacity: 1	});	var sprite = new THREE.Sprite(mat);	sprite.scale.set( 10, 10, 1 );	sprite.userData.data = data;	sprite.position.x = (orbit + 7) * (0.5 * (3 + 1));	clickables.push(sprite);	var hoverGeom = new THREE.SphereGeometry( 0.6, 8, 8 );	var hoverMat = new THREE.MeshBasicMaterial( {color: 0x222222, transparent: true, opacity: 0, wireframe: true, wireframeLinewidth: 1, visible: false} );	var hoverSphere = new THREE.Mesh( hoverGeom, hoverMat );	hoverSphere.userData.type = 'hoverSphere';	hoverSphere.position.x = (orbit + 7) * (0.5 * (3 + 1));	hoverables.push(hoverSphere);	followerHolder.rotation.y = Math.random() * 8;	followerHolder.rotation.x = Math.random() * 8;	followerHolder.rotation.z = Math.random() * 8;	followersHolder.add(followerHolder);	followerHolder.add( hoverSphere );	followerHolder.add(sprite);	stars.push(followerHolder);
}
function updateFollowers(){	for(var i = 0; i <= stars.length; i++){	var star = stars[i];	if(stars[i] != undefined){	star.children[0].rotation.x += star.userData.speed / 10;	if(star.children[1].cameraMustFollow){	star.children[1].updateMatrixWorld();	var vector = new THREE.Vector3();	vector.setFromMatrixPosition( star.children[1].matrixWorld );	camera.lookAt(vector);	TweenMax.to(camera.position, 2, {	x: vector.x,	y: vector.y-2,	z: vector.z + 3,	ease: Power1.easeOut	});	} else {	star.rotation.y += star.userData.speed / 20;	star.rotation.z += star.userData.speed;	}	}	}
}
var requestframe = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || // IE Fallback, you can even fallback to onscroll function (callback) { window.setTimeout(callback, 1000 / 60); };
function render(){	requestframe(render);	updateFollowers();	renderer.render(scene, camera);
}
function init (){	for(var i = 0; i <= followers.length; i++){	new follower(followers[i]);	}	render();
}
Followers Solar System - Script Codes
Followers Solar System - Script Codes
Home Page Home
Developer Darryl Huffman
Username darrylhuffman
Uploaded January 07, 2023
Rating 4
Size 6,724 Kb
Views 8,096
Do you need developer help for Followers Solar System?

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
Simple SVG Charts
Pixelot
LightBulb
Spilled Paint v2
Let it snow, let it snow, code the snow.
Spilled Galaxy
Blackhole
Hot Arrrr Balloon.
Spilled Paint
Red Oak
Create amazing web content 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!