Script: 3D Field Of AI Flowers

createGUI();

const start = async () => {

    // Assuming BabylonJS is already included and scene is initialized
    const scene = bitbybit.babylon.scene.getScene();

    const cam = bitbybit.babylon.scene.getActiveCamera() as BABYLON.ArcRotateCamera;
    cam.position = new BABYLON.Vector3(10, 70, 10);

    // ### AudioContext Setup
    const audioCtx = new AudioContext();
    const oscillatorPool = [];
    for (let i = 0; i < 5; i++) {
        const osc = audioCtx.createOscillator();
        osc.type = 'sine';
        const gain = audioCtx.createGain();
        gain.gain.setValueAtTime(0, audioCtx.currentTime);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        const vibratoOsc = audioCtx.createOscillator();
        vibratoOsc.type = 'sine';
        vibratoOsc.frequency.setValueAtTime(5, audioCtx.currentTime);
        const vibratoGain = audioCtx.createGain();
        vibratoGain.gain.setValueAtTime(10, audioCtx.currentTime);
        vibratoOsc.connect(vibratoGain);
        vibratoGain.connect(osc.frequency);
        osc.start();
        vibratoOsc.start();
        oscillatorPool.push({ osc, gain, inUse: false });
    }

    function getAvailableOscillator() {
        return oscillatorPool.find(oscData => !oscData.inUse) || null;
    }

    function modulateSound(osc, gain, frequency, isOpening) {
        osc.frequency.setValueAtTime(frequency, audioCtx.currentTime);
        if (isOpening) {
            gain.gain.cancelScheduledValues(audioCtx.currentTime);
            gain.gain.setValueAtTime(0, audioCtx.currentTime);
            gain.gain.linearRampToValueAtTime(0.7, audioCtx.currentTime + 0.1);
            gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.8);
        } else {
            gain.gain.cancelScheduledValues(audioCtx.currentTime);
            gain.gain.setValueAtTime(0, audioCtx.currentTime);
            gain.gain.linearRampToValueAtTime(0.5, audioCtx.currentTime + 0.2);
            gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 0.6);
        }
    }

    // ### Shader Definitions for Petal Gradients
    BABYLON.Effect.ShadersStore["petalVertexShader"] = `
    precision highp float;
    attribute vec3 position;
    attribute vec2 uv;
    uniform mat4 worldViewProjection;
    varying vec2 vUV;
    void main(void) {
        gl_Position = worldViewProjection * vec4(position, 1.0);
        vUV = uv;
    }
`;

    BABYLON.Effect.ShadersStore["petalFragmentShader"] = `
    precision highp float;
    varying vec2 vUV;
    uniform float invertGradient;
    void main(void) {
        float t = invertGradient > 0.5 ? 1.0 - vUV.y : vUV.y;
        vec3 color;
        if (t < 0.5) {
            color = mix(vec3(1, 0.0, 1), vec3(0.0, 0.0, 1.0), t * 2.0);
        } else {
            color = mix(vec3(0.0, 0.0, 1.0), vec3(1.0, 1.0, 1.0), (t - 0.5) * 2.0);
        }
        gl_FragColor = vec4(color, 1.0);
    }
`;

    // ### Create Shader Materials
    const petalMaterialNormal = new BABYLON.ShaderMaterial("petalShaderNormal", scene, {
        vertex: "petal",
        fragment: "petal"
    }, {
        attributes: ["position", "uv"],
        uniforms: ["worldViewProjection", "invertGradient"]
    });
    petalMaterialNormal.setFloat("invertGradient", 0.0);

    const petalMaterialInverted = new BABYLON.ShaderMaterial("petalShaderInverted", scene, {
        vertex: "petal",
        fragment: "petal"
    }, {
        attributes: ["position", "uv"],
        uniforms: ["worldViewProjection", "invertGradient"]
    });
    petalMaterialInverted.setFloat("invertGradient", 1.0);

    // ### Petal Creation Function
    function createPetal(scene) {
        const points = [
            new BABYLON.Vector3(0, 0, 0),
            new BABYLON.Vector3(0.15, 0.3, 0),
            new BABYLON.Vector3(0.3, 0.6, 0),
            new BABYLON.Vector3(0.4, 0.9, 0),
            new BABYLON.Vector3(0.5, 1.2, 0),
            new BABYLON.Vector3(0.6, 0.9, 0),
            new BABYLON.Vector3(0.7, 0.6, 0)
        ];

        const tube = BABYLON.MeshBuilder.CreateTube("petalTube", {
            path: points,
            radius: 0.03,
            tessellation: 3,
            cap: BABYLON.Mesh.CAP_ALL,
            sideOrientation: BABYLON.Mesh.DOUBLESIDE,
            updatable: false
        }, scene);

        return tube;
    }

    // ### Flower Creation Function
    function createFlower(scene) {
        const flower = new BABYLON.TransformNode("flower", scene);
        const scale = 0.5 + Math.random() * 5.5; // Scale between 0.5 and 6.0
        flower.scaling = new BABYLON.Vector3(scale, scale, scale);

        let position;
        let attempts = 0;
        do {
            position = new BABYLON.Vector3(Math.random() * 100 - 50, 0, Math.random() * 100 - 50); // Smaller 100x100 field
            attempts++;
            if (attempts > 10000) {
                console.warn("Could not find non-overlapping position after 10000 attempts");
                break;
            }
        } while (flowerDataArray.some(fd => BABYLON.Vector3.Distance(position, fd.position) < (scale + fd.scale) * 1.2)); // Adjusted overlap check

        const amp_x = 0.05 + Math.random() * 0.2;
        const amp_z = 0.05 + Math.random() * 0.2;
        const amp_y = 0.05 + Math.random() * 0.2;
        const phase_x = Math.random() * Math.PI * 2;
        const phase_z = Math.random() * Math.PI * 2;
        const phase_y = Math.random() * Math.PI * 2;
        const basePosition = position.clone();
        basePosition.y = amp_y;
        flower.position = basePosition.clone();

        const petalNodes = [];
        const petalCount = 24;
        const invertGradient = Math.random() < 0.5; // Per-flower gradient decision
        const petalMaterial = invertGradient ? petalMaterialInverted : petalMaterialNormal;

        for (let i = 0; i < petalCount; i++) {
            const petalTube = createPetal(scene);
            petalTube.material = petalMaterial; // Consistent material for all petals
            petalTube.metadata = { flower: flower };
            const petalNode = new BABYLON.TransformNode("petalNode", scene);
            petalNode.rotation.y = (i / petalCount) * Math.PI * 2;
            petalTube.parent = petalNode;
            petalNode.parent = flower;
            petalNodes.push(petalTube);
        }

        const flowerData = {
            flower,
            basePosition,
            amp_x,
            amp_z,
            amp_y,
            phase_x,
            phase_z,
            phase_y,
            freq: 0.5 + Math.random(),
            scale,
            petalNodes,
            position, // For overlap check
            isAnimating: false,
            animateFullCycle: function () {
                if (this.isAnimating) return;
                const oscData = getAvailableOscillator();
                if (!oscData) return;
                oscData.inUse = true;
                modulateSound(oscData.osc, oscData.gain, 440 / this.scale, true);
                this.isAnimating = true;
                const openAnim = createBloomAnimation(true);
                const closeAnim = createBloomAnimation(false);
                scene.beginDirectAnimation(this.petalNodes, [openAnim], 0, 60, false, 1, () => {
                    modulateSound(oscData.osc, oscData.gain, 330 / this.scale, false);
                    scene.beginDirectAnimation(this.petalNodes, [closeAnim], 0, 60, false, 1, () => {
                        this.isAnimating = false; // Reset flag for re-triggering
                        oscData.inUse = false;
                        oscData.gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 0.2);
                    });
                });
            }
        };
        return flowerData;
    }

    // ### Bloom Animation Function
    function createBloomAnimation(isOpening) {
        const animation = new BABYLON.Animation(
            "bloom",
            "rotation.x",
            30,
            BABYLON.Animation.ANIMATIONTYPE_FLOAT,
            BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
        );
        const keys = isOpening
            ? [{ frame: 0, value: 0 }, { frame: 60, value: -Math.PI / 4 }]
            : [{ frame: 0, value: -Math.PI / 4 }, { frame: 60, value: 0 }];
        animation.setKeys(keys);
        const easing = new BABYLON.SineEase();
        easing.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
        animation.setEasingFunction(easing);
        return animation;
    }

    // ### Create Flowers and Wind Animation
    const flowerDataArray = [];
    for (let i = 0; i < 250; i++) {
        const flowerData = createFlower(scene);
        flowerDataArray.push(flowerData);
    }

    scene.registerBeforeRender(() => {
        const time = performance.now() / 1000;
        flowerDataArray.forEach(flowerData => {
            if (flowerData && flowerData.flower && flowerData.basePosition) {
                const { basePosition, amp_x, amp_z, amp_y, phase_x, phase_z, phase_y, freq } = flowerData;
                const x = basePosition.x + amp_x * Math.sin(freq * time + phase_x);
                const y = basePosition.y + amp_y * Math.sin(freq * time + phase_y);
                const z = basePosition.z + amp_z * Math.sin(freq * time + phase_z);
                flowerData.flower.position.set(x, y, z);
            } else {
                console.warn("Skipping invalid flower data:", flowerData);
            }
        });
    });

    // ### Event Listeners for Interaction
    const hoveredFlowers = new Set();
    scene.onPointerMove = () => {
        const pickResult = scene.pick(scene.pointerX, scene.pointerY);
        if (pickResult.hit && pickResult.pickedMesh.metadata && pickResult.pickedMesh.metadata.flower) {
            const flower = pickResult.pickedMesh.metadata.flower;
            const flowerData = flowerDataArray.find(fd => fd.flower === flower);
            if (flowerData && !flowerData.isAnimating && !hoveredFlowers.has(flower)) {
                hoveredFlowers.add(flower);
                flowerData.animateFullCycle();
            }
        } else {
            hoveredFlowers.clear(); // Clear if not hovering over a flower
        }
    };

    scene.onPointerUp = () => {
        if (hoveredFlowers.size === 0) {
            if (oscillatorPool) {
                oscillatorPool.forEach(oscData => {
                    oscData.gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 0.2);
                });
            }
        }
    };
}

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.paddingTopInPixels = 10;
    stackPanel2.addControl(stackPanel);

    const buttonOptions = new Bit.Inputs.BabylonGui.CreateButtonDto();
    buttonOptions.width = "400px";
    buttonOptions.height = "150px";
    buttonOptions.label = "START EXPERIENCE";
    buttonOptions.color = "#ffffff";
    buttonOptions.background = "#00000000";
    const button = gui.button.createSimpleButton(buttonOptions);
    button.paddingTopInPixels = 20;
    button.paddingBottomInPixels = 20;

    button.onPointerClickObservable.add(() => {
        start();
    })

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

    image.onPointerClickObservable.add(() => {
        window.open("https://bitbybit.dev", '_blank').focus();
    });
    const txtBlockOptions1 = new Bit.Inputs.BabylonGui.CreateTextBlockDto();
    txtBlockOptions1.text = "Powered By";
    const txtBlock1 = gui.textBlock.createTextBlock(txtBlockOptions1);
    txtBlock1.height = "40px";
    txtBlock1.paddingBottomInPixels = 10;
    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(button);
    stackPanel2.addControl(image);
    stackPanel2.addControl(txtBlock1);
    stackPanel2.addControl(txtBlock);
}