0

You can find a Prototyp of this Web Project here (this site is not up to date so the animate() function you will find there will probably not match the one below)

the color palette looks like this:

let party = [
    0x5500ab,
    0x84007c,
    0xb5004b,
    0xe5001b,
    0xe81700,
    0xb84700,
    0xab7700,
    0xabab00,
    0xab5500,
    0xdd2200,
    0xf2000e,
    0xc2003e,
    0x8f0071,
    0x5f00a1,
    0x2f00d0,
    0x0007f9
];

and i think to make it smoother we have to interpolate the colors

What i have so far in my THREE JS animation loop:

function animate(now) {
    // Convert to seconds
    now *= 0.001;
    // Subtract the previous time from the current time
    var deltaTime = now - then;
    // Remember the current time for the next frame.
    then = now;

    if (resizeRendererToDisplaySize(renderer)) {
        const canvas = renderer.domElement;
        camera.aspect = canvas.clientWidth / canvas.clientHeight;
        camera.updateProjectionMatrix();
      }

    if(now >= nextTime) {
        scene.children.forEach(function (e) {
            if (e.name.includes("pl")) {
                // track the current led index
                currentLed = currentLed >= numPixels-1 ? 0 : currentLed+1;
                // calculate the next index for the color palette
                currentColor = currentColor >= party.length-1 ? next=0 : Math.floor((next + currentLed)%(party.length-1));

                 // get new color from color palette "party"
                 var cc = new THREE.Color( party[currentColor] );

                // update PointLight light color
                e.color.setHex( cc.getHex() );
                 
                // update PointLight sphere color HELPER
                //e.children[0].material.color.setHex( color.getHex() );

            }
        });
        nextTime = now + .01;
    }

    if(now >= nextTime1) {        
        hue1 += 2;
        next += .1;
        nextTime1 = now + .01;
        
    }


    controls.update(); // auto rotate camera

    stats.update(); // display FPS thingy
    
    id = requestAnimationFrame( animate );
    renderer.render(scene, camera);
}

i want this to transition smooth to the next color in the palette, just like WLED is doing it.

// update PointLight light color
e.color.setHex( cc.getHex() );

to be more exact... this value needs to be a interpolated value or something

cc.getHex()

I tried to use the following effect (from WLED) as an inspiration.... uint16_t WS2812FX::mode_palette() in FX.cpp 1659 but it did.. not.. work.. unfortunately... i worked my way down deep deep inside the wled code to figure out how this could possibly work.. but.... i have some what of not clue.

All i know is that the magic is somewhere around at line 1056 in FX_fcn.cpp and at line 1073 in FX_fcn.cpp following this function to line 552 in colorutils.cpp (FastLED GitHub Repo) you can see the roots of all this... if i'm not mistaking then this method interpolats some colors probably... but i dont really know whats exactly going on.

i also tried to interpolate/ calculate the "next colors" with an integrated method from THREE JS "lerp()" but again not much luck either.

it.Carl
  • 1
  • 1
  • No, ofc not i want to set the pointLight color from a given palette with smooth transitions like a led strip has. – it.Carl Oct 16 '21 at 17:17
  • You could convert the hex values to HSL and use the `.setHSL()` method to achieve interpolations. A transition needs a start and end value which is provided in number based values like rgb, hsl etc, and not directly via hex values – Anurag Srivastava Oct 16 '21 at 17:20
  • something like [this right here](https://javascript.tutorialink.com/three-js-how-to-loop-lerp-through-more-than-two-colors-three-colors/) but for the pointlight color – it.Carl Oct 16 '21 at 18:54

0 Answers0