border-radius · bosear · Jun 21, 2018
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -0,0 +1,13 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
+canvas {
+    display: block;
+}
diff --git a/src/index.html b/src/index.html
@@ -5,9 +5,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Assay</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>body { overflow: hidden; }</style>
+    <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
+    <canvas id="canvas"></canvas>
     <script src="scripts/index.js"></script>
 </body>
 </html>
diff --git a/src/scripts/index.js b/src/scripts/index.js
@@ -1,10 +1,68 @@
 import Particle from './particle'
 
 const particles = []
+const canvas = document.getElementById('canvas')
+const context = canvas.getContext('2d')
+const baseScreenSize = 1366 * 662
+let currentScreenSize = window.innerHeight * window.innerWidth
 
 document.addEventListener('click', event => {
-    const initialX = event.clientX
-    const initialY = event.clientY
+    const coordinates = {};
+    coordinates.initialX = event.clientX
+    coordinates.initialY = event.clientY
 
-    particles.push(new Particle(initialX, initialY))
+    particles.push(new Particle(coordinates, canvas))
 })
+
+window.addEventListener('resize', resizeCanvas, false)
+
+const timeout = 1000 / 60
+const interval = setInterval(redraw, timeout)
+resizeCanvas()
+
+function redraw() {
+    particles.forEach(particle => {
+        const to = particle.speed * getCurrentSpeed(particle)
+        const from = to * -1
+        const prevX = particle.x
+        const prevY = particle.y
+
+        let dx = particle.getRandomNumber(from, to)
+        let dy = particle.getRandomNumber(from, to)
+
+        if ((prevX + dx + particle.radius > canvas.width) || prevX + dx < particle.radius) {
+            dx = -dx
+        }
+        if ((prevY + dy + particle.radius > canvas.height) || prevY + dy < particle.radius) {
+            dy = -dy
+        }
+
+        const nextX = prevX + dx
+        const nextY = prevY + dy
+
+        particle.setPosition(nextX, nextY)
+    });
+
+    context.clearRect(0, 0, canvas.width, canvas.height)
+
+    for (let i = 0; i < particles.length; i++) {
+        context.beginPath()
+        context.arc(particles[i].x, particles[i].y, particles[i].radius, 0, Math.PI * 2)
+        context.fillStyle = particles[i].color
+        context.fill()
+    }
+
+}
+
+function resizeCanvas() {
+    canvas.width = window.innerWidth
+    canvas.height = window.innerHeight
+    currentScreenSize = window.innerWidth * window.innerHeight
+    redraw()
+}
+
+function getCurrentSpeed(particle) {
+    let ratio = baseScreenSize / currentScreenSize + 1
+
+    return parseInt(ratio)
+}
diff --git a/src/scripts/particle.js b/src/scripts/particle.js
@@ -1,72 +1,40 @@
 export default class Particle {
-    constructor(initialX, initialY) {
-        this.speed = this.getRandomNumber(10, 20)
+    constructor(coordinates, canvas) {
+        this.speed = this.getRandomNumber(2, 3)
+        this.radius = this.getRandomNumber(20, 70)
 
-        this.el = document.createElement('div')
-        this.el.style.position = 'absolute'
-        this.el.style.transition = 'all 0.1s ease 0s'
-        this.el.style['border-radius'] = '50%'
-
-        document.body.appendChild(this.el)
-
-        this.setPosition(initialX, initialY)
-        this.setRandomSize()
         this.setRandomColor()
-        this.startBrownianMotion()
+
+        this.correctionCoordinates(coordinates, canvas)
+        this.setPosition(coordinates.initialX, coordinates.initialY)
     }
 
     getRandomNumber(from, to) {
         const rnd = Math.random()
         return parseInt((rnd * (to - from)) + from)
     }
 
+    setPosition(x, y) {
+        this.x = x
+        this.y = y
+    }
+
     setRandomColor() {
         const rnd = Math.random()
         const hex = 0x1000000 + rnd * 0xffffff
         const color = hex.toString(16).substr(1, 6)
-        this.el.style.background = ['#', color].join('')
-    }
-
-    getPixels(property) {
-        const value = this.el.style[property]
-        return parseInt(value)
-    }
-
-    setPixels(property, value) {
-        this.el.style[property] = [value, 'px'].join('')
+        this.color = ['#', color].join('')
     }
 
-    setRandomSize() {
-        const side = this.getRandomNumber(20, 70)
-        this.setPixels('width', side)
-        this.setPixels('height', side)
-    }
-
-    getPositionX() {
-        return this.getPixels('left')
-    }
-
-    getPositionY() {
-        return this.getPixels('top')
-    }
-
-    setPosition(x, y) {
-        this.setPixels('left', x)
-        this.setPixels('top', y)
-    }
-
-    moveRandomly() {
-        const to = parseInt(this.speed / 2)
-        const from = to * -1
-        const prevX = this.getPositionX()
-        const prevY = this.getPositionY()
-        const nextX = prevX + this.getRandomNumber(from, to)
-        const nextY = prevY + this.getRandomNumber(from, to)
-        this.setPosition(nextX, nextY)
-    }
+    correctionCoordinates(coordinates, canvas) {
+        if (coordinates.initialX < this.radius)
+            coordinates.initialX = this.radius
+        if (coordinates.initialX + this.radius > canvas.width)
+            coordinates.initialX = canvas.width - this.radius
 
-    startBrownianMotion() {
-        const timeout = 100
-        const interval = setInterval(this.moveRandomly.bind(this), timeout)
+        if (coordinates.initialY < this.radius)
+            coordinates.initialY = this.radius
+        if (coordinates.initialY + this.radius > canvas.height)
+            coordinates.initialY = canvas.height - this.radius
     }
 }