# Question regarding crossfading scenes example

**URL:** <https://discourse.threejs.org/t/question-regarding-crossfading-scenes-example/27973>\
**Category:** Questions\
**Tags:** math\
**Created:** [July 12, 2021, 3:10pm UTC](https://discourse.threejs.org/t/question-regarding-crossfading-scenes-example/27973 "2021-07-12T15:10:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tfreifeld](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tfreifeld/32/15980_2.png) [@tfreifeld](https://discourse.threejs.org/u/tfreifeld)\
**Post date:** [July 12, 2021, 3:10pm UTC](https://discourse.threejs.org/t/question-regarding-crossfading-scenes-example/27973/1 "2021-07-12T15:10:50Z")

</div>

Hi,

I’m trying to figure out the math and logic behind the scenes crossfading [example](https://threejs.org/examples/?q=crossf#webgl_postprocessing_crossfade).

I’d appreciate an explanation of this code bit:

```
					const t = ( 1 + Math.sin( transitionParams.transitionSpeed * clock.getElapsedTime() / Math.PI ) ) / 2;

					transitionParams.transition = THREE.MathUtils.smoothstep( t, 0.3, 0.7 );

```

I don’t get the `(1 + sin(speed * time / pi)) / 2` part.

Thanks

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [July 12, 2021, 4:51pm UTC](https://discourse.threejs.org/t/question-regarding-crossfading-scenes-example/27973/2 "2021-07-12T16:51:35Z")

</div>

> [@tfreifeld](#):
>
> I don’t get the `(1 + sin(speed * time / pi)) / 2` part.

The goal of [this line](https://github.com/mrdoob/three.js/blob/d0340e3a147e290fa86d14bc3ed97d8e1c20602e/examples/webgl_postprocessing_crossfade.html#L356) is to get a value between 0 and 1 based on the elapsed time and the animation speed.

`Math.sin` returns a number in the range [-1, 1] based on the passed angle in radians :

![834R](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/2/a28e5381e4244bb9bb64e1d347f2ccd2c12f0ad7.gif)

We want the number in the range [0, 1]. So when we get the value returned by `Math.sin`, we add 1 ( the range becomes [0, 2] ), then divide by 2 ( the range becomes [0, 1] ).

About `Math.sin` passed angle ( `transitionSpeed * elapsedTime / pi` ) :  
A full radians angle is PI x 2, so if you only passed `elapsedTime`, the animation would loop every 6.28 seconds. Multiplying `elapsedTime` by `transitionSpeed` actually multiply the passed angle, so it multiply the animation speed. The division by pi is a mistake I think… Its only makes the animation 3.14 times slower.

---

<div class="post-metadata">

**Author:** ![tfreifeld](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tfreifeld/32/15980_2.png) [@tfreifeld](https://discourse.threejs.org/u/tfreifeld)\
**Post date:** [July 12, 2021, 4:59pm UTC](https://discourse.threejs.org/t/question-regarding-crossfading-scenes-example/27973/3 "2021-07-12T16:59:32Z")

</div>

Thank you very much 🙂

I knew how sin works. I think the part that got me was the elapsed time. I figured both the time and speed cannot be less than zero, so the entire thing can’t be less than 1/2, so I didn’t see why would we ever need to clamp between 0.3 and 0.7 with smoothstep. But now with your answer I realize that the clock keeps ticking, and thus sin results in a negative number. Also understand now the plus one divide by two part.

Thanks a lot!