JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<script src="https://rawgithub.com/soulwire/Coffee-Physics/master/deploy/physics.js"></script>
<script src="https://rawgithub.com/soulwire/sketch.js/master/js/sketch.js"></script>

CSS

html, body {
    margin: 0;
}

JavaScript

var physics = new Physics();
physics.integrator = new Verlet();

var center = new Particle();
center.pos.set( 250, 250 );
center.fixed = true;

var a = new Particle();
var b = new Particle();
var c = new Particle();

a.pos.set( 200, 200 );
b.pos.set( 201, 200 );
c.pos.set( 202, 200 );

var collision = new Collision();
collision.pool.push( a, b, c );
a.behaviours.push( collision );
b.behaviours.push( collision );
c.behaviours.push( collision );

Sketch.create({
    setup: function() {
        
        this.randomise();
        this.globalAlpha = 0.5;
        physics.particles.push( a, b, c );
    },
    randomise: function() {
        
        a.setRadius( Math.random() * 100 );
        b.setRadius( Math.random() * 100 );
        c.setRadius( Math.random() * 100 );
        
        physics.springs = [ new Spring( center, a, 100, 0.8 ) ];
        physics.springs.push( new Spring( a, b, a.radius + b.radius, 0.9 ) );
        physics.springs.push( new Spring( a, c, a.radius + c.radius, 0.9 ) );
        physics.springs.push( new Spring( b, c, b.radius + c.radius, 0.9 ) );
    },
    mousedown: function() {
        this.randomise();
    },
    circ: function( x, y, r, c ) {
        this.beginPath();
        this.arc( x, y, r, 0, TWO_PI );
        this.fillStyle = c;
        this.fill();
    },
    draw: function() {
        physics.step();
        this.circ( a.pos.x, a.pos.y, a.radius, 'red' );
        this.circ( b.pos.x, b.pos.y, b.radius, 'green' );
        this.circ( c.pos.x, c.pos.y, c.radius, 'blue' );
    }
});