JSFiddle - React, Tailwind, and code Playground

by icodeforlove

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">
    paper.Path.prototype.getPointAtPercent = function (percent) {
	    return this.getLocationAt(percent * this.length).getPoint();
    };

    // 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 = 200;

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

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

		var frame = 0;
    
    function onFrame(event) {
    		var point = path.getPointAtPercent(frame / steps);
        circle.position.x = point.x;
        circle.position.y = point.y;
        frame++;
        
        if (frame === steps) {
					frame = 0;
				}
    }
</script>

CSS

canvas { background: #000; }