Edit in JSFiddle

// create a simple visualization
function n_body($p) {

    // canvas size
    $p.size(1100, 700);

    particle = function (i) {
        this.type = "particle";
        if (i == 0) {
            this.radius = 100;
            this.y = $p.height / 4;
            this.x = $p.width * 3 / 4;
            this.x_v = 0.001;
            this.y_v = 0.001;
            this.m = (4 / 3) * Math.PI * Math.pow((this.radius), 3);
            this.hue = 255;
        } else {
            this.radius = Math.pow(Math.random(), 4) * 15;
            this.y = $p.height / 2 + (Math.random() - Math.random()) * 100;
            this.x = $p.width * (1 / 6) + (Math.random() - Math.random()) * 100 ;
            this.x_v = Math.random() * 0.5;
            this.y_v = Math.random() * 0.5;
            this.m = (4 / 3) * Math.PI * Math.pow((this.radius), 3);
            this.hue = 255 - (Math.pow(this.radius * (1 / 15), 1/4) * 255);
        }


        this.y_max = $p.height - 2 * this.radius;
        this.y_min = 2 * this.radius;

        this.x_max = $p.width - 2 * this.radius;
        this.x_min = 2 * this.radius;

        this.constrain_x = function () {

            // x
            if (this.x >= this.x_max) {
                this.x = this.x_max;
                this.x_v *= -1 * bouncerate;
            }
            if (this.x <= this.x_min) {
                this.x = this.x_min;
                this.x_v *= -1 * bouncerate;
            }


        }
        this.constrain_y = function () {
            // y
            if (this.y >= this.y_max) {
                this.y = this.y_max;
                this.y_v *= -1 * bouncerate;
            }
            if (this.y <= this.y_min) {
                this.y = this.y_min;
                this.y_v *= -1 * bouncerate;
            }

        }

        this.update = function (i) {
            sumFX = 0.0;
            sumFY = 0.0;
            for (var j = 0; j < data.length; j++) {
                if (i != j) {
                    r = Math.sqrt((
                    Math.pow((this.x - data[j].x), 2) + Math.pow((this.y - data[j].y), 2)));
                    sumFX = sumFX + ((data[j].m) * ((this.x) - (data[j].x))) / (r * r);
                    sumFY = sumFY + ((data[j].m) * ((this.y) - (data[j].y))) / (r * r);
                }
            }
            forceX = -G * (this.m) * sumFX;
            forceY = -G * (this.m) * sumFY;
            ax = forceX / (this.m);
            ay = forceY / (this.m);

            // y direction

            this.y += dt * this.y_v;
            this.y_v += (1 - inert) * ay * dt;
            this.constrain_y();

            // x direction
            this.x += dt * this.x_v;
            this.x_v += (1 - inert) * ax * dt;
            this.constrain_x();
        }

        // draw_based on index
        this.draw = function () {
            // shape bg
            $p.fill(this.hue, 255, 255);

            // shape
            $p.ellipse(this.x + 3, this.y - 3, this.radius, this.radius);
        }
    }


    // system parameters
    var drag = .02;
    var bouncerate = 0.15;
    var inert = .00;
    var G = 1;
    var dt = 0.0025;
    var dt_factor = 1.1;
    var numParts = 500;

    // add particles
    var data = [];
    for (var i = 0; i < numParts; i++) {
        var p = new particle(i);
        data.push(p);
    }


    // graphical parameters
    //$p.background(245);
    $p.noStroke(); // hide outline
    $p.colorMode($p.HSB, 255);
    $p.ellipseMode($p.CENTER);

    // draw system
    $p.draw = function () {
        $p.background(150, 100, 100, 255);
        for (var i = 0; i < data.length; i++) {
            data[i].draw();
            data[i].update(i);
        }
    }
    // ---------------------------------------------------------
    // interaction
    $p.mousePressed = function () {
        if ($p.mouseButton == $p.LEFT) {
            dt = dt * dt_factor;
        } else {
            dt = dt / dt_factor;
        }
    }



}



var p;
// create a canvas
var canvas = document.getElementById("processing");

d3.select('#start_btn').on("click", function () {
    if (this.innerHTML === "Stop Simulation") {
        this.innerHTML = "Restart";
        p.exit();
        document.getElementById('pause_btn').innerHTML = "Pause";
        return;
    }
    this.innerHTML = "Stop Simulation";
    p = new Processing(canvas, n_body);
});

d3.select('#pause_btn').on("click", function () {
    if (this.innerHTML === "Pause") {
        p.noLoop();
        this.innerHTML = "Resume";
        return;
    }
    this.innerHTML = "Pause";
    p.loop();
});
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 well pull-left">
             <h2>N-body Simulation</h2>

            <hr>
            <p id="message" class="bg-info">Simulating gravity between all particles in two dimensions. Particle mass, position, and velocity is randomly initialized at the start of each simulation, creating different behavior each time you watch!</p>
            <hr>
            <p id="message" class="bg-info">Click/Right-click on the display to increase/decrease the time step by 10%.</p>
            <button id="start_btn" class="btn btn-primary pull-left">Go!</button>
            <button id="pause_btn" class="btn btn-primary pull-right">Pause</button>
        </div>
    </div>
</div>
<canvas id="processing"></canvas>