JSFiddle - React, Tailwind, and code Playground

by colethecoder

HTML

<script src="https://raw.github.com/paperjs/paper.js/master/dist/paper.js"></script>
<canvas id="BeaconCanvas" width="400" height="400"></canvas>

<script type="text/paperscript" canvas="BeaconCanvas">
    var beacons = new Beacons();
beacons.createBeacon(100, 170, 'green');
beacons.createBeacon(170, 100, 'red');



function onFrame(event) {
    beacons.animate();
}

function Beacons() {
    var beaconEntities = new Array();

    this.createBeacon = function (x, y, color) {
        var beacon = new Beacon(x, y, color);
        beaconEntities.push(beacon);
    };

    this.removeBeacon = function (x, y) {
        for (var i = beaconEntities.length - 1; i >= 0; i--) {
            if (beaconEntities[i].x === x && beaconEntities[i].y === y) {
                beaconEntities[i].remove();
                beaconEntities.splice(i, 1);
            }
        }
    };

    this.animate = function () {
        for (var i = beaconEntities.length - 1; i >= 0; i--) {
            beaconEntities[i].animate();
        }
    };
}

function Beacon(x,y,color) {
    this.x = x;
    this.y = y;
    this.circle = draw(x, y, color, 1);
    this.circleTemp = draw(x, y, color, 0);
    this.count = 0;
    this.scale = 0;

    function draw (x,y,color,alpha) {
        var circleToDraw = new Path.Circle(new Point(x, y), 1);
        circleToDraw.strokeColor = color;
        circleToDraw.strokeWidth = 4;
        circleToDraw.strokeColor.alpha = alpha;
        return circleToDraw;
    };
    
    this.remove = function () {
        this.circle.remove();
    };

    this.animate = function () {
        if (this.count < 120) {
            var scaleFactor = 1.04;
            this.circle.scale(scaleFactor);
            this.scale = this.scale * scaleFactor;
            var alpha = this.circle.strokeColor.alpha - 0.01;
            this.circle.strokeColor.alpha = alpha;
        }
        else {
            this.circle.remove();
            this.circle = this.circleTemp.clone();
            this.scale =...