Edit in JSFiddle

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

    // canvas size
    $p.size(Math.min(window.innerWidth, window.innerHeight),Math.min(window.innerWidth, window.innerHeight), $p.WEBGL);

    particle = function (i) {
        this.type = "particle";
        if (i == 0) {
            this.radius = 100;
            this.y = -$p.height* 1/ 4;
            this.x = -$p.width * 2 / 5;
            this.z = -$p.width * 1 / 3;
            this.x_v = 0.001;
            this.y_v = 0.001;
            this.z_v = 0.001;
            this.m = (4 / 3) * Math.PI * Math.pow((this.radius), 3);
//            this.hue = (159,100,100,0);
            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.z = $p.width * 1 / 2 +(Math.random() - Math.random()) * 100;
            this.x_v = Math.random() * 0.5;
            this.y_v = Math.random() * 0.5;
            this.z_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 = -($p.height - 2 * this.radius);

        this.x_max = $p.width - 2 * this.radius;
        this.x_min = -($p.width - 2 * this.radius);
        
        this.z_max = $p.width - (2*this.radius ) - 10;
        this.z_min = -($p.width - (2*this.radius ) - 10);


        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.constrain_z = function () {
            // y
            if (this.z >= this.z_max) {
                this.z = this.z_max;
                this.z_v *= -1 * bouncerate;
            }
            if (this.z <= this.z_min) {
                this.z = this.z_min;
                this.z_v *= -1 * bouncerate;
            }

        }
        
        
        this.update = function (i) {
            sumFX = 0.0;
            sumFY = 0.0;
            sumFZ = 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) + Math.pow((this.z - data[j].z), 2)));
                    sumFX = sumFX + ((data[j].m) * ((this.x) - (data[j].x))) / (r * r * r);
                    sumFY = sumFY + ((data[j].m) * ((this.y) - (data[j].y))) / (r * r * r);
                    sumFZ = sumFZ + ((data[j].m) * ((this.z) - (data[j].z))) / (r * r * r);

                }
            }
            forceX = -G * (this.m) * sumFX;
            forceY = -G * (this.m) * sumFY;
            forceZ = -G * (this.m) * sumFZ;

            ax = forceX / (this.m);
            ay = forceY / (this.m);
            az = forceZ / (this.m);

            // y direction
            this.y += dt * this.y_v;
            this.y_v +=  ay * dt;
            this.constrain_y();
            // x direction
            this.x += dt * this.x_v;
            this.x_v +=  ax * dt;
            this.constrain_x();
            // z direction
            this.z += dt * this.z_v;
            this.z_v +=  az * dt;
            this.constrain_z();

        }

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

            // 3D shape in 3D
            $p.translate(this.x, this.y, this.z);
            $p.sphere(this.radius);
            $p.translate(-this.x, -this.y, -this.z);
        }
        // draw_based on index
        this.drawSun = function () {
            // shape bg
//            $p.fill(this.hue, 255, 255, 360);
//            $p.fill(this.hue, 90, 90, 360);

            // 3D shape in 3D
            $p.translate(this.x, this.y, this.z);
            $p.noFill();
            $p.stroke(255);
            $p.sphere(this.radius);
            $p.translate(-this.x, -this.y, -this.z);
        }
    }


    // system parameters
    var drag = .02;
    var bouncerate = 0.15;
    var inert = .00;
    var G = .001;
    var dt = 1.0;
    var dt_factor = 1.1;
    var numParts = 400;
    var sphDtl = 5;
    var fps = 25;

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

        $p.textSize(50);

        // x
        $p.stroke(0, 100, 100);
        $p.fill(0, 100, 100);
        $p.line(-$p.width, 0, 0, $p.width, 0, 0);
        $p.text("+x", $p.width + 25, 0, 25);
        $p.text("-x", -$p.width - 30, 0, 25);

        // y
        $p.stroke(90, 100, 100);
        $p.fill(90, 100, 100);
        $p.line(0, -$p.height, 0, 0, $p.height, 0);
        $p.text("+y", 0, $p.height + 25, 25);
        $p.text("-y", 0, -$p.height - 30, 25);

        // z
        $p.stroke(270, 100, 100);
        $p.fill(270, 100, 100);
        $p.line(0, 0, -$p.width, 0, 0, $p.width);
        // you have to rotate the frame and then type the axis label
        //$p.text("+z", 0, 0, $p.width + 25);
        //$p.text("-z", 0, 0, -$p.width - 30);
        $p.rotateY(-$p.PI / 2);
        $p.text("+z", $p.width + 25, 0, 25);
        $p.text("-z", -$p.width - 30, 0, 25);
        $p.rotateY($p.PI / 2);
        
//        $p.noStroke();
    }

    // graphical parameters
    //$p.background(245);
    $p.noSmooth(); // less pretty edges but faster
//    $p.noStroke(); // hide outline
//    $p.sphereDetail(sphDtl);    
    $p.colorMode($p.HSB, 255);
    $p.ellipseMode($p.CENTER);
    $p.frameRate(fps);    

    // draw system
    var world_rotate = 0;
    $p.draw = function () {
        $p.background(150, 100, 320, 255);
        
        // opaque bg
//        $p.background(255,0,0); // dark
        
        // center
        $p.translate($p.width / 2, $p.height / 2 + 50, -800);
        
        // rotate
        $p.rotateX(-0.5); // tilt forward
        $p.rotateY(world_rotate); // rotate
        world_rotate += .035;
        
        // lights (draw after translating world)
//        $p.directionalLight(360, 0, 0, 1, 0, 0);
//        $p.directionalLight(0, 360, 0, 0, 1, 0);
//        $p.directionalLight(0, 0, 360, 0, 0, 1);
//        $p.directionalLight(360, 0, 0, -1, 0, 0);
//        $p.directionalLight(0, 0, 360, 0, 0, -1);
        $p.pointLight(0, 0, 360, data[0].x, data[0].y, data[0].z);
//        $p.ambientLight(102, 102, 102);

        
        //        $p.directionalLight(0, 0, 360, -.5, -0.8, 1);
//        $p.directionalLight(0, 0, 360, 0.2, .2, 0);
//        $p.directionalLight(0, 0, 300, -1, 0, 0);
//        $p.directionalLight(0, 0, 360, 0, 0, -1);
        
        // draw axis
        draw_axis();
            $p.sphereDetail(20);    
            data[0].drawSun();
            data[0].update(0);

        $p.noStroke(); // hide outline
        for (var i = 1; i < data.length; i++) {
           $p.sphereDetail(sphDtl);    
            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");
ctx = canvas.getContext('webgl', { antialias: true});


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>3-D N-body Simulation</h2>

            <hr>
            <p id="message" class="bg-info">Simulating gravity between all particles in THREE 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>