var typeFont

var typeSize = 40

​

// Cylinder

var cylRadius = 150

var cylCount = 5

var cylRotationRate = -0.8

var cylOffset = 10

​

// Camera

var camRotateX = 15

var camRotateY = 0

var camRotateZ = 0

var camZoom    = 1

​

// Text

var input = 'GOOD MORNING KUTTY '

var inputIndex = 0

var inputLength = input.length

​

function preload() {

    typeFont = loadFont('assets/Coiny-Regular.ttf')

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL)

  angleMode(DEGREES)

  smooth()

  textFont(typeFont)

    textSize(typeSize)

}

​

function draw() {

  background(255)

​

  // Set the camera

  scale(camZoom)

  rotateX(camRotateX)

  rotateY(camRotateY)

  rotateZ(camRotateZ)

​

  // Center the cylinder

  translate(0, -(cylCount-1) * typeSize/2)

​

  // Rotate the cylinder

  rotateY(frameCount * cylRotationRate)

​

  for (var i = 0; i < inputLength * cylCount; i++) {

        inputIndex = i % inputLength

    push()

            // Cylinder transforms

        rotateY(floor(i/inputLength) * cylOffset)

        translate(0, floor(i/inputLength) * typeSize)

        // Ring transforms

        rotateY(inputIndex * (360/inputLength))

        translate(0, 0, cylRadius)

            // Draw the front text

        translate(-typeSize/2, -typeSize/2, 0)

        fill(0)

        text(input[inputIndex], 0, 0)

        // Draw the back text

        translate(0, 0, -1)

        fill(220)

        text(input[inputIndex], 0, 0)

    pop()

  }

}