Script: Greetings Card Viewer

// Reading text from URL parameters
const urlParams = new URLSearchParams(location.search);
let text1 = urlParams.get('title');
let text2 = urlParams.get('subtitle');
if (!text1) {
    text1 = "HEY!";
}
if (!text2) {
    text2 = "WE LOVE YOU";
}

const makeGrass = true;

// REFACTORED INTERFACE: The individual Weed object no longer holds a mesh.
interface Weed {
    basePosition: BABYLON.Vector3,
    randomOffset: number,
    smoothedMouseInfluence: number,
    smoothedMouseDirection: BABYLON.Vector3
};

interface ResTxt {
    movedGridOfPts: Bit.Inputs.Base.Point3[];
    wiresDrawnMesh: BABYLON.Mesh;
    pointsDrawnMesh: BABYLON.Mesh;
}

// REFACTORED INTERFACE: ResultWeed now holds a single mesh for all weeds.
interface ResultWeed {
    weeds: Weed[],
    weedsMesh: BABYLON.LinesMesh, // The single mesh for all weeds
    text3D1: Bit.Advanced.Text3D.Text3DData<Bit.Inputs.OCCT.TopoDSShapePointer>;
    text3D2: Bit.Advanced.Text3D.Text3DData<Bit.Inputs.OCCT.TopoDSShapePointer>;
    r1: ResTxt;
    r2: ResTxt;
}

let resultWeed: ResultWeed;

const numSegments = 3;           // Segments per weed
const segmentLength = 0.5;       // Length of each segment
const weedHeight = numSegments * segmentLength; // Total height
const mouseEffectRadius = 3;     // Radius of mouse wind influence
const maxMouseInfluence = 1;     // Maximum bending strength
const recoveryAlpha = 0.1;       // Recovery speed (lower = slower)
const velocityInfluenceFactor = 2; // Mouse speed effect

const scene = bitbybit.babylon.scene.getScene();

const camera = bitbybit.babylon.scene.getActiveCamera() as BABYLON.ArcRotateCamera;
camera.position = new BABYLON.Vector3(0, 30, -20);
camera.target = new BABYLON.Vector3(0, 0, -2);

createGUI();

