/*K137 2019*/ 'use strict'; let canvas, width, height, c, circles, minSize, maxSize; function initialize() { canvas = document.querySelector('#canvas'); width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; c = canvas.getContext('2d'); circles = []; minSize = width > height ? Math.floor(height / 150) : Math.floor(width / 150); maxSize = width > height ? Math.floor(height / 50) : Math.floor(width / 50); for(let q = 0; q < 100; q += 1) { circles.push(new Circle()); } canvas.addEventListener('click', toggleMoving, false); cycle(); } class Circle { constructor() { this.r = randomInt(minSize, maxSize); this.x = randomInt(this.r, width - this.r); this.y = randomInt(this.r, height - this.r); this.sc = randomColor(); this.fc = randomColor(); this.d = randomInt(0, 1) > 0 ? 1 : -1; this.s = randomInt(1, 5); this.a = degToRad(randomInt(0, 359)); this.rm = randomInt(0, 3); this.m = true; } draw() { c.strokeStyle = this.sc; c.fillStyle = this.fc; c.beginPath(); c.arc(this.x, this.y, this.r, 0, Math.PI * 2, false); c.closePath(); c.fill(); c.stroke(); } edges() { if(this.x < 0) this.x = width; if(this.y < 0) this.y = height; if(this.x > width) this.x = 0; if(this.y > height) this.y = 0; } reverseD() { this.d /= -this.d; } moveToRandomLinear() { this.x += this.s * this.d * Math.cos(this.a); this.y += this.s * this.d * Math.sin(this.a); this.edges(); } moveToLeftTop() { if(this.x < width / 2 && this.y < height / 2) { this.reverseD(); this.a = degToRad(randomInt(30, 60)); this.x += this.s * this.d * Math.cos(this.a); this.y += this.s * this.d * Math.sin(this.a); } if(this.x > width / 2 && this.y < height / 2) { this.reverseD(); this.a = degToRad(randomInt(60, 150)); this.x -= this.s * this.d * Math.cos(this.a); this.y += this.s * this.d * Math.sin(this.a); } if(this.x > width / 2 && this.y > height / 2) { this.reverseD(); this.a = degToRad(randomInt(150, 240)); this.x -= this.s * this.d * Math.cos(this.a); this.y -= this.s * this.d * Math.sin(this.a); } if(this.x < width / 2 && this.y > height / 2) { this.reverseD(); this.a = degToRad(randomInt(240, 330)); this.x += this.s * this.d * Math.cos(this.a); this.y -= this.s * this.d * Math.sin(this.a); } this.edges(); } moveToBottomRight() { if(this.x < width / 2 && this.y < height / 2) { this.reverseD(); this.a = degToRad(randomInt(30, 60)); this.x -= this.s * this.d * Math.cos(this.a); this.y -= this.s * this.d * Math.sin(this.a); } if(this.x > width / 2 && this.y < height / 2) { this.reverseD(); this.a = degToRad(randomInt(60, 150)); this.x += this.s * this.d * Math.cos(this.a); this.y -= this.s * this.d * Math.sin(this.a); } if(this.x > width / 2 && this.y > height / 2) { this.reverseD(); this.a = degToRad(randomInt(150, 240)); this.x += this.s * this.d * Math.cos(this.a); this.y += this.s * this.d * Math.sin(this.a); } if(this.x < width / 2 && this.y > height / 2) { this.reverseD(); this.a = degToRad(randomInt(240, 330)); this.x -= this.s * this.d * Math.cos(this.a); this.y += this.s * this.d * Math.sin(this.a); } this.edges(); } moveToRandomAngle() { this.a = degToRad(randomInt(0, 359)); this.x += this.s * this.d * Math.cos(this.a); this.y += this.s * this.d * Math.sin(this.a); this.edges(); } move() { if(this.m) { if(this.rm == 0) { this.moveToRandomLinear(); } else if(this.rm == 1) { this.moveToLeftTop(); } else if(this.rm == 2) { this.moveToBottomRight(); } else { this.moveToRandomAngle(); } } } } function randomInt(min, max) { return Math.floor(Math.random() * (1 + max - min) + min) } function degToRad(deg) { return deg * Math.PI / 180; } function randomColor() { return `rgba(${randomInt(0, 255)}, ${randomInt(0, 255)}, ${randomInt(0, 255)}, 0.${randomInt(1, 9)})`; } function clearCanvas() { c.clearRect(0, 0, width, height); } function drawBackground() { c.fillStyle = '#3E3E3E'; c.fillRect(0, 0, width, height); } function heartPath(w, h) { c.moveTo(Math.floor(w / 2.00), Math.floor(h / 3.70)); c.lineTo(Math.floor(w / 1.92), Math.floor(h / 4.00)); c.lineTo(Math.floor(w / 1.92), Math.floor(h / 4.17)); c.lineTo(Math.floor(w / 1.69), Math.floor(h / 5.88)); c.lineTo(Math.floor(w / 1.67), Math.floor(h / 5.88)); c.lineTo(Math.floor(w / 1.64), Math.floor(h / 6.25)); c.lineTo(Math.floor(w / 1.61), Math.floor(h / 6.25)); c.lineTo(Math.floor(w / 1.59), Math.floor(h / 6.67)); c.lineTo(Math.floor(w / 1.49), Math.floor(h / 6.67)); c.lineTo(Math.floor(w / 1.47), Math.floor(h / 7.14)); c.lineTo(Math.floor(w / 1.43), Math.floor(h / 7.14)); c.lineTo(Math.floor(w / 1.41), Math.floor(h / 6.67)); c.lineTo(Math.floor(w / 1.35), Math.floor(h / 6.67)); c.lineTo(Math.floor(w / 1.33), Math.floor(h / 6.25)); c.lineTo(Math.floor(w / 1.30), Math.floor(h / 6.25)); c.lineTo(Math.floor(w / 1.27), Math.floor(h / 5.56)); c.lineTo(Math.floor(w / 1.25), Math.floor(h / 5.56)); c.lineTo(Math.floor(w / 1.22), Math.floor(h / 5.00)); c.lineTo(Math.floor(w / 1.22), Math.floor(h / 4.76)); c.lineTo(Math.floor(w / 1.19), Math.floor(h / 4.35)); c.lineTo(Math.floor(w / 1.19), Math.floor(h / 4.17)); c.lineTo(Math.floor(w / 1.18), Math.floor(h / 4.00)); c.lineTo(Math.floor(w / 1.18), Math.floor(h / 3.70)); c.lineTo(Math.floor(w / 1.16), Math.floor(h / 3.57)); c.lineTo(Math.floor(w / 1.16), Math.floor(h / 3.23)); c.lineTo(Math.floor(w / 1.15), Math.floor(h / 3.13)); c.lineTo(Math.floor(w / 1.15), Math.floor(h / 2.50)); c.lineTo(Math.floor(w / 1.16), Math.floor(h / 2.44)); c.lineTo(Math.floor(w / 1.16), Math.floor(h / 2.22)); c.lineTo(Math.floor(w / 1.18), Math.floor(h / 2.17)); c.lineTo(Math.floor(w / 1.18), Math.floor(h / 2.08)); c.lineTo(Math.floor(w / 1.19), Math.floor(h / 2.04)); c.lineTo(Math.floor(w / 1.19), Math.floor(h / 2.00)); c.lineTo(Math.floor(w / 1.20), Math.floor(h / 1.96)); c.lineTo(Math.floor(w / 1.20), Math.floor(h / 1.92)); c.lineTo(Math.floor(w / 1.22), Math.floor(h / 1.89)); c.lineTo(Math.floor(w / 1.22), Math.floor(h / 1.85)); c.lineTo(Math.floor(w / 1.23), Math.floor(h / 1.82)); c.lineTo(Math.floor(w / 1.23), Math.floor(h / 1.79)); c.lineTo(Math.floor(w / 1.25), Math.floor(h / 1.75)); c.lineTo(Math.floor(w / 1.25), Math.floor(h / 1.72)); c.lineTo(Math.floor(w / 1.27), Math.floor(h / 1.69)); c.lineTo(Math.floor(w / 1.27), Math.floor(h / 1.67)); c.lineTo(Math.floor(w / 1.32), Math.floor(h / 1.59)); c.lineTo(Math.floor(w / 1.32), Math.floor(h / 1.56)); c.lineTo(Math.floor(w / 1.56), Math.floor(h / 1.32)); c.lineTo(Math.floor(w / 1.59), Math.floor(h / 1.32)); c.lineTo(Math.floor(w / 1.64), Math.floor(h / 1.28)); c.lineTo(Math.floor(w / 1.67), Math.floor(h / 1.28)); c.lineTo(Math.floor(w / 1.72), Math.floor(h / 1.25)); c.lineTo(Math.floor(w / 1.75), Math.floor(h / 1.25)); c.lineTo(Math.floor(w / 1.82), Math.floor(h / 1.22)); c.lineTo(Math.floor(w / 1.85), Math.floor(h / 1.22)); c.lineTo(Math.floor(w / 1.89), Math.floor(h / 1.20)); c.lineTo(Math.floor(w / 1.92), Math.floor(h / 1.20)); c.lineTo(Math.floor(w / 1.96), Math.floor(h / 1.19)); c.lineTo(Math.floor(w / 2.08), Math.floor(h / 1.19)); c.lineTo(Math.floor(w / 2.13), Math.floor(h / 1.20)); c.lineTo(Math.floor(w / 2.17), Math.floor(h / 1.20)); c.lineTo(Math.floor(w / 2.27), Math.floor(h / 1.23)); c.lineTo(Math.floor(w / 2.33), Math.floor(h / 1.23)); c.lineTo(Math.floor(w / 2.38), Math.floor(h / 1.25)); c.lineTo(Math.floor(w / 2.44), Math.floor(h / 1.25)); c.lineTo(Math.floor(w / 2.56), Math.floor(h / 1.28)); c.lineTo(Math.floor(w / 2.63), Math.floor(h / 1.28)); c.lineTo(Math.floor(w / 2.86), Math.floor(h / 1.33)); c.lineTo(Math.floor(w / 2.94), Math.floor(h / 1.33)); c.lineTo(Math.floor(w / 4.35), Math.floor(h / 1.56)); c.lineTo(Math.floor(w / 4.35), Math.floor(h / 1.59)); c.lineTo(Math.floor(w / 4.76), Math.floor(h / 1.67)); c.lineTo(Math.floor(w / 5.00), Math.floor(h / 1.69)); c.lineTo(Math.floor(w / 5.26), Math.floor(h / 1.72)); c.lineTo(Math.floor(w / 5.26), Math.floor(h / 1.75)); c.lineTo(Math.floor(w / 5.56), Math.floor(h / 1.79)); c.lineTo(Math.floor(w / 5.56), Math.floor(h / 1.82)); c.lineTo(Math.floor(w / 5.56), Math.floor(h / 1.85)); c.lineTo(Math.floor(w / 5.88), Math.floor(h / 1.89)); c.lineTo(Math.floor(w / 5.88), Math.floor(h / 1.92)); c.lineTo(Math.floor(w / 5.88), Math.floor(h / 1.96)); c.lineTo(Math.floor(w / 6.67), Math.floor(h / 2.00)); c.lineTo(Math.floor(w / 6.67), Math.floor(h / 2.08)); c.lineTo(Math.floor(w / 7.14), Math.floor(h / 2.13)); c.lineTo(Math.floor(w / 7.14), Math.floor(h / 2.22)); c.lineTo(Math.floor(w / 7.69), Math.floor(h / 2.27)); c.lineTo(Math.floor(w / 7.69), Math.floor(h / 2.50)); c.lineTo(Math.floor(w / 8.33), Math.floor(h / 2.56)); c.lineTo(Math.floor(w / 8.33), Math.floor(h / 3.13)); c.lineTo(Math.floor(w / 7.69), Math.floor(h / 3.23)); c.lineTo(Math.floor(w / 7.69), Math.floor(h / 3.57)); c.lineTo(Math.floor(w / 7.14), Math.floor(h / 3.70)); c.lineTo(Math.floor(w / 7.14), Math.floor(h / 4.00)); c.lineTo(Math.floor(w / 6.67), Math.floor(h / 4.17)); c.lineTo(Math.floor(w / 6.67), Math.floor(h / 4.35)); c.lineTo(Math.floor(w / 5.26), Math.floor(h / 5.26)); c.lineTo(Math.floor(w / 5.26), Math.floor(h / 5.56)); c.lineTo(Math.floor(w / 5.00), Math.floor(h / 5.56)); c.lineTo(Math.floor(w / 4.55), Math.floor(h / 6.25)); c.lineTo(Math.floor(w / 4.17), Math.floor(h / 6.25)); c.lineTo(Math.floor(w / 4.00), Math.floor(h / 6.67)); c.lineTo(Math.floor(w / 3.57), Math.floor(h / 6.67)); c.lineTo(Math.floor(w / 3.45), Math.floor(h / 7.14)); c.lineTo(Math.floor(w / 3.23), Math.floor(h / 7.14)); c.lineTo(Math.floor(w / 3.13), Math.floor(h / 6.67)); c.lineTo(Math.floor(w / 2.78), Math.floor(h / 6.67)); c.lineTo(Math.floor(w / 2.70), Math.floor(h / 6.25)); c.lineTo(Math.floor(w / 2.63), Math.floor(h / 6.25)); c.lineTo(Math.floor(w / 2.56), Math.floor(h / 5.88)); c.lineTo(Math.floor(w / 2.50), Math.floor(h / 5.88)); c.lineTo(Math.floor(w / 2.13), Math.floor(h / 4.17)); c.lineTo(Math.floor(w / 2.13), Math.floor(h / 4.00)); c.lineTo(Math.floor(w / 2.08), Math.floor(h / 3.85)); c.lineTo(Math.floor(w / 2.04), Math.floor(h / 3.70)); } function drawHeart() { c.fillStyle = 'rgba(190, 22, 42, 0.5)'; c.strokeStyle = 'rgba(116, 28, 32, 0.7)'; c.beginPath(); heartPath(width, height); c.closePath(); c.fill(); c.stroke(); } function toggleMoving() { for(let q = circles.length - 1; q >= 0; q -= 1) { circles[q].m = !circles[q].m; } } function drawText() { c.strokeStyle = 'rgba(34, 34, 34, 0.7)'; c.fillStyle = 'rgba(83, 64, 190, 0.7)'; c.font = `${maxSize * 4}px sans-serif`; c.textBaseline = 'middle'; c.textAlign = 'center'; c.fillText('Happy', width / 2, height / 2 - maxSize * 4); c.strokeText('Happy', width / 2, height / 2 - maxSize * 4); c.fillText('Birthday!', width / 2, height / 2 + maxSize * 4); c.strokeText('Birthday!', width / 2, height / 2 + maxSize * 4); } function draw() { clearCanvas(); drawBackground(); for(let q = circles.length - 1; q >= 0; q -= 1) { circles[q].move(); circles[q].draw(); } drawHeart(); drawText(); } function cycle() { draw(); requestAnimationFrame(cycle); } window.addEventListener('load', initialize, false);

HBTY