diff --git a/src/css/styles.css b/src/css/styles.css new file mode 100644 index 0000000..4da0f71 --- /dev/null +++ b/src/css/styles.css @@ -0,0 +1,13 @@ +* { + margin: 0; + padding: 0; +} + +html, body { + width: 100%; + height: 100%; +} + +canvas { + display: block; +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index fbd7b37..5e03bea 100644 --- a/src/index.html +++ b/src/index.html @@ -5,9 +5,10 @@ Assay - + + diff --git a/src/scripts/index.js b/src/scripts/index.js index 7d09def..52903e9 100644 --- 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) +} \ No newline at end of file diff --git a/src/scripts/particle.js b/src/scripts/particle.js index a95d52d..5b1ade1 100644 --- a/src/scripts/particle.js +++ b/src/scripts/particle.js @@ -1,18 +1,12 @@ 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) { @@ -20,53 +14,27 @@ export default class Particle { 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 } }