dimkouv/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Particles</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="background"></canvas>

    <div class="hello-friend">
        hello friend : elements number

        <input id="particles-num" type="number" placeholder="particles-number" value=50 onchange=drawParticles()>
    </div>


    <script src="particles.js"></script>
</body>
</html>

## particles.js
let canvas = document.getElementById('background')
let ctx = canvas.getContext('2d')
let fps = 20
let animationInterval = null
let particles = []

function randInt(minimum, maximum){
    return Math.round(Math.random() * (maximum - minimum) + minimum)
}

class Particle {
    constructor(posX, posY, radius, color) {
        this.posX = posX
        this.posY = posY
        this.color = color
        this.radius = radius

        this.innerRadius = radius / randInt(3, 10)
        this.outerRadius = radius + 5

        let grd = ctx.createRadialGradient(posX, posY, this.innerRadius, posX, posY, this.outerRadius);
        grd.addColorStop(0, color);
        grd.addColorStop(1, 'black');
        this.gradient = grd

        this.movementX = 0
        this.movementY = 0
    }

    move() {
        this.movementX += randInt(-1, 1)
        this.movementY += randInt(-1, 1)
        this.posX += this.movementX % 10
        this.posY += this.movementY % 10
        this.posX %= canvas.width
        this.posY %= canvas.height

        let grd = ctx.createRadialGradient(this.posX, this.posY, this.innerRadius, this.posX, this.posY, this.outerRadius);
        grd.addColorStop(0, this.color);
        grd.addColorStop(1, 'black');
        this.gradient = grd
    }
}

function drawParticles() {
    let particlesNum = document.getElementById('particles-num').value
    if (animationInterval !== null) {
        clearInterval(animationInterval)
    }

    particles = []
    for (let i = 0; i < particlesNum; i++) {
        let color = [randInt(200, 255), randInt(200, 255), randInt(100, 125)]
        let opacity = randInt(2, 8) / 10
        color = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${opacity})`

        let radius = randInt(1, 5)

        let prob = randInt(1, 100)
        if (prob >= 95) {
            radius = randInt(5, 10)
        } else if (prob >= 90) {
            radius = randInt(3, 5)
        }

        let particle = new Particle(
            randInt(0, canvas.width),
            randInt(0, canvas.height),
            radius,
            color,
        )

        particles.push(particle)
    }

    animate(particles)

    animationInterval = window.setInterval(function() {
        animate(particles)
    }, 1000/fps)
}

function animate(particles) {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.beginPath();

    particles.forEach(p => {
        p.move()
        ctx.beginPath()
        ctx.arc(p.posX, p.posY, p.radius, 0, 2 * Math.PI)
        ctx.fillStyle = p.gradient
        ctx.fill()
    });
}

canvas.width = window.innerWidth
canvas.height = window.innerHeight

drawParticles()

document.addEventListener("click", function(event) {
    let particlesInput = document.getElementById('particles-num')
    let newParticlesNum = randInt(20, 100)
    particlesInput.value = parseInt(particlesInput.value, 10) + newParticlesNum

    for (let i = 0; i < newParticlesNum; i++) {
        let color = [randInt(200, 255), randInt(200, 255), randInt(100, 125)]
        let opacity = randInt(2, 8) / 10
        color = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${opacity})`

        let radius = randInt(1, 5)
        let prob = randInt(1, 100)
        if (prob >= 95) {
            radius = randInt(5, 10)
        } else if (prob >= 90) {
            radius = randInt(3, 5)
        }

        let particle = new Particle(
            event.clientX,
            event.clientY,
            radius,
            color,
        )

        particles.push(particle)
    }
})

## style.css
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

#background {
    z-index: -1;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgb(0,0,0);
}

.hello-friend {
    color: rgb(250, 250, 250);
    font-family: monospace;
    margin-top: 30%;
    text-align: center;
    background-color: rgb(10, 10, 10);
    border-top: 1px solid greenyellow;
    border-bottom: 1px solid greenyellow;
    padding: 10px;
}

.hello-friend input {
    border: none;
    border-radius: 3px;
    background-color: black;
    color: white;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Particles</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<canvas id="background"></canvas>

	<div class="hello-friend">
	hello friend : elements number

	<input id="particles-num" type="number" placeholder="particles-number" value=50 onchange=drawParticles()>
	</div>



	<script src="particles.js"></script>
	</body>
	</html>
	let canvas = document.getElementById('background')
	let ctx = canvas.getContext('2d')
	let fps = 20
	let animationInterval = null
	let particles = []

	function randInt(minimum, maximum){
	return Math.round(Math.random() * (maximum - minimum) + minimum)
	}

	class Particle {
	constructor(posX, posY, radius, color) {
	this.posX = posX
	this.posY = posY
	this.color = color
	this.radius = radius

	this.innerRadius = radius / randInt(3, 10)
	this.outerRadius = radius + 5

	let grd = ctx.createRadialGradient(posX, posY, this.innerRadius, posX, posY, this.outerRadius);
	grd.addColorStop(0, color);
	grd.addColorStop(1, 'black');
	this.gradient = grd

	this.movementX = 0
	this.movementY = 0
	}

	move() {
	this.movementX += randInt(-1, 1)
	this.movementY += randInt(-1, 1)
	this.posX += this.movementX % 10
	this.posY += this.movementY % 10
	this.posX %= canvas.width
	this.posY %= canvas.height

	let grd = ctx.createRadialGradient(this.posX, this.posY, this.innerRadius, this.posX, this.posY, this.outerRadius);
	grd.addColorStop(0, this.color);
	grd.addColorStop(1, 'black');
	this.gradient = grd
	}
	}

	function drawParticles() {
	let particlesNum = document.getElementById('particles-num').value
	if (animationInterval !== null) {
	clearInterval(animationInterval)
	}

	particles = []
	for (let i = 0; i < particlesNum; i++) {
	let color = [randInt(200, 255), randInt(200, 255), randInt(100, 125)]
	let opacity = randInt(2, 8) / 10
	color = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${opacity})`

	let radius = randInt(1, 5)

	let prob = randInt(1, 100)
	if (prob >= 95) {
	radius = randInt(5, 10)
	} else if (prob >= 90) {
	radius = randInt(3, 5)
	}

	let particle = new Particle(
	randInt(0, canvas.width),
	randInt(0, canvas.height),
	radius,
	color,
	)

	particles.push(particle)
	}

	animate(particles)

	animationInterval = window.setInterval(function() {
	animate(particles)
	}, 1000/fps)
	}

	function animate(particles) {
	ctx.clearRect(0, 0, canvas.width, canvas.height)
	ctx.beginPath();

	particles.forEach(p => {
	p.move()
	ctx.beginPath()
	ctx.arc(p.posX, p.posY, p.radius, 0, 2 * Math.PI)
	ctx.fillStyle = p.gradient
	ctx.fill()
	});
	}

	canvas.width = window.innerWidth
	canvas.height = window.innerHeight

	drawParticles()

	document.addEventListener("click", function(event) {
	let particlesInput = document.getElementById('particles-num')
	let newParticlesNum = randInt(20, 100)
	particlesInput.value = parseInt(particlesInput.value, 10) + newParticlesNum

	for (let i = 0; i < newParticlesNum; i++) {
	let color = [randInt(200, 255), randInt(200, 255), randInt(100, 125)]
	let opacity = randInt(2, 8) / 10
	color = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${opacity})`

	let radius = randInt(1, 5)
	let prob = randInt(1, 100)
	if (prob >= 95) {
	radius = randInt(5, 10)
	} else if (prob >= 90) {
	radius = randInt(3, 5)
	}

	let particle = new Particle(
	event.clientX,
	event.clientY,
	radius,
	color,
	)

	particles.push(particle)
	}
	})
	html, body {
	margin: 0 !important;
	padding: 0 !important;
	}

	#background {
	z-index: -1;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgb(0,0,0);
	}

	.hello-friend {
	color: rgb(250, 250, 250);
	font-family: monospace;
	margin-top: 30%;
	text-align: center;
	background-color: rgb(10, 10, 10);
	border-top: 1px solid greenyellow;
	border-bottom: 1px solid greenyellow;
	padding: 10px;
	}

	.hello-friend input {
	border: none;
	border-radius: 3px;
	background-color: black;
	color: white;
	}