// DOM rendering

function create(vector, color) {

    let div = document.createElement('div');

    let w = 5;

    let h = 5;

​

    div.style.position = 'absolute';

    div.style.top = (vector.y + 50) - (h / 2) - 1;

    div.style.left = (vector.x + 50) - (w / 2) - 1;

    div.style.backgroundColor = '#'+color;

    div.style.width = w;

    div.style.height = h;

​

    document.body.appendChild(div);

}

​

// min max range

function range(min, max) {

    return Math.random() * (max - min) + min;

}

​

// exploration function

function explore(source, dist, color) {

    let q = new THREE.Quaternion();

    let cone = (Math.PI / 4);

​

    // IS IT THIS ??

    /////////////////////////////////////////

    // generate a random direction

    let offset = new THREE.Vector3(range(-1, 1),range(-1, 1),range(-1, 1));

    let va = source.clone().add(offset);

    let direction = new THREE.Vector3();

    direction.subVectors(source, va).normalize();

    /////////////////////////////////////////

    let last = source;

​

    for (i = 0; i < 300; i++) {

        let current = last.clone();

        q.setFromAxisAngle(new THREE.Vector3(1, 1, 1), range(-cone, cone));

        q.normalize();

        //let newDirection = direction.clone();

        //newDirection.applyQuaternion(q);

        direction.applyQuaternion(q).normalize();

        current.addScaledVector(direction, dist);

​

        //var color = Math.floor(Math.random()*16777215).toString(16);

        create(current, color);

​

        //console.log(current);

​

        last = current;

    }

}

​

​

​

​

let dist = 10;

​

// source object

let source = new THREE.Vector3(500, 250, 100);

create(source, '00f');

​

​

for(let i = 0; i < 100; i ++) {

    let color = Math.floor(Math.random()*16777215).toString(16);

    explore(source, dist, color);

}

​