JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<canvas id="myCanvas" resize></canvas>

JavaScript

// Adapted from the following Processing example:
// http://processing.org/learning/topics/follow3.html

// The amount of points in the path:
var numPoints = 25;

// The distance between the points:
var distance = 35;

var path = new Path({
    strokeColor: '#E4141B',
    strokeWidth: 20,
    strokeCap: 'round',
    strokeJoin: 'round'
});

var start = view.center / [10, 1];
for (var i = 0; i < numPoints; i++)
    path.add(start + new Point(i * distance, 0));

function onMouseMove(event) {
    path.firstSegment.point = event.point;
    for (var i = 0; i < numPoints - 1; i++) {
        var segment = path.segments[i];
        var nextSegment = segment.next;
        var vector = segment.point - nextSegment.point;
        vector.length = distance;
        nextSegment.point = segment.point - vector;
    }
    path.smooth();
}

function onMouseDown(event) {
    path.fullySelected = true;
    path.strokeColor = '#e08285';
}

function onMouseUp(event) {
    path.fullySelected = false;
    path.strokeColor = '#e4141b';
}