const start = async () => {
    if (!makeGrass) {
        // ...
    } else {
        // **Create invisible ground at the top of the weeds**
        const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 200, height: 100 }, scene);
        ground.position.y = weedHeight;
        ground.visibility = 0;

        // **Weed creation**
        resultWeed = await createWeeds(text1, text2, numSegments, segmentLength, scene);

        // **Mouse and time tracking**
        let time = 0;
        let mouseWorldPos = new BABYLON.Vector3(0, weedHeight, 0); // Start at weed top height
        let lastMouseWorldPos = mouseWorldPos.clone();
        let mouseVelocity = new BABYLON.Vector3(0, 0, 0);

        if (scene.metadata && scene.metadata.observable) {
            scene.metadata.observable.remove();
        }

        // **Mouse movement handler**
        const resObs = scene.onPointerObservable.add((pointerInfo) => {
            if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERMOVE && pointerInfo.event.buttons === 0) {
                const pickInfo = scene.pick(pointerInfo.event.clientX, pointerInfo.event.clientY);
                if (pickInfo.hit && pickInfo.pickedMesh === ground) {
                    lastMouseWorldPos = mouseWorldPos.clone();
                    mouseWorldPos = pickInfo.pickedPoint;
                    mouseVelocity = mouseWorldPos.subtract(lastMouseWorldPos);
                }
            }
        });

        if (scene.metadata) {
            scene.metadata.observable = resObs;
        } else {
            scene.metadata = { observable: resObs }
        }

        // **Render loop**
        bitbybit.time.registerRenderFunction(() => {
            time += 0.02;
            if (resultWeed && resultWeed.weeds.length > 0) {
                // REFACTORED RENDER LOGIC
                // 1. Create a single large array to hold all vertex positions for this frame.
                const allNewPositions: number[] = [];

                resultWeed.weeds.forEach(weed => {
                    // **Mouse influence as radial wind** (This logic is unchanged)
                    const weedTop = weed.basePosition.clone();
                    weedTop.y = weedHeight;
                    const fromWeedTopToMouse = mouseWorldPos.subtract(weedTop);
                    const distance = fromWeedTopToMouse.length();
                    const falloff = (distance < mouseEffectRadius) ? (1 - distance / mouseEffectRadius) : 0;
                    const velocityNorm = mouseVelocity.length() > 0 ? mouseVelocity.normalize() : new BABYLON.Vector3(0, 0, 0);
                    const toMouseNorm = fromWeedTopToMouse.length() > 0 ? fromWeedTopToMouse.normalize() : new BABYLON.Vector3(0, 0, 0);
                    const velocityDot = BABYLON.Vector3.Dot(velocityNorm, toMouseNorm);
                    const velocityInfluence = Math.max(0, velocityDot) * mouseVelocity.length() * velocityInfluenceFactor;
                    const targetMouseInfluence = falloff * maxMouseInfluence + velocityInfluence;
                    weed.smoothedMouseInfluence = BABYLON.Scalar.Lerp(weed.smoothedMouseInfluence, targetMouseInfluence, recoveryAlpha);
                    const targetDirection = fromWeedTopToMouse.length() > 0 ? fromWeedTopToMouse.normalize() : new BABYLON.Vector3(0, 0, 0);
                    weed.smoothedMouseDirection = BABYLON.Vector3.Lerp(weed.smoothedMouseDirection, targetDirection, recoveryAlpha);

                    // **Build weed segments** (This logic is unchanged)
                    const points: BABYLON.Vector3[] = [];
                    let currentPoint = weed.basePosition.clone();
                    points.push(currentPoint.clone());

                    const windVariation = Math.sin(time + weed.randomOffset) * 0.15;
                    const windStrength = 0.05 + windVariation;
                    const windAxis = new BABYLON.Vector3(1, 0, 0);

                    let mouseAxis = null;
                    if (weed.smoothedMouseInfluence > 0 && weed.smoothedMouseDirection.length() > 0) {
                        mouseAxis = BABYLON.Vector3.Cross(BABYLON.Axis.Y, weed.smoothedMouseDirection);
                    }

                    let accumulatedMouseAngle = 0;
                    for (let k = 1; k <= numSegments; k++) {
                        const windAngle = windStrength * k;
                        const windMatrix = BABYLON.Matrix.RotationAxis(windAxis, windAngle);
                        let segmentDir = new BABYLON.Vector3(0, segmentLength, 0);

                        if (mouseAxis && weed.smoothedMouseInfluence > 0) {
                            const mouseInfluenceFactor = k / numSegments;
                            const mouseAngleIncrement = weed.smoothedMouseInfluence * mouseInfluenceFactor * 0.2;
                            accumulatedMouseAngle += mouseAngleIncrement;
                            const mouseMatrix = BABYLON.Matrix.RotationAxis(mouseAxis, accumulatedMouseAngle);
                            segmentDir = BABYLON.Vector3.TransformCoordinates(segmentDir, mouseMatrix);
                        }
                        segmentDir = BABYLON.Vector3.TransformCoordinates(segmentDir, windMatrix);
                        currentPoint = currentPoint.add(segmentDir);
                        points.push(currentPoint.clone());
                    }

                    // 2. Instead of updating a single mesh, flatten the points and add them to our big array.
                    for (const p of points) {
                        allNewPositions.push(p.x, p.y, p.z);
                    }
                });

                // 3. After iterating through all weeds, update the single LineSystem mesh *once* with all new positions.
                if (resultWeed.weedsMesh) {
                    resultWeed.weedsMesh.updateVerticesData(BABYLON.VertexBuffer.PositionKind, allNewPositions, false, false);
                }
            }
        })
    }
}

