Last active
January 5, 2020 15:06
-
-
Save dimkouv/23b7c8a4f7a8a998c8a73127d5b8a64f to your computer and use it in GitHub Desktop.
Playing with html canvas https://codepen.io/dimkouv/pen/ZEYvQYV
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) | |
| } | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment