Astronomic particles

Developer
Moeid Saleem
Size
3,784 Kb
Views
16,192
  1. Astronomic particles Previews
  2. Astronomic particles HTML Codes
  3. Astronomic particles CSS Codes
  4. Astronomic particles JS Codes

How do I make an astronomic particles?

Dynamic particles colliding with the wall and magnetic field is set to color white,. when double tap the particle field increases. . What is a astronomic particles? How do you make a astronomic particles? This script and codes were developed by Moeid Saleem on 28 October 2022, Friday.

Astronomic particles Previews
IQ Test

Astronomic particles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Astronomic particles</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Astronomic particles -->
<!-- double tap t see the magic -->	<canvas id="canvas" ></canvas> <script src="js/index.js"></script>
</body>
</html>

Astronomic particles - Script Codes CSS Codes

canvas	position: absolute	top: 0	left: 0	z-index: -1
label	display: block	position: relative	color: rgba(255,255,255,0.8)	margin: 10px	font: 12px monospace	user-select: none
#hint	display: none	&:checked + div	display: block	color: white	font: 12px monospace	padding-left: 10px	user-select: none	+ div	display: none

Astronomic particles - Script Codes JS Codes

(function(){	var canvasBody = document.getElementById("canvas"),	canvas = canvasBody.getContext("2d"),	w = canvasBody.width = window.innerWidth, //Full width	h = canvasBody.height = window.innerHeight, //Full height	tick = 0, //Tick in time	//YOU CAN CHANGE OPTIONS HERE. DO NOT REALLY MESS WITH STUFF BELOW THAT	opts = { //Options, you can change those	backgroundColor: "rgba(58,2,66,0.1)",	particleColor: "#fece1a",	particleAmount: 120,	defaultSpeed: 4,	addedSpeed: 5,	defaultRadius: 2,	addedRadius: 2,	communicationRadius: 150, //The radius for the line	},	particles = [],	Particle = function(Xpos, Ypos){	this.x = Xpos ? Xpos : Math.random()*w; //If there is not position statet, it takes a random position	this.y = Ypos ? Ypos : Math.random()*h; //Same here	this.speed = opts.defaultSpeed + Math.random()*opts.addedSpeed; //Speed + a bit of random one	this.directionAngle = Math.floor(Math.random()*360); //The angle of this particle its moving. !!!! TRUE ONLY ON INIT	this.color = opts.particleColor;	this.radius = opts.defaultRadius + Math.random()*opts.addedRadius; //Radius + a bit of random radius	this.d = { //Object, stores directions. Computes directions according to the random this.directionAngle	x: Math.cos(this.directionAngle)*this.speed,	y: Math.sin(this.directionAngle)*this.speed	};	this.update = function(){ //The update function. The function that calculates next coordinates	this.border(); //Checks if this particles touches the border and THEN computes the next coordinates	this.x += this.d.x; //Just adding the direction to the X	this.y += this.d.y; //Same but with Y	};	this.border = function(){ //The border function. Checks if this thing touches the border	if(this.x >= w || this.x <= 0){ //X walls	this.d.x *= -1;	}	if(this.y >= h || this.y <= 0){ //Floor and ceiling	this.d.y *= -1;	}	this.x > w ? this.x = w : this.x; //This is really important.	this.y > h ? this.y = h : this.y; //Same	this.x < 0 ? this.x = 0 : this.x; //Same	this.y < 0 ? this.y = 0 : this.y; //Same	/* line ~49 explanation	Because sometimes the speed of the particle can be faster, so it doesn't touch the border - it goes through. And when it goes back it doesn't go all the way inside - it stucks there. So, you have to set the X to the point when it touches. Same with Y	*/	};	this.draw = function(){ //Just draws the points. Pretty easy. Takes the coords, color, radius - draws.	canvas.beginPath();	canvas.arc(this.x, this.y, this.radius, 0, Math.PI*2);	canvas.closePath();	canvas.fillStyle = this.color;	canvas.fill();	};	},	checkDistance = function(x1, y1, x2, y2){ //You got it. The point on the graph distance formula.	return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));	},	//Here goes the function that makes lines!	// @param point1 -	The point that check for neighboors	// @param father -	The array the point suppose to take thing from	communicatePoints = function(point1, father){	for(var i = 0; i < father.length; i++){	var distance = checkDistance(point1.x, point1.y, father[i].x, father[i].y);	var opacity = 1 - distance/opts.communicationRadius;	if (opacity > 0){ //Draws the line	canvas.lineWidth = 0.5;	canvas.strokeStyle = "rgba(255,255,255,opacity)".replace("opacity", opacity);	canvas.beginPath();	canvas.moveTo(point1.x, point1.y);	canvas.lineTo(father[i].x, father[i].y);	canvas.closePath();	canvas.stroke();	}	}	};	function setup(){ //Function called once to set everything up	for(var i = 0; i < opts.particleAmount; i++){	particles.push( new Particle() );	}	window.requestAnimationFrame(loop);	}	function loop(){ //Function of loop that will be called for a frame of the animation	window.requestAnimationFrame(loop);	tick++;	//Drawing the background. Basically clearing the frame that was before	canvas.fillStyle = opts.backgroundColor;	canvas.fillRect(0,0,w,h);	//Executing particle functions	for(var i = 0; i < particles.length; i++){	particles[i].update();	particles[i].draw();	}	//Executing lines	for(var a = 0; a < particles.length; a++){	communicatePoints(particles[a], particles);	}	}	//Executing the animation	setup();	//Some event listeners for backup to look professional	window.addEventListener("resize", function(){	w = canvasBody.width = window.innerWidth;	h = canvasBody.height = window.innerHeight;	});	//The thing that adds a point. Basically, we pass the coords of the mouse. And they are applied instead of randomness. Check the line 26, 28 to know	canvasBody.addEventListener("click", function(e){	particles.push( new Particle(e.pageX, e.pageY) );	});	//The thing that removes a point.	canvasBody.addEventListener("contextmenu", function(e){	e.preventDefault();	particles.splice(particles.length - 1, 1); //Takes the last thing from the particles[];	});
})();
Astronomic particles - Script Codes
Astronomic particles - Script Codes
Home Page Home
Developer Moeid Saleem
Username moeidsaleem
Uploaded October 28, 2022
Rating 3
Size 3,784 Kb
Views 16,192
Do you need developer help for Astronomic particles?

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!

Moeid Saleem (moeidsaleem) Script Codes
Name
Astronomic particles
Snow
A Pen by Moeid Saleem
TEP landing page
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!