// REFACTORED: This function now creates a single LineSystem instead of many Lines.
async function createWeeds(text1: string, text2: string, numSegments: number, segmentLength: number, scene: BABYLON.Scene): Promise<ResultWeed> {
    const textOpt = new Bit.Advanced.Text3D.Text3DDto();
    textOpt.text = text1.toUpperCase();
    textOpt.fontType = Bit.Advanced.Text3D.fontsEnum.Roboto;
    textOpt.fontVariant = Bit.Advanced.Text3D.fontVariantsEnum.BoldItalic;
    textOpt.height = 0;
    textOpt.fontSize = 10;
    textOpt.originAlignment = Bit.Advanced.Text3D.recAlignmentEnum.centerMiddle;
    const text3D1 = await bitbybit.advanced.text3d.create(textOpt);

    textOpt.text = text2.toUpperCase();
    textOpt.fontSize = 7;
    const text3D2 = await bitbybit.advanced.text3d.create(textOpt);
    const separator = 5;

    const r1 = await createTextPoints(text3D1, separator);
    const r2 = await createTextPoints(text3D2, -separator);

    const filteredPoints = [...r1.movedGridOfPts, ...r2.movedGridOfPts];

    const weeds: Weed[] = [];
    // We will build up arrays of all lines' points and colors.
    const allInitialLines: BABYLON.Vector3[][] = [];
    const allInitialColors: BABYLON.Color4[][] = [];

    const baseColor = new BABYLON.Color4(0.5, 0, 1, 1);
    const midColor = new BABYLON.Color4(0, 0.5, 1, 1);
    let topColor = new BABYLON.Color4(1, 0, 1, 1);

    for (let i = 0; i < filteredPoints.length; i++) {
        const x = filteredPoints[i][0];
        const z = filteredPoints[i][2];
        const basePosition = new BABYLON.Vector3(x, 0, z);

        if (i === r1.movedGridOfPts.length) {
            topColor = new BABYLON.Color4(1, 1, 1, 1);
        }

        const points: BABYLON.Vector3[] = [];
        const colors: BABYLON.Color4[] = [];
        for (let k = 0; k <= numSegments; k++) {
            points.push(new BABYLON.Vector3(x, k * segmentLength, z));
            const t = k / numSegments;
            let color;
            if (t < 0.5) {
                color = BABYLON.Color4.Lerp(baseColor, midColor, t * 2);
            } else {
                color = BABYLON.Color4.Lerp(midColor, topColor, (t - 0.5) * 2);
            }
            colors.push(color);
        }

        // Instead of creating a mesh, add the points and colors to our master arrays.
        allInitialLines.push(points);
        allInitialColors.push(colors);

        // The Weed object now only stores state, not the mesh itself.
        weeds.push({
            basePosition,
            randomOffset: Math.random() * Math.PI * 6,
            smoothedMouseInfluence: 0,
            smoothedMouseDirection: new BABYLON.Vector3(0, 0, 0)
        });
    }

    // After the loop, create the single LineSystem mesh with all the lines.
    const weedsMesh = BABYLON.MeshBuilder.CreateLineSystem("weedsSystem", {
        lines: allInitialLines,
        colors: allInitialColors,
        updatable: true
    }, scene);
    weedsMesh.isPickable = false;

    [r1.wiresDrawnMesh, r2.wiresDrawnMesh].forEach(c => {
        bitbybit.babylon.mesh.setVisibility({
            babylonMesh: c,
            visibility: 1,
            includeChildren: true,
        });
    });

    [r1.pointsDrawnMesh, r2.pointsDrawnMesh].forEach(c => {
        c.getChildMeshes().forEach(cx => cx.isVisible = true);
    });

    // Return the single mesh along with the other data.
    return { weeds, weedsMesh, text3D1, text3D2, r1, r2 };
}

