JSFiddle - React, Tailwind, and code Playground

by garmashnikolay

HTML

<canvas id="canvas" width="400" height="250"></canvas>

SCSS

#canvas{
    background: #FAFAFA;
}

CoffeeScript

document.onreadystatechange = ->
  if document.readyState == "complete"
     initParticles()
        
class Vector
  constructor: (_x, _y) ->
    this.x = _x
    this.y = _y
  plus: (v2) ->
    new Vector(this.x + v2.x, this.y + v2.y)
  minus: (v2) ->
    new Vector(this.x - v2.x, this.y - v2.y)
  scalarMultiply: (v2) ->
    this.x * v2.x * this.y * v2.y
  length: (v = this) ->
    Math.sqrt(Math.pow(v.x, 2) + Math.pow(v.y, 2))
  multiply: (k) ->
    new Vector(k * this.x, k * this.y)
  devide: (k) ->
    new Vector(this.x / k, this.y / k)
  opposite: ->
    new Vector(-1 * this.x, -1 * this.y)
  normalize: ->
    len = this.length()
    new Vector(this.x / len, this.y / len)
        
s = 
  canvas: document.getElementById("canvas")
  acceleration1: 0.01
  acceleration2: 0.02
  max_speed_x: 1.8
  max_speed_y: 1.8
    
class Particle
  constructor: (_color) ->
    _x = Math.random() * 50
    _y = Math.random() * 30
    this.color = _color
    this.radius = 3
    this.pos = new Vector(_x, _y)
    this.speed = new Vector(0, 0)
    this.pbest = this.pos
    
  targetCorrection: (v) ->
    v.plus(s.target.minus(this.pos).multiply(0.005))
    
  collisionCorrection: (v) ->
    collider = new Vector(s.width / 4, s.height / 3)
    pos_to_collider = collider.minus(this.pos)
    co_direction = v.scalarMultiply(pos_to_collider) > 0
    colLength = pos_to_collider.length()
    _speed = v
    if colLength <= this.radius + s.col_radius + 30 && co_direction
      _speed = v.minus(pos_to_collider.devide(colLength))
    _speed
  
  limitSpeed: (v) ->
    _x = v.x
    _y = v.y
    _x = s.max_speed_x if v.x > s.max_speed_x
    _x = -s.max_speed_x if v.x < -s.max_speed_x
    _y = s.max_speed_y if v.y > s.max_speed_y
    _y = -s.max_speed_y if v.y < -s.max_speed_y
    new Vector(_x, _y)
     
  calcCords: ->
    @calcSpeed()
    this.speed = @targetCorrection(this.speed)
    this.speed = @collisionCorrection(this.speed)
    this.speed = @limitSpeed(this.speed)
    this.pos =...