JSFiddle - React, Tailwind, and code Playground

by brianflanagan

HTML

<div class="rigidBody" id="circle03"></div>
<div class="rigidBody" id="circle04"></div>
<div id="world"></div>

CSS

.rigidBody     {height:30px; width:30px; border-radius:1000px; border:8px solid #999999; position:absolute;}

#world         {position:absolute; top:0; left:0; width:500px; height:400px; border:1px solid #990000;}
#circle01      {border-color:#000;}
#circle02      {border-color:#900;}
#circle03      {border-color:#090;}
#circle04      {border-color:#009;}

JavaScript

var GRAVITY = {
    'x': 0,
    'y': .0005
};

var FRICTION = {
    'x': .01,
    'y': .01
};

(function($){
    $.fn.rigidBody = function(options){
        var defaults = {
            node: $(this),
            mass: 1,
            isStatic: false,
            isColliding: false,
            
            velocity: {
                x: -1,
                y: 1
            },
            
            acceleration: {
                x: 0,
                y: 0
            },
            
            position: {
                x: 0,
                y: 0
            },
            
            force: {
                x: 0,
                y: 0
            },
            
            calculateVelocity: function(frame){
                var obj = {
                    x: this.acceleration.x + this.velocity.x,
                    y: this.acceleration.y + this.velocity.y
                }
                return obj;
            },
            
            calculatePosition: function(){
                var obj = {
                    x: this.position.x,
                    y: this.position.y
                }
                    
                if(Math.abs(this.velocity.y) > 0){
                    if(!this.isStatic){
                        this.acceleration.x += GRAVITY.x;
                        this.acceleration.y += GRAVITY.y;
                    }

                    obj = {
                        x: (this.velocity.x + this.position.x) * this.acceleration.x + this.velocity.x + this.position.x,
                        y: (this.velocity.y + this.position.y) * this.acceleration.y + this.velocity.y + this.position.y
                    }
                    this.position = obj;
                }
                return obj;
            },
            
            calculateForce: function(){
                var obj = {
                    x: this.mass * this.acceleration.x,
                    y: this.mass * this.acceleration.y
                }
                return...