Всплывающие пузырьки на HTML5 Canvas
|
1 2 3 4 5 6 7 8 9 |
#canvas { -webkit-filter: blur(1px); filter: blur(1px); } body { background-image: -webkit-linear-gradient(bottom, #0B2E59 -10%, #69D2E7 20%, #6fDaEF 80%, #fffabb 105%); background-image: linear-gradient(to top, #0B2E59 -10%, #69D2E7 20%, #6fDaEF 80%, #fffabb 105%); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<canvas id="canvas"></canvas> <script> //Converting this code into a particle system soonnn! var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var circleArray = []; //Color array to look like bubbles var ballColorSelections = ['#A7DBD8', '#EFEFEF', '#ADF7D3', '#88F7D2']; //Global settings var settings = { maxCount: 400, //Reversed the bounce from collisions to create an attraction bounce: -0.05, force: -1.25, gravity: -0.01 } //Just for my profile background, using the CSS here for it too ;) document.body.style.overflow = 'hidden'; canvas.height = window.innerHeight; canvas.width = window.innerWidth; createCircle(settings.maxCount); window.addEventListener('resize', function() { canvas.height = window.innerHeight; canvas.width = window.innerWidth; }); function Circle() { this.positionX = (Math.random() * window.innerWidth / 2) + window.innerWidth / 4; this.positionY = window.innerHeight; this.radius = Math.floor((Math.random() * window.innerWidth * 0.005) + 1); this.velocityY = (Math.random() * 100) / 100 * -1; this.velocityX = (Math.random() * 100) / 100 * -1; this.color = ballColorSelections[Math.floor(Math.random() * 5)]; } function createCircle(max) { for (var i = 0; i < max; i++) { var circleObject = new Circle; circleObject.id = i; circleArray.push(circleObject); } //After creation of circle attributes, the animations begin moveCircle(); } function drawCircle(object) { for (var i = 0; i < object.length; i++) { context.beginPath(); context.arc(object[i].positionX, object[i].positionY, object[i].radius, 0, 2 * Math.PI); context.fillStyle = object[i].color; context.fill(); context.closePath(); } } function moveCircle() { context.fillStyle = "#69D2E7"; context.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < circleArray.length; i++) { collideCircle(circleArray, circleArray[i]); circleArray[i].velocityY += settings.gravity; circleArray[i].positionY += circleArray[i].velocityY; circleArray[i].positionX += circleArray[i].velocityX; if (circleArray[i].positionY > 0 - circleArray[i].radius) { circleArray[i].positionY += circleArray[i].velocityY; } else { circleArray[i].velocityY = (Math.random() * 100) / 100 * -1; circleArray[i].positionX = (Math.random() * window.innerWidth); circleArray[i].positionY = window.innerHeight; } if (circleArray[i].positionX > canvas.width + circleArray[i].radius || circleArray[i].positionX < 0 - circleArray[i].radius) { circleArray[i].positionX = (Math.random() * window.innerWidth); circleArray[i].positionY = window.innerHeight; } } function collideCircle(collideObject, circleObject) { for (var j = circleObject.id + 1; j < collideObject.length; j++) { var distanceX = collideObject[j].positionX - circleObject.positionX; var distanceY = collideObject[j].positionY - circleObject.positionY; var distance = Math.floor(Math.sqrt((distanceX * distanceX) + (distanceY * distanceY))); //Inflated the minimum distance to attract other particles var minimumDistance = collideObject[j].radius + circleObject.radius * 10; if (distance <= minimumDistance) { var angle = Math.atan2(distanceY, distanceX); var targetX = circleObject.positionX + Math.cos(angle) * minimumDistance; var targetY = circleObject.positionY + Math.sin(angle) * minimumDistance; var angleX = parseInt((targetX - collideObject[j].positionX) * settings.bounce) / 50; var angleY = parseInt((targetY - collideObject[j].positionY) * settings.bounce) / 50; circleObject.velocityX -= angleX; circleObject.velocityY -= angleY; collideObject[j].velocityX += angleX; collideObject[j].velocityY += angleY; } } } drawCircle(circleArray); requestAnimationFrame(moveCircle); } </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
