JSFiddle - React, Tailwind, and code Playground

by Hooman Askari

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js"></script>
<canvas id="myCanvas" width="500" height="500"></canvas>

<script type="text/paperscript" canvas="myCanvas">
    // vars
    var point1 = [0, 100];
    var point2 = [120, 100];
    var point3 = [120, 150];
    
    // draw the line
    var path = new Path();
    path.add(new Point(point1), new Point(point2), new Point(point3));
    path.strokeColor = "#FFF";
    path.closed = true;
    
    // draw the circle
    var circle = new Path.Circle(0,100,4);
    circle.strokeColor = "#FFF";
    
    // target to move to
    var target = point2;

    // how many frame does it take to reach a target
    var steps = 50;

    // defined vars for onFrame
    var dX       = 0;
    var dY       = 0;

    // position circle on path
    circle.position.x = target[0];
    circle.position.y = target[1];

    function onFrame(event) {
        
        //check if cricle reached its target
        if (Math.round(circle.position.x) == target[0] && Math.round(circle.position.y) == target[1]) {
            switch(target) {
                case point1:
                    target = point2;
                    steps = 50;
                    break;
                case point2:
                		steps = 50;
                    target = point3;
                    break;
                case point3:
                		steps = 750;
                    target = point1;
                    break;
            }

            // calculate the dX and dY
            dX = (target[0] - circle.position.x)/steps;
            dY = (target[1] - circle.position.y)/steps;

        }

        // do the movement
        circle.position.x += dX;
        circle.position.y += dY;
    }
</script>

CSS

canvas { background: #000; }