In the stroked triangles, the vertices were stitched together one after another to form the triangle’s closed outline. Alternatively, given an array of vertices, we can group them into successive pairs to form a sequence of disconnected line segments. For example, given the array of vertices a, b, c, d, e, f, we can combine them to form the three line segments a-b, c-d, and e-f. That’s what we do to construct this starburst.

A starburst

Imagine a sphere S. We successively pick random points p₁, p₂, …, p_n on sphere S and form the vertex sequence o, p₁, o, p₂, …, o, p_n where o is the origin. Then we stitch the vertices together to form the n line segments
o-p₁, o-p₂,…, o-p_n. These are the starburst’s rays, each of which starts at the origin and ends at some point on sphere S. Here is the code:

function starburst(n, innerColor, outerColor, rad=10) {
    let origin = new THREE.Vector3(0, 0, 0);
    let geom = new THREE.Geometry();
    for (let i = 0; i < n; i++) {
        let dest = getRandomPointOnSphere(rad);
        geom.vertices.push(origin, dest);
        geom.colors.push(innerColor, outerColor);
    }
    let args = {vertexColors: true, linewidth: 2};
    let mat = new THREE.LineBasicMaterial(args);
    return new THREE.Line(geom, mat, THREE.LineSegments);
}

It’s the third argument to the ‘mesh’ THREE.Line that says to stitch the 2n vertices into n segments.

Here’s the code that calls the starburst function:

function createScene() {
    let n = 400;
    let inner = new THREE.Color(0xff00ff);
    let outer = new THREE.Color(0x00ff00);
    let mesh = starburst(n, inner, outer);
    scene.add(mesh);
}

This starburst comprised 400 rays that are magenta at the origin and turn to green by the time they reach their destination. The last line adds the starburst to scene, a global variable defined elsewhere in the file.