Recursively Generating Boxes Adds Extra Width/Height, Then After Click, the Boxes' Width/Height Goes to Width/Height Specified


#1

Working on recursively generating boxes to create a VR Fractal Tree.

Upon each iteration, the boxes renders an extra width and height. After I click on the rendered entity, the box shrinks to the specified size and rotates with physics.

I’ve included both the code and screenshots of before click and after click for 2 iterations of the recursive loop. After 3 iterations (depth = 3), the boxes are much larger.

Is this a bug or is one of the properties messing with the entity?

Run Script, Before Click:

After Click:

Script Code:

var depth = 2;
var length = 2;
var angle = 0;
const pi = Math.PI;
const sqrt2 = Math.sqrt(2);


function drawFractalTree(depthToGo, position, curHeight, angle) {

    if (depthToGo === 0) return;

    var propertiesBox = {
        type: "Box",
        name: "FT1",
        position: position,
        color: { red: 155, green: 0, blue: 0 },
        dimensions: {
            x: 0.1,
            y: curHeight,
            z: 0.1,
        },
        rotation: {
            x: 0,
            y: 0,
            z: angle,
            w: 1
        }
    };

    Ent = Entities.addEntity(propertiesBox);

    var nextHeight = curHeight / 2;
    var triSide = (nextHeight * (1 / 2) / sqrt2); // 45 45 90 triangle solving for a in tangent = adjacent * sqrt(2);
    var leftPosition = {
        x: position.x - triSide,
        y: position.y + triSide + nextHeight,
        z: position.z
    };
    var rightPosition = {
        x: position.x + triSide ,
        y: position.y + triSide + nextHeight,
        z: position.z
    };

    drawFractalTree(depthToGo - 1, rightPosition, nextHeight, angle + (pi / 2));
    drawFractalTree(depthToGo - 1, leftPosition, nextHeight, angle - (pi / 2));
}

drawFractalTree(depth, {x: 0, y: 0, z: 0}, 2, angle);

#2

Just looking quickly at the code.

I don’t see any click stuff in it.

in propertiesBox, dimensions: z: 0.1,
are you sure there should be a comma there?


#3

Thanks Twa_Hinkle! :slight_smile:

The comma was a typo! Sadly, removing it didn’t change anything.
Yes, the entities shouldn’t have any click functionality. Oddly, the entities rotate and shrink after first click. Any left clicks (and left click-holds) afterward just moves the boxes in 3D space with no rotation.


#4

I don’t see anywhere that depthToGo is changed?

oops, yes, when it is called again it is - 1. never mind.

oh, but wait, won’t it be -2 by the time the leftPosition side is drawn?


#5

I found the issue! I believe I used the rotation property incorrectly. I changed the input to use a Quaternion. Full code below.

drawFractalTree(depthToGo - 1, rightPosition, nextHeight, **Quat.angleAxis(-45, {x:0,y:0,z:1})**);
drawFractalTree(depthToGo - 1, leftPosition, nextHeight, **Quat.angleAxis(45, {x:0,y:0,z:1})**);

Also in reference to your question about depthToGo, since I do not reassign depthToGo but instead pass in (depthToGo - 1) as arguments. Both rightPos and leftPos should get 1 as the argument for depthToGo.

Below, I’ve outlined the recursive calls passing in only depthToGo as the argument to illustrate. :slight_smile:

1st: drawFractalTree(2); // depthToGo = 2
2nd (right): drawFractalTree(1); // depthToGo = 1
(right) drawFractalTree(0) // depthToGo = 0 ENDS base case
(left) drawFractalTree(0) // depthToGo = 0 ENDS base case
3rd (left): drawFractalTree(1); // depthToGo = 1
(right) drawFractalTree(0) // depthToGo = 0 ENDS base case
(left) drawFractalTree(0) // depthToGo = 0 ENDS base case

Here is the screenshot of running the script once:

Code:

// Getting your position in the domain, so that the cube is spawned in front of you. 
var position = Vec3.sum(MyAvatar.position, Quat.getFront(MyAvatar.orientation));
var depth = 1;
var length = 2;
var angle = 0;
const pi = Math.PI;
const sqrt2 = Math.sqrt(2);

function drawFractalTree(depthToGo, position, curHeight, angle) {

    if (depthToGo === 0) return;

    var propertiesBox = {
        type: "Box",
        name: "FT1",
        position: position,
        color: { red: 155, green: 0, blue: 0 },
        dimensions: {
            x: 0.1,
            y: curHeight,
            z: 0.1
        },
        rotation: angle
    };

    Ent = Entities.addEntity(propertiesBox);

    var nextHeight = curHeight / 2;
    var triSide = (nextHeight * (1 / 2) / sqrt2); // 45 45 90 triangle solving for a in tangent = adjacent * sqrt(2);
    var leftPosition = {
        x: position.x - triSide,
        y: position.y + triSide + nextHeight,
        z: position.z
    };
    var rightPosition = {
        x: position.x + triSide ,
        y: position.y + triSide + nextHeight,
        z: position.z
    };

    drawFractalTree(depthToGo - 1, rightPosition, nextHeight, Quat.angleAxis(-45, {x:0,y:0,z:1}));
    drawFractalTree(depthToGo - 1, leftPosition, nextHeight, Quat.angleAxis(45, {x:0,y:0,z:1}));
}

drawFractalTree(2, {x: 0, y: 0, z: 0}, 2, angle);

Thanks again for your help! :slight_smile: