background_anim.js

// Constants
const FPS = 60;

const DOTS_NUM_VALUES = [100, 75];
const INITIAL_VELOCITY_MAX_VALUES = [25, 15];
const VELOCITY_MAX_VALUES = [40, 30];
const RADIUS_MIN_VALUES = [2, 0.5];
const RADIUS_MAX_VALUES = [6, 2];
const LINE_DISTANCE_MAX_VALUES = [120, 55];
const LINE_WIDTH_VALUES = [0.2, 0.08];
const DOT_PUSH_DISTANCE_VALUES = [25, 20];

const DOT_FILL_COLOUR = "#666";
const DOT_OUTLINE_COLOUR = "#444";
const LINE_COLOUR = "#777";

const VELOCITY_SLOWDOWN_MULTIPLIER = 0.998;
const VELOCITY_PUSH_MULTIPLIER = 1.2;

let SHOW_VELOCITIES = false;

// ----

// Sort-of constants (change with window size)
let DOTS_NUM = 100;

let INITIAL_VELOCITY_MAX = 25;
let VELOCITY_MAX = 40;
let RADIUS_MIN = 1;
let RADIUS_MAX = 4;

let LINE_DISTANCE_MAX = 150;
let LINE_WIDTH = 0.2;

let DOT_PUSH_DISTANCE = 25;

class Dot {
    constructor(x, y, radius, vx, vy) {
        this._x = x;
        this._y = y;
        this._radius = radius;
        this._vx = vx;
        this._initial_vx = vx;
        this._vy = vy;
        this._initial_vy = vy;
    }

    get x() {
        return this._x;
    }
    set x(value) {
        this._x = value;
    }
    get y() {
        return this._y;
    }
    set y(value) {
        this._y = value;
    }
    get radius() {
        return this._radius;
    }
    set radius(value) {
        this._radius = value;
    }
    get vx() {
        return this._vx;
    }
    set vx(value) {
        this._vx = value;