2/1/2024

• Assignment

• Resources

(R3F) Changes made:

• Gsap → Vectors
• Orbital acceleration towards Flower
• Levy flight steps
• Modulo pauses to acceleration and velocity

Untitled

Building on week 1 …

I added vectors to move the bee. The position is already a vector, so I switched from gsap animations to using a velocity vector to move the bee.

I also realized why the bee was staying in relatively the same position even if I increased step size when I console logged the position over time. Rather than adding, such as when I had x = x + 1 or x = x + random(increment), the vector was replaced.

I spent a rather long time trying to debug why this was happening, switching between vector.add(), vector.addVectors() and any other variation I could think of for writing the code (position.copy/set/lerp). I finally found that it was because it was in the useEffect hook.

I’m not exactly sure why the useEffect hook would cause it to behave in this way, since I wrote it as a pseudo loop that executes conditionally. I also didn’t notice any lines that would have reset the vector inside the loop. Regardless, I moved it all inside a useFrame hook, which executes every frame.

Bee → Hummingbird .. ?

After watching a coding challenge about [levy flight](https://www.youtube.com/watch?v=bqF9w9TTfeo'), I was inspired to try making more of a humming bird motion.

1. buzz/flying motion → random walk
2. small darts → levy flight
3. orbiting around flower → acc

Random Walk & Levy Flight

Random Walk with vectors + Levy flight step

Random Walk with vectors + Levy flight step

I transitioned from using gsap to change position to adding vectors. Like the video, I scaled the vector to generate the larger step and .setLength(), which is similar to setMag().

const pos = new Vector3();
const step = new Vector3();

/// random walk w levy flight
useFrame(() => {
    prev.copy(pos);
    step.randomDirection();

    const r = Math.random()*100;
    if (r < 10){
      step.multiplyScalar(randomInt(2, 10));
    } else {
      step.setLength(2);
    }

    pos.add(step);

    // beeRef.current.position.set(pos.x, pos.y, pos.z)
    beeRef.current.position.lerpVectors(prev, pos, 0.5)
}

Adding acceleration

Then, I commented out the levy flight portion for now and followed The Coding Train video on acceleration to create the pull towards the flower.

I thought it would shoot out and then overtime correct towards the flower due to acceleration in a spiral pattern. But it seems to go out and come immediately back.

Velocity vector in a random direction

Velocity vector in a random direction