Kinda Simple Typewriter Function

Code Sharing
1

Hi everyone, here’s a relatively simple “typewriter” function that is commonly used for role-play games and RPG games. Enjoy!

-- Typewriter

-- Use this function to perform your initial setup
function setup()
    print("Hello World!")
    viewer.mode = FULLSCREEN
end

function initiate()
    
end
— Initiate typewriting action!
function typeWriter(t, x)
    font("Courier-Bold")
    fontSize(25)
    text(t, x, WIDTH/2 - 300)
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(40, 40, 50)
    
    -- This sets the line thickness
    strokeWidth(5)
    
    -- Do your drawing here
    nOS = 1
    if ElapsedTime > nOS then
        typeWriter("H", WIDTH/2)
        nOS = 1.1
    end
    if ElapsedTime > nOS then
        typeWriter("e", WIDTH/2 + 15)
        nOS = 1.2
    end
    if ElapsedTime > nOS then
        typeWriter("l", WIDTH/2 + 30)
        nOS = 1.3
    end
    if ElapsedTime > nOS then
        typeWriter("l", WIDTH/2 + 45)
        nOS = 1.4
    end
    if ElapsedTime > nOS then
        typeWriter("o", WIDTH/2 + 60)
        nOS = 1.5
    end
    if ElapsedTime > nOS then
        typeWriter(".", WIDTH/2 + 75)
        nOS = 1.5
    end
    
    if ElapsedTime > nOS then
        typeWriter("G", WIDTH/2 + 105)
        nOS = 1.6
    end
    if ElapsedTime > nOS then
        typeWriter("o", WIDTH/2 + 120)
        nOS = 1.7
    end
    
    if ElapsedTime > nOS then
        typeWriter("a", WIDTH/2 + 150)
        nOS = 1.8
    end
    if ElapsedTime > nOS then
        typeWriter("w", WIDTH/2 + 165)
        nOS = 1.9
    end
    if ElapsedTime > nOS then
        typeWriter("a", WIDTH/2 + 180)
        nOS = 2
    end
    if ElapsedTime > nOS then
        typeWriter("y", WIDTH/2 + 195)
        nOS = 2.1
    end
    if ElapsedTime > nOS then
        typeWriter(".", WIDTH/2 + 210)
        nOS = 2.2
    end
end
2

@Creator27 Here’s another way to do it.

viewer.mode=FULLSCREEN

function setup()
    textMode(CORNER)
    fill(255)
    fontSize(40)
    h=0
    cnt=1
    str="abcdefghijklmnopqrstuvwxyz 1234567890"
    str1=""
end

function draw()
    background()
    e=ElapsedTime
    if cnt<=#str then
        if e>h+1 then
            str1=string.sub(str,1,cnt)
            cnt=cnt+1        
            h=e
        end
    end
    text(str1,100,HEIGHT/2)
end
3

Let’s imagine that we started with the first program. could we look at it and somehow improve it until we got something like the second? i think we could.

first, we notice the duplications. the nos = 1.x … those all go up by 0.1. so we could remove all those and put nos = nos + 0.1 at the end of draw …

Then we notice x goes up by 15, so we want to take out those. maybe at the top of draw, we init pos to 0 and increment it in the typewriter function …

would it be valuable if i were to do a little article showing how to get from the first program to the second, in little tiny steps, with as few magical insights as possible?

4

@RonJeffries Well I’d like it!

5

i’ll give it a go then.

6

And here you go: A Tale of Two Programs

7

@RonJeffries Enjoyed reading your article. Haven’t been reading them lately but I do checkin every now and then to see what’s there.

8

@RonJeffries In your article, you were showing how to reduce the size of the original users code. I threw my original version together in a few minutes without much thought to size. So here’s what I was able to cut it down to with a little more thought.

viewer.mode=FULLSCREEN

function setup()
    textMode(CORNER)
    fill(255)
    fontSize(25)
    str="abcdefghijklmnopqrstuvwxyz 1234567890"
end

function draw()
    background()
    text(string.sub(str,1,ElapsedTime//1),100,HEIGHT/2)
end
9

sweet indeed. i wonder if i can get there step by step.

10

I liked the article too. Something a little thrilling about reading the thought “this is too difficult to reason through, I’m just gonna code it”.

11

i should perhaps revisit the article, your characterization doesn’t sound like what i was trying to say.

dave’s version doesn’t do quite what the original does, do it’s not possible to refactor to that point. but it does seem fun to push the project further …

12

@RonJeffries What is the original doing that mine isn’t. Just curious.

13

one second pause before first character, types 10/second not 1/sec, and different coords. the first is prob the only one that’s germane at all. yours is a nifty approach … i don’t see at this moment how to refactor toward it, but i bet i can.

14

@RonJeffries In my code, in the text line with //1, the 1 can be changed to any value. If it’s .1 then there’s a 1/10 second delay between characters. A 5 would give 5 seconds between characters. The different coords is just a matter of changing the 100, HEIGHT/2 in the text statement. So I think I can match the original just by changing a few variables. Those should probably be variables anyways so values could be passed to a function of the code.

15

Here’s another version with the scroll routine as a function. Different calls with different messages with different times. Times in seconds can be fractions of seconds to whole seconds.

viewer.mode=FULLSCREEN

function setup()
    textMode(CORNER)
    fill(255)
    fontSize(25)
end

function draw()
    background()
    scroll("qwertyuiopasdfghjklzxcvbnm 9876543210",100,200,.6)
    scroll("asdfghjkl zxcvbnm qwertyuiop 11 22 33 44 55 66 77 88 99 00",100,300,.1)
    scroll("aa bb cc dd ee ff gg hh ii jj kk ll 11 22 33 44 55 ... 99",100,400,.3)
end

function scroll(msg,xPos,yPos,time)
    text(string.sub(msg,1,ElapsedTime//time),xPos,yPos)
end
16

yes, dave. no implication that you should have mirrored OP’s spec. i did because i was refactoring.