Let’s make our starburst more starlike.

A starry starburst

First, we vary the length of the rays. Instead of having every ray terminate on some random point p of a fixed sphere S, we’ll scale (increase or shorten) the distance of this point from the origin to find a new point p’  for the ray’s termination. In effect, we’re allowing a range of imaginary concentric spheres and having each ray terminate on a random point on one of these spheres.

Second, we’re making the termination color of each ray the same as the background color (black) so the rays just fade away. Here’s the code:

function starburst(maxRays, maxRad) {
    let origin = new THREE.Vector3(0, 0, 0);
    let innerColor = getRandomColor(0.8, 0.1, 0.8);
    let black = new THREE.Color(0x000000);
    let geom = new THREE.Geometry();
    let nbrRays = getRandomInt(1, maxRays);
    if (Math.random() < 0.5) {
        nbrRays = getRandomInt(4, 25);
    }
    for (let i = 0; i < nbrRays; i++) {
        // dest is a point on some origin-centered sphere
        // of radius between 0.1 and maxRad
        let r = getRandomFloat(0.1, maxRad);
        let dest = getRandomPointOnSphere(r);
        geom.vertices.push(origin, dest);
        geom.colors.push(innerColor, black);
    }
    let args = {vertexColors: true, linewidth: 2};
    let mat = new THREE.LineBasicMaterial(args);
    return new THREE.Line(geom, mat, THREE.LineSegments);
}

Every time you click refresh, you get a new starburst. Note this bit of code:

if (Math.random() < 0.5) {
    nbrRays = getRandomInt(4, 25);
}

This ensures a bit more than half the time, starbursts will contain no more than 25 rays. These smaller starbursts are especially beautiful and we want to make sure to get our fair share of them. This is the code that creates the scene:

function createScene() {
    let maxRays = 200;
    let maxRad = 20;
    let mesh = starburst(maxRays, maxRad);
    scene.add(mesh);
}