JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<script src="https://raw.github.com/soulwire/sketch.js/master/js/sketch.js"></script>
<div id="container"></div>

JavaScript

function curveThroughPoints( points, ctx ) {
    
    if ( points.length < 3 ) return;

    var i, n, a, b, x, y;
    
    for ( i = 1, n = points.length - 2; i < n; i++ ) {

        a = points[i];
        b = points[i + 1];
        
        x = ( a.x + b.x ) * 0.5;
        y = ( a.y + b.y ) * 0.5;

        ctx.quadraticCurveTo( a.x, a.y, x, y );
    }

    a = points[i];
    b = points[i + 1];
    
    ctx.quadraticCurveTo( a.x, a.y, b.x, b.y );
}

function drawPoints( points, ctx ) {
    
    for ( var i = 0; i < points.length; i++ ) {
        ctx.beginPath();
        ctx.arc( points[i].x, points[i].y, 5, 0, TWO_PI );
        ctx.stroke();
    }
}

var points = [];

Sketch.create({
    
    container: document.getElementById( 'container' ),
    
    setup: function() {
    },
    
    draw: function() {
        
        var t = this.millis * 0.0004;        
        var pulse = pow( sin( TWO_PI * ( t % 1 ) ), 12 );
        
        var cx = this.width / 2;
        var cy = this.height / 2;
        
        if ( points.length ) {
            this.beginPath();
            curveThroughPoints( points, this );
            this.lineTo( points[0].x, points[0].y );
            this.fillStyle = 'rgba(0,0,0,0.2)';
            this.fill();
        }
        
        drawPoints( points, this );
    },
    
    click: function() {
        
        points.push({
            x: this.mouse.x,
            y: this.mouse.y
        });
    },
    
    keydown: function() {
        points = [];
        this.clear();
    }
});