const randRange = (min, max) => Math.floor(Math.random() * (max - min + 1) + min); class _node { constructor(target, size = 1, count = 100, speed = .5) { this.canvas = document.getElementById(target); let wrap = this.canvas.parentNode; this.width = wrap.clientWidth; this.height = wrap.clientHeight; this.size = size; this.count = count; this.weight = 1; this.ratio = 1 / 50000; this.max = 100; this.speed = speed; this.stage = new createjs.Stage(this.canvas); this.particles = []; this.colorInt = Math.floor(Math.random() * 0xFFFFFF) * 1000; this.line = new createjs.Shape(); this.color = createjs.Graphics.getRGB(this.colorInt); this.canvas.width = this.width; this.canvas.height = this.height; if (window.devicePixelRatio) { this.canvas.width *= window.devicePixelRatio; this.canvas.height *= window.devicePixelRatio; this.canvas.style.width = this.canvas.width / window.devicePixelRatio + 'px'; this.canvas.style.height = this.canvas.height / window.devicePixelRatio + 'px'; this.size *= window.devicePixelRatio; this.weight *= window.devicePixelRatio; this.speed *= window.devicePixelRatio; } this.stageWidth = this.canvas.width; this.stageHeight = this.canvas.height; this.stage.addChild(this.line); for (let i = 0; i < this.count; i++) { /** * ステージからはみ出さない位置に */ let x = randRange(this.size * 2, this.stageWidth - this.size * 2), y = randRange(this.size * 2, this.stageHeight - this.size * 2); let velocityX = (Math.random() - .5) * this.speed, velocityY = (Math.random() - .5) * this.speed, particle = this.createShape(this.size, this.color, x, y, velocityX, velocityY); this.particles.push(particle); this.stage.addChild(particle); } createjs.Ticker.timingMode = createjs.Ticker.RAF; createjs.Ticker.addEventListener('tick', () => this.move()); } createShape(radius, color, nX, nY, vX, vY) { let shape = new createjs.Shape(); shape.graphics.beginFill(color); shape.graphics.drawCircle(0, 0, radius); shape.x = nX; shape.y = nY; shape.velocityX = vX; shape.velocityY = vY; return shape; } move() { for (let i = 0; i < this.count; i++) { let particle = this.particles[i], x = particle.x, y = particle.y; /** * 反転させる */ this.insideX(x) ? particle.velocityX *= -1 : 0; this.insideY(y) ? particle.velocityY *= -1 : 0; x += particle.velocityX; y += particle.velocityY; particle.x = x; particle.y = y; } /** * ここを消すと軌跡を残す */ this.line.graphics.clear(); for (let i = 0; i < this.count - 1; i++) { let a = this.particles[i]; for (let j = i + 1; j < this.count; j++) { let b = this.particles[j]; this.spring(a, b); } } this.stage.update(); } insideX(x) { return x >= (this.stageWidth - this.size * 2) || x <= this.size * 2; } insideY(y) { return y >= (this.stageHeight - this.size * 2) || y <= this.size * 2; } spring(a, b) { let ax = a.x, ay = a.y, bx = b.x, by = b.y, distanceX = bx - ax, distanceY = by - ay, squareX = distanceX * distanceX, squareY = distanceY * distanceY, limit = this.max * this.max; if (squareX + squareY < limit) { let distance = Math.sqrt(squareX + squareY); let color = createjs.Graphics.getRGB(this.colorInt, (this.max - distance) / this.max); let accelX = distanceX * this.ratio; let accelY = distanceY * this.ratio; !this.insideX(ax) ? a.velocityX += accelX : 0; !this.insideY(ay) ? a.velocityY += accelY : 0; !this.insideX(bx) ? b.velocityX -= accelX : 0; !this.insideY(by) ? b.velocityY -= accelY : 0; this.drawLine(this.weight, color, ax, ay, bx, by); } } drawLine(stroke, color, beginX, beginY, endX, endY) { let shape = this.line.graphics; shape.setStrokeStyle(stroke); shape.beginStroke(color); shape.moveTo(beginX, beginY); shape.lineTo(endX, endY); } } new _node('canvas', 1, 50, 1);