Stardust

Developer
Jeff Ibacache
Size
2,629 Kb
Views
74,888
  1. Stardust Previews
  2. Stardust HTML Codes
  3. Stardust CSS Codes
  4. Stardust JS Codes

How do I make an stardust?

Simple Stardust using some math and black magic. What is a stardust? How do you make a stardust? This script and codes were developed by Jeff Ibacache on 23 June 2022, Thursday.

Stardust Previews
IQ Test

Stardust - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stardust</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>

Stardust - Script Codes CSS Codes

* {	margin: 0px;
}
canvas {	display: block;
}

Stardust - Script Codes JS Codes

window.onload = function()
{	canvas = document.getElementById('canvas'); canvas.style.width = window.innerWidth + "px"; setTimeout(function() { canvas.style.height = window.innerHeight + "px";
}, 0);	context = canvas.getContext('2d');	width = canvas.width = window.innerWidth;	height = canvas.height = window.innerHeight;
generateParticles();	loop();
};
var canvas;
var context;
var width;
var height;
var particles = [];
var particlesNum = 400;
var leadParticle;
var ax = 0;
var ay = 0;
var colors = ['#D7EEFC', '#AFCFDA', '#7DA2A8', '#748194'];
var PI2 = Math.PI * 2;
function generateParticles()
{	var i = particlesNum - 1;	for(i; i > -1; --i)	{	particles[particles.length] = particle.create(Math.random() * width, Math.random() * height, colors[(Math.random() * colors.length) >> 0], (Math.random() * 10 + 1) >> 0);	}
}
function loop()
{	updateParticles();	renderParticles();	ax += 0.001;	ay += 0.002;	requestAnimationFrame(loop);
}
function updateParticles()
{	var i = particles.length - 1;	for(i; i > -1; --i)	{	var p = particles[i];	var vx = (width >> 1) - p.pos.getX();	var vy = (height >> 1) - p.pos.getY();	var distVec = vec2.create(vx, vy);	p.radius = Math.sin(ax + p.step) * 2 + 3;	var gx = Math.cos(distVec.getAngle()) * 0.2;	var gy = Math.sin(distVec.getAngle()) * 0.1;	var gravityVec = vec2.create(gx, gy);	var acVec = vec2.create(gravityVec.getX(),gravityVec.getY());	p.vel.add(acVec);	p.update();	}
}
function renderParticles()
{	context.fillStyle = '#183E4B';	context.fillRect(0, 0, canvas.width, canvas.height);	var i = particles.length - 1;	for(i; i > -1; --i)	{	var p = particles[i];	context.fillStyle = p.color;	context.beginPath();	context.arc(p.pos.x, p.pos.y, p.radius, 0, PI2);	context.fill();	context.closePath();	}
}
//vec2 definition:
var vec2 =
{	x: 1,	y: 0,	create: function(x, y)	{	var obj = Object.create(this);	obj.setX(x);	obj.setY(y);	return obj;	},	setX: function(value)	{	this.x = value;	},	getX: function()	{	return this.x;	},	setY: function(value)	{	this.y = value;	},	getY: function()	{	return this.y;	},	setAngle: function(angle)	{	var length = this.getLength();	this.x = Math.cos(angle) * length;	this.y = Math.sin(angle) * length;	},	getAngle: function()	{	return Math.atan2(this.y, this.x);	},	setLength: function(length)	{	var angle = this.getAngle();	this.x = Math.cos(angle) * length;	this.y = Math.sin(angle) * length;	},	getLength: function()	{	return Math.sqrt(this.x * this.x + this.y * this.y);	},	getDX: function()	{	if(this.getLength() !== 0)	{	return this.x / this.getLength();	}	else	{	return 0.001;	}	},	getDY: function()	{	if(this.getLength() !== 0)	{	return this.y / this.getLength();	}	else	{	return 0.001;	}	},	add: function(v2)	{	this.x += v2.getX();	this.y += v2.getY();	}
};
//particle definition:
var particle =
{	pos: null,	vel: null,	color: null,	radius: null,	step: null,	create: function(x, y, color, radius)	{	var obj = Object.create(this);	obj.pos = vec2.create(x, y);	obj.vel = vec2.create(0, 0);	obj.color = color;	obj.radius = radius;	obj.step = Math.random() * (Math.PI * 2);	return obj;	},	update: function()	{	this.pos.add(this.vel);	}
};
Stardust - Script Codes
Stardust - Script Codes
Home Page Home
Developer Jeff Ibacache
Username jeffibacache
Uploaded June 23, 2022
Rating 4
Size 2,629 Kb
Views 74,888
Do you need developer help for Stardust?

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!

Jeff Ibacache (jeffibacache) Script Codes
Name
Bezier Fun
Majesty of waves
Wave
A Pen by Jeff Ibacache
Astral Spiral Playground
Wave Physics Playground
Trippy Pac-Man
Pseudo Fluids
Fake 3D Blob
Pseudo 3D Particles
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!