// REFACTORED: Using hexGridScaledToFit for better density control
async function createTextPoints(txt3D: Bit.Advanced.Text3D.Text3DData<Bit.Inputs.OCCT.TopoDSShapePointer>, upDist: number) {
    const width = txt3D.boundingBox.x2 - txt3D.boundingBox.x1;
    const length = txt3D.boundingBox.y2 - txt3D.boundingBox.y1;

    const textWires = await bitbybit.occt.shapes.wire.getWires({ shape: txt3D.compound });
    const textWiresCompound = await bitbybit.occt.shapes.compound.makeCompound({ shapes: textWires });
    const textWiresCompoundTranslated = await bitbybit.occt.transforms.translate({
        shape: textWiresCompound,
        translation: [0, 0, upDist]
    });

    const textOptions = new Bit.Inputs.Draw.DrawOcctShapeSimpleOptions();
    textOptions.edgeWidth = 10;
    textOptions.edgeColour = "#222222";
    textOptions.drawTwoSided = false;

    const wiresDrawnMesh = await bitbybit.draw.drawAnyAsync({
        entity: textWiresCompoundTranslated,
        options: textOptions
    });
    bitbybit.babylon.mesh.setVisibility({
        babylonMesh: wiresDrawnMesh,
        visibility: 0,
        includeChildren: true,
    });

    // Using HexGridScaledToFit for more direct density control
    const hexGridOpt = new Bit.Inputs.Point.HexGridScaledToFitDto();
    hexGridOpt.pointsOnGround = true;
    hexGridOpt.centerGrid = true;
    hexGridOpt.width = width * 1.1;
    hexGridOpt.height = length * 1.1;
    // These values determine the density; higher numbers mean more points/weeds.
    hexGridOpt.nrHexagonsInHeight = 70;
    hexGridOpt.nrHexagonsInWidth = 120;

    const gridOfPts = bitbybit.point.hexGridScaledToFit(hexGridOpt);
    const faces = await bitbybit.occt.shapes.face.getFaces({ shape: txt3D.compound });

    const opt = new Bit.Inputs.OCCT.FilterFacesPointsDto<Bit.Inputs.OCCT.TopoDSFacePointer>();
    opt.shapes = faces;
    opt.points = gridOfPts.centers; // Use the .centers property from the result
    opt.gapTolerance = 0.1;
    const filteredPoints = await bitbybit.occt.shapes.face.filterFacesPoints(opt) as Bit.Inputs.Base.Point3[];

    const movedGridOfPts = bitbybit.point.translatePoints({
        points: filteredPoints,
        translation: [0, 0, upDist],
    });

    const optDraw = new Bit.Inputs.Draw.DrawBasicGeometryOptions();
    optDraw.size = 0.04;
    optDraw.colours = "#0000ff";
    const pointsDrawnMesh = await bitbybit.draw.drawAnyAsync({
        entity: movedGridOfPts,
        options: optDraw,
    });
    pointsDrawnMesh.getChildMeshes().forEach(c => c.isVisible = false);

    return { movedGridOfPts, wiresDrawnMesh, pointsDrawnMesh };
}

function createGUI() {
    const gui = bitbybit.babylon.gui;
    const textOpt = new Bit.Inputs.BabylonGui.CreateFullScreenUIDto();
    const fullScreenUI = gui.advancedDynamicTexture.createFullScreenUI(textOpt);
    const stackPanelOpt = new Bit.Inputs.BabylonGui.CreateStackPanelDto();
    const stackPanel = gui.stackPanel.createStackPanel(stackPanelOpt);
    const stackPanelOpt2 = new Bit.Inputs.BabylonGui.CreateStackPanelDto();
    const stackPanel2 = gui.stackPanel.createStackPanel(stackPanelOpt2);
    stackPanel2.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
    fullScreenUI.addControl(stackPanel2);
    stackPanel.paddingBottomInPixels = 10;
    stackPanel2.addControl(stackPanel);
    stackPanel2.background = "#00000000"
    stackPanel.background = "#00000000"

    const imageOpt = new Bit.Inputs.BabylonGui.CreateImageDto();
    imageOpt.url = "assets/logo-gold-small.png";
    const image = gui.image.createImage(imageOpt);
    const padding = 50;
    image.paddingTopInPixels = padding;
    image.paddingBottomInPixels = padding;
    image.paddingLeftInPixels = padding;
    image.paddingRightInPixels = padding;

    image.onPointerClickObservable.add(() => {
        window.open("https://bitbybit.dev", '_blank').focus();
    });

    const txtBlockOptions = new Bit.Inputs.BabylonGui.CreateTextBlockDto();
    txtBlockOptions.text = "BITBYBIT.DEV";
    const txtBlock = gui.textBlock.createTextBlock(txtBlockOptions);
    txtBlock.height = "60px";
    txtBlock.paddingBottomInPixels = 30;

    stackPanel2.addControl(image);
    stackPanel2.addControl(txtBlock);
}

// createInput is not called in the second snippet's GUI but is kept here for completeness if needed later.
function createInput(gui: Bit.BabylonGui, text: string, color: string, textVariableToUpdate: string) {
    const txtInpt1Opt = new Bit.Inputs.BabylonGui.CreateInputTextDto();
    let originalText = text;
    txtInpt1Opt.text = originalText;
    txtInpt1Opt.width = "400px";
    txtInpt1Opt.height = "100px";
    const textInput = gui.inputText.createInputText(txtInpt1Opt);
    textInput.fontSize = "40px";
    textInput.paddingTopInPixels = 10;
    textInput.paddingBottomInPixels = 10;
    textInput.color = color;
    textInput.onTextChangedObservable.add((newText) => {
        if (newText.text && newText.text.length > 20) {
            textInput.text = originalText.toUpperCase();
        }
        else {
            originalText = newText.text;
            textInput.text = newText.text.toUpperCase()
        }
    });
    return textInput;
}

start();