JSFiddle - React, Tailwind, and code Playground

by soulwire

JavaScript

// ------------------------------
// Point
// ------------------------------

var Point = function( x, y ) {
    this.x = x || 0;
    this.y = y || 0;
};

Point.prototype.clone = function() {
    return new Point( this.x, this.y );
};

// ------------------------------
// Path
// ------------------------------

var Path = function( start, numPoints, randomness ) {
    
    this.points = null;
    this.start = start;
    this.numPoints = numPoints;
    this.randomness = randomness;
    
    this.generate();
};

Path.prototype.generate = function() {
    
    this.points = [ this.start ]
    
    var angle = 0.0;
    var step = 10.0;
    var point = this.start.clone();

    for ( var i = 0; i < this.numPoints; i++ ) {
        
        angle += (Math.random() - 0.5) * Math.PI * this.randomness;
        
        point.x += Math.cos( angle ) * step;
        point.y += Math.sin( angle ) * step;
        
        this.points.push( point.clone() );
    }
};

// ------------------------------
// Worm
// ------------------------------

var Worm = function( path, thickness ) {
    
    this.path = path;
    this.points = null;
    this.thickness = thickness;
    
    this.generate();
};

Worm.prototype.generate = function() {
    
    this.points = [];
    
    var point, next;
    
    for ( var i = 0, n = this.path.points.length; i < n; i++ ) {
        point = this.path.points[i];
    }
};

// ------------------------------
// Renderer
// ------------------------------

var Renderer = function( width, height ) {
    this.canvas = document.createElement( 'canvas' );
    this.ctx = this.canvas.getContext( '2d' );
    this.canvas.width = width || 500;
    this.canvas.height = height || 500;
};

Renderer.prototype.renderPoints = function( points ) {
        
    var point = points[0];
    
    this.ctx.beginPath();
    this.ctx.moveTo();

    for ( var i = 0, n = points.length; i < n; i++ ) {
        point = points[i];
        this.ctx.lineTo( point.x, point.y );
    }
    
  ...