Chaotic Spheres

Developer
Scott Niejadlik
Size
3,264 Kb
Views
34,408
  1. Chaotic Spheres Previews
  2. Chaotic Spheres HTML Codes
  3. Chaotic Spheres CSS Codes
  4. Chaotic Spheres JS Codes

How do I make an chaotic spheres?

Just quick and dirty messing around with some svg elements and tweenmax. More to come.. What is a chaotic spheres? How do you make a chaotic spheres? This script and codes were developed by Scott Niejadlik on 07 September 2022, Wednesday.

Chaotic Spheres Previews
IQ Test

Chaotic Spheres - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Chaotic Spheres</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>	<section> <svg class="container" id="svgContainer"></svg>	<section>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Chaotic Spheres - Script Codes CSS Codes

body {	background-color: #282828;	}
.container { width:100%; height:1000px; position:relative;
}

Chaotic Spheres - Script Codes JS Codes

var svg;	var dots;	var totalDots;	var docHeight;	var docWidth;	var counter;	function init()	{	svg = document.getElementsByTagName('svg')[0]; createGradient($('svg')[0],'baseGrad','radialGradient',[ {offset:'92%', 'stop-color':'#ffffff','stop-opacity':'0'}, {offset:'96%','stop-color':'#ffffff'}, {offset:'100%', 'stop-color':'#ffffff','stop-opacity':'0'} ]);	docHeight = $(document).height();	docWidth = $(document).width();	dots = [];	lines = [];	totalDots = 25;	var i = 0;	var limit = totalDots;	counter=0;	// CREATE DOTS STORE IN ARRAY, should be turned into an object	while(i<limit)	{	// TODO: create objects out of the dots.	var dot = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); //Create a path in SVG's namespace	//Set path's data	dot.style.r = "2px";	dot.class = 'dot';	dot.id = "circle_"+i;	dot.style.fill = 'url(#baseGrad)'; dot.style.strokeWidth = 20; dot.setAttribute("stroke-dasharray", "1, "+45*(i-1)/100) dot.setAttribute("r",Math.random()*5+220);	//dot.setAttribute("cx",Math.random()*350-175+(docWidth>>1));	//dot.setAttribute("cy",Math.random()*350-175+(docHeight>>1));	TweenMax.set(dot,{x:Math.random()*50-25+(docWidth>>1),y:Math.random()*50-25+(docHeight>>1)});	var randCol = Math.floor(Math.random()*10)+245;	dot.style.stroke = 'white';	//dot.style.fill = 'rgb('+randCol+','+randCol+','+randCol+')';	svg.appendChild(dot);	dots[i] = dot;	++i;	}	//console.log(lines);	i = 0;	limit = totalDots;	while(i<limit)	{	//Begin Dots animation loop.	moveDot(i);	++i;	}	}	function moveDot(item)	{	var halfW = (docWidth>>1);	//console.log(halfW);	counter += 0.01;	var halfH = (docHeight>>1);	var dot = dots[item];	var size = dots[item].r.baseVal.value * 10;	var targetX = dots[item].cx.baseVal.value+Math.random()*10-5;//dots[item].cx.baseVal.value+Math.random()*size-(size>>1);	if(Math.abs(targetX - halfW) > halfW) targetX = halfW;	var targetY = dots[item].cy.baseVal.value+Math.random()*10-5;//dots[item].cy.baseVal.value+Math.random()*size-(size>>1);	var rIncrement = Math.random()*20+2;	var targetR = '+='+rIncrement;	var speed = rIncrement/5+0.3;	var targetOpacity = 0.3;	if(Math.abs(targetY - halfH) > halfH) targetY = halfH;	if (dot.r.baseVal.value > Math.random()*50+200)	{	targetR = 300;	speed = targetR/50+0.3;	targetOpacity = 0;	}	if (dot.r.baseVal.value >= 300)	{	speed = 1;	targetR = Math.random()*5+220//0;	targetOpacity = 0.3;	}	TweenMax.to(dot,speed,{attr:{'cx':targetX, 'cy':targetY, r:targetR}, x: '+='+Math.sin(counter)*1, y: '+='+Math.cos(counter)*1, rotationX:Math.random()*360+'_cw',//'+='+item, rotationY:Math.random()*360+'_cw',//'+='+item, rotationZ:Math.random()*360+'_cw',//'+='+item, opacity:targetOpacity, onUpdate:onDotsMove, onUpdateParams:[item], onComplete:moveDot, onCompleteParams:[item], ease:Linear.easeNone});	}	function onDotsMove(item)	{	} function createGradient(svg,id,type,stops){ var svgNS = svg.namespaceURI; var grad = document.createElementNS(svgNS,type); grad.setAttribute('id',id); for (var i=0;i<stops.length;i++){ var attrs = stops[i]; var stop = document.createElementNS(svgNS,'stop'); for (var attr in attrs){ if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr,attrs[attr]); } grad.appendChild(stop); } var defs = svg.querySelector('defs') || svg.insertBefore( document.createElementNS(svgNS,'defs'), svg.firstChild ); return defs.appendChild(grad); }	function distance(x1,x2,y1,y2){	return Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2));	}	$( document ).ready(function() { init();	});
Chaotic Spheres - Script Codes
Chaotic Spheres - Script Codes
Home Page Home
Developer Scott Niejadlik
Username sniejadlik
Uploaded September 07, 2022
Rating 4
Size 3,264 Kb
Views 34,408
Do you need developer help for Chaotic Spheres?

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!

Scott Niejadlik (sniejadlik) Script Codes
Name
Particle Motion trajectories
HighCharts Evaluation Test
LHC
Resonance Spheres
Light Curtains
Rough Earth
Crystaline Chaos
WebGL Burst
Dust Nebula
Lab
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!