# Text to Thin Instances - Commodore Amiga like 3D Tower Scroller

**URL:** <https://forum.babylonjs.com/t/text-to-thin-instances-commodore-amiga-like-3d-tower-scroller/22357>\
**Category:** Demos and projects\
**Created:** [July 14, 2021, 12:53am UTC](https://forum.babylonjs.com/t/text-to-thin-instances-commodore-amiga-like-3d-tower-scroller/22357 "2021-07-14T00:53:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 14, 2021, 12:53am UTC](https://forum.babylonjs.com/t/text-to-thin-instances-commodore-amiga-like-3d-tower-scroller/22357/1 "2021-07-14T00:53:40Z")

</div>

Hi!  
Another thin instances stuff. I was a member of the Amiga Demo Scene back in 1993-1998 (if I remember correctly) and we did a lot of cool stuff just for fun. I’ve created a Tower scroller back then so I tried to mimic it in BabylonJS using thin instances (this one is using cubes as prefabs). It is looking pretty close to the Amiga version, however there was no free camera movement back then of course 🖖 🕹

> **[Babylon.js Playground](https://playground.babylonjs.com/#PJ511W%232)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

You can customize the text, use {{ }} for changing the color of the text.

```jsx
        // {{r,g,b,a}}
        const text = "{{255,255,255,255}}Welcome to The {{250,250,0,255}}Towers of Babylon{{100,0,0,255}} 3D Text Scroller{{0,0,255,255}}, another thin instances demo created by {{40,40,40,1}}Roland Csibrei{{0,0,255,255}}... You can try to change this text and the {{0,255,255,255}}calculatePosition(){{0,0,255,255}} method to create cool scrollers... Give it a try! "

```

Sorry, the smiley at the beginning is hard coded.

This method does the mapping from 2D text pixels to 3D coordinates:

```jsx

    calculatePosition(baseX, baseY, width, color) {
        const radiusMax = 70
        const multiplier = 3
        const radius = radiusMax // - baseX / 80
        const radiusDividerRatio = 2
        const divider = radius * radiusDividerRatio
        const x = (-Math.cos(baseX / (width / divider)) * radius) * multiplier
        const y = (baseY + baseX / 10) * multiplier
        const z = (Math.sin(baseX / (width / divider)) * radius) * multiplier
        const r = color.r
        const g = color.g
        const b = color.b
        const a = color.a
        return { x, y, z, r, g, b, a }
    }

```

You can change the rotation and the camera movement in the `setupCamera` method:

```jsx

        const rotationPositionRatio = 26
        const rotation = 0.01
        const moveY = rotation * rotationPositionRatio
        scene.onBeforeRenderObservable.add(function () {
            cameraParent.rotation.y -= rotation
            cameraParent.position.y -= moveY
        });

```

Cheers!

R.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [July 14, 2021, 1:36am UTC](https://forum.babylonjs.com/t/text-to-thin-instances-commodore-amiga-like-3d-tower-scroller/22357/2 "2021-07-14T01:36:28Z")

</div>

This is so cooool 🙂

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 14, 2021, 8:19am UTC](https://forum.babylonjs.com/t/text-to-thin-instances-commodore-amiga-like-3d-tower-scroller/22357/3 "2021-07-14T08:19:06Z")

</div>

Thanks! 🕶