FunkyType

This program takes takes keyboard input, but it doesn’t type what it reads. For instance, if you type ‘a’, you get c. It would be funny to see someone type an entire paragraph with this.

function setup()
    displayMode(FULLSCREEN)
    textWrapWidth(WIDTH-50)
    data=""
    showKeyboard()
    fill(0, 0, 0, 255)
    fontSize(48)
    font("Papyrus")
end

function draw()
    background(255, 255, 255, 255)
    text("FunkyType", WIDTH/2, HEIGHT-50)
    text(data, WIDTH/2, HEIGHT/2)
end

function keyboard(key)
    if (key==BACKSPACE) then
        data = string.sub(data, 0, -2)
    else
        data = data .. string.char(string.byte(key) + 2)
    end
end

@niorg2606 Here a variation of your code.

displayMode(FULLSCREEN)

function setup()
    data=""
    showKeyboard()
    fontSize(48)
end

function draw()
    background(0)
    fill(255)   
    x=50
    y=HEIGHT-100
    for z=1,#data do
        v=string.byte(data,z,z)+40960
        text(utf8.char(v),x,y)
        x=x+30
        if x>720 then
            x=50
            y=y-40
        end
    end
end

function keyboard(key)
    if (key==BACKSPACE) then
        data = string.sub(data, 0, -2)
    else
        data = data .. key
    end
end

Hey, @dave1707.

I see in your variation to @niorg2606 's example you are performing a simple task when the user presses the backspace key. I’d like to begin a new line on the screen when a user presses the return key.

Is it possible to record a CR LF in the string (data, in the above example) that’s holding all the characters entered? Just a nudge in the right direction is all I’m looking for.

On a related note, you add 40960 to your string.byte assignment to “v” as part of a for loop. Is that simply a way to access a whole different set of characters? If so, what should I google in order to find more character sets?

As usual, thank you, in advance, for a bit of guidance and all the useful examples in this forum.

@Scotty - 4096 is most of a hexadecimal word, why the extra 0 at the end I’m not sure. It looks like it is an offset for the Utf8 character set.

Thanks, @Bri_G . I’ll start googling with that.

@Scotty @Bri_G The 40960 just got me into a section of Unicode that gave weird characters. Since were using text on the graphics screen, we can’t use CRLF like a print statement. Instead I’m using the "\" character. When I see that character then I move to the start of the next line.

displayMode(FULLSCREEN)

function setup()
    data=""
    showKeyboard()
    fontSize(48)
end

function draw()
    background(0)
    fill(255)   
    x=50
    y=HEIGHT-100
    for z=1,#data do
        if string.sub(data,z,z)=="\\\" then
            x=50
            y=y-40
        else
            v=string.byte(data,z,z)+40960
            text(utf8.char(v),x,y)
            x=x+30
            if x>720 then
                x=50
                y=y-40
            end
        end
    end
end

function keyboard(key)
    if key==BACKSPACE then
        data=data.."\\\"
    else
        data = data .. key
    end
end

@Scotty Here some code to view Unicode characters. For starters, slide parameter a to 238 and slide b to view different characters. If you slide a to 234, that’s where I start when I add 40960 in the above code. You can change the 40960 value to something else to show different characters. .

function setup()
    parameter.integer("a",224,239,224)
    parameter.action("a=a+1",function() a=a+1 end)
    parameter.action("a=a-1",function() a=a-1 end)
    parameter.integer("b",128,191,128)
    parameter.action("b=b+1",function() b=b+1 end)
    parameter.action("b=b-1",function() b=b-1 end)
end

function draw()
    background(40, 40, 50)
    if a<224 then
        a=224
    end
    if a>239 then
        a=239
    end
    if b<128 then
        b=128
    end
    if b>191 then
        b=191
    end
    v3=128%0x40
    v2=b%0x40
    v1=a%0x10
    text(a.."  "..b.."  "..128,200,HEIGHT-50)
    text(v3+v2*64+v1*4096,WIDTH/2,HEIGHT-50)
    fill(225)
    offset=128
    for y=1,8 do
        for x=1,8 do            
            str=string.char(a)..string.char(b)..string.char(offset)
            fontSize(60)
            text(str,5+x*85,730-y*85)
            fontSize(12)
            text(offset,5+x*85,690-y*85)
            offset=offset+1
        end
    end
end

Thanks, @dave1707 for the Unicode viewer program. This opens up an interesting area to explore.

As for your first example, that also works very well. However, in my program, since I need to record the "" character in my stored text I’m using the “$” (something my program would never encounter) to trigger a RETURN and to simply back up two characters when the BACKSPACE is required. Your example will give my plenty to go on.

Thanks again for your help.

@Scotty I wasn’t sure what character I could use for the CRLF since I didn’t know what you were going to do. I thought I’d show you the other program so you could go through the Unicode characters and pick a different range to use in the first program by changing the 40960 value.

Thanks, @dave1707. My program will work something like a text editor in that when it reads the contents of a tab the program will perform various tasks.

One half of the screen will be the text editor and the other half will be more graphical in nature. And, of course, the bottom available for the keyboard.

I may not pursue the text editor aspect very far. My main interest is to see if I can accomplish one simple (maybe not for me) task.

If my program encounters a K: D in the tab the program will display the common musical chords of the D major key (D, G, A and A7). If it encounters a K: G it will display the G Major chords of G C, D and D7. These will be displayed in a strip just above the keyboard.

My inspiration is an app I use for writing sheet music. Unfortunately that app does not do the task I have described.

I may have more questions in the future but for now you have given me a good starting point.

Thank you very much.

@Scotty I don’t know anything about sheet music, but here something I thru together. I’m not doing anything with the keyboard because I don’t know anything about the different music notes. If you can use something based off this, maybe I can do something with the keyboard. Slide your finger right or left to scroll the notes.

PS. Sound can probably be added to play the notes.

displayMode(FULLSCREEN)

function setup()
    str="aeacdfbgebabcfcdgebfcaagedbcaeacdfbgebabcfcdgebfcaagedbcaeacdfbgebabcfcdgebfcaagedbc"
    dx=0
    showKeyboard()
end

function draw()
    background(219, 217, 219, 255)
    lines()
end

function lines()
    fill(0)
    stroke(0)
    strokeWidth(2)
    y=500
    size=16
    for d=0,4 do
        line(dx,d*size+y,WIDTH,d*size+y)
    end 
    for z=1,#str do
        s=string.sub(str,z,z)
        v=string.byte(s)-97
        ellipse(z*30+dx,v*size/2+y,16,10)
        line(z*30+6+dx,v*8+y,z*30+6+dx,v*8+y+30)
        text(s,z*30+dx,y-20)
    end
end

function touched(t)
    if t.state==MOVING then
        dx=dx+t.deltaX
    end
end

Here’s an updated version. I added buttons instead of the keyboard.

displayMode(FULLSCREEN)

function setup()
    dx=0
    btnTab={}
    nameTab={"c","c#","d","d#","e","f","f#","g","g#","a","a#","b"}
    z=0
    for x=1,6 do
        for y=1,2 do  
            z=z+1      
            btnTab[z]=button(x*150,200-y*60,nameTab[z],z)
        end
    end
    keyTab={}
end

function draw()
    background(219, 217, 219, 255)
    lines()
    for z=1,#nameTab do
        btnTab[z]:draw()
    end
end

function lines()
    fill(0)
    stroke(0)
    strokeWidth(2)
    yLine=500
    size=16
    for d=0,4 do
        line(dx,d*size+yLine,WIDTH,d*size+yLine)
    end 
    for z=1,#keyTab do
        s=keyTab[z]
        ellipse(z*30+dx,s*size/2+yLine-24,16,10)
        line(z*30+6+dx,s*8+yLine-24,z*30+6+dx,s*8+yLine+30-24)
        text(nameTab[s],z*30+dx,yLine-50)
    end
end

function touched(t)
    if t.y>200 then
        if t.state==MOVING then
            dx=dx+t.deltaX
        end
    else
        if t.state==BEGAN and t.y<HEIGHT/2 then
            for z=1,#nameTab do
                btnTab[z]:touched(t)
            end
        end
    end
end

button=class()

function button:init(x,y,n,k)
    self.x=x
    self.y=y
    self.name=n
    self.key=k
end

function button:draw()
    sprite("Cargo Bot:Dialogue Button",self.x,self.y)
    fill(255)
    text(self.name,self.x,self.y)
end

function button:touched(t)
    if t.x>self.x-49 and t.x<self.x+49 and t.y>self.y-23 and t.y<self.y+23 then
        table.insert(keyTab,self.key)
    end
end

Thanks @dave1707. These are two very interesting examples. I appreciate you sending them and look forward to experimenting with them. And, yes, the notes do land on the wrong lines but that’s part of what I want to mess with.

One last question, I found a Unicode character I’d like to use in this program but I’m not sure if it can be displayed in the iPad. I googled on “musical symbol G clef” and found U+1D11E in fileformat.info. It’s the stylized “G” found at the start of a line of music.

If you could tell me if it is available in the iPad or not I’d appreciate it. I don’t want to waste my time and I certainly don’t want to waste yours either.

Again, thank you very much.

@Scotty I couldn’t get the U+1D11E to work. I think that’s for Microsoft something or other. One thing you can do is look for a free G clef image and copy that. I have another version of the above code. It allows you to move a cursor left or right and insert or delete notes. How many note buttons should there be. Like I said, I don’t know anything about sheet music.

@Scotty I went to the below web site. 11 rows down is a G clef image. Tap on it and it will show with a checkerboard background. Long press on it until a popup shows. Tap on Save image which will put it in your Camera roll of your Photos. You can go into the Codea Dropbox folder and press +Add from Photos to save it there. From there you can use sprite to put it on the screen. You’ll have to adjust the sprite size for what you want. Below is a picture of what I ended up with that I put on 5 lines.

https://pixabay.com/images/search/treble%20clef/

Hey, @dave1707
First off, thank you very much for the above code example. Sometimes I’m blind to the simplest of solutions.
And second, I hope I copied your modfied code back in properly without loosing the formatting. Kinda new at this.

As you can see I have made some mods to your code. By removing the sharps the result places the notes on the musical staff in the correct position. I’ll deal with those later.

I plan on developing this more but using a different methodology for selecting the notes. I will share after I get that going.

As for the other example you mentioned above that allows you to “move a cursor left or right and insert or delete notes” I’d be interested in seeing that.

Once again, thank you very much.

P.S. I’m in my late 50’s and just now learning to read sheet music.

-- Musical Notes V1
--[[
NOTES:
This code is the work of Dave1707 and modified by me, Scotty. I added the G-Clef, as a sprite, at his direction. The symbol can be had at " https://pixabay.com/images/search/treble clef/ ".

Most modifications and additions to Dave's code are noted below.
--]]

displayMode(FULLSCREEN)

function setup()
    -- To locate size and vertical loc of the G-Clef symbol.
    parameter.integer("hGClef", 50,200,120)
    parameter.integer("wGClef", 50,200, 75)
    parameter.integer("yGClef",-25, 25,  2)    
    
    dx=0
    btnTab={}
    --nameTab={"c","#c","d","#d","e","f","#f","g","#g","a","#a","b"}
    -- All "sharpened" notes have been removed for now.
    -- If the note is sharp it still needs to reside at the same position on the music staff.
    -- For now lets not worry about them.
    nameTab={"C","D","E","F","G","A","B","c","d","e","f","g","a","b"}
    
    z=0
    for x=1,7 do      -- columns
        for y=1,2 do  -- rows
            z=z+1      
            btnTab[z]=button(x*125, 200-y*60, nameTab[z], z)
        end
    end
    keyTab={}
    
    marginL = 20
    marginR = 0
end

function draw()
        
    background(219, 217, 219, 255)
    lines()
    for z=1,#nameTab do
        btnTab[z]:draw()
    end
end

function lines()
    fill(0)
    stroke(0)
    strokeWidth(2)
    yLine=500
    size=16
    for d=0,4 do
        -- 5-line staff
        line(dx+marginL,d*size+yLine,WIDTH-marginR,d*size+yLine)
        -- Left hand vertical line of 5-line staff
        for d=0,3 do
            line(dx+marginL,d*size+yLine,dx+marginL,d*size+yLine+size)
        end
    end 
    pushMatrix()
        translate(60,0)
        for z=1,#keyTab do
            s=keyTab[z]
            pushMatrix()
                translate(z*40+dx, s*size/2+yLine-24)
                -- Add leadger lines when notes falls above or below 5-line staff.
                if nameTab[s] == "C" or nameTab[s] == "a" then
                    line(-12,0, 12,0)
                elseif nameTab[s] == "b" then
                    line(-12,-size/2, 12,-size/2)
                end
                rotate(30) -- Notes on sheetmusic are rotated just a bit for style.
                --ellipse(z*30+dx,s*size/2+yLine-24,16,10) -- Moved x,y loc to translate op
                ellipse(0,0,20,15)
            popMatrix()
            line(z*40+7+dx,s*8+yLine-24,z*40+7+dx,s*8+yLine+50-24) -- note stem
            text(nameTab[s],z*40+dx,yLine-35)
        end
    popMatrix()
    sprite("Dropbox:G_Clef",dx+marginL+40,yGClef+yLine+26,wGClef,hGClef)
end

function touched(t)
    if t.y>200 then
        if t.state==MOVING then
            dx=dx+t.deltaX
        end
    else
        if t.state==BEGAN and t.y<HEIGHT/2 then
            for z=1,#nameTab do
                btnTab[z]:touched(t)
            end
        end
    end
end



button=class()

function button:init(x,y,n,k)
    self.x=x
    self.y=y
    self.name=n
    self.key=k
end

function button:draw()
    sprite("Cargo Bot:Dialogue Button",self.x,self.y)
    fill(255)
    text(self.name,self.x,self.y)
end

function button:touched(t)
    if t.x>self.x-49 and t.x<self.x+49 and t.y>self.y-23 and t.y<self.y+23 then
        table.insert(keyTab,self.key)
    end
end






@Scotty First off, thanks for the credit you give me in your above code. I appreciate it, but it’s not necessary. Any code examples I post are for anyone to use however they want. Just as long as they don’t say they wrote it all. There are some exceptions and I usually post something in the code to that affect. I like the changes you made to the notes, it makes the display a lot nicer. Here’s the code that allows you to move a cursor forward or backward thru the notes. You can move by one note or jump to the start or end of the notes. You can also delete or insert notes.

displayMode(FULLSCREEN)

function setup()
    spriteMode(CENTER)
    dx=0
    btnTab={}
    nameTab={"c","c#","d","d#","e","f","f#","g","g#","a","a#","b"}
    z=0
    for x=1,6 do
        for y=1,2 do  
            z=z+1      
            btnTab[z]=button(x*150,200-y*60,nameTab[z],z)
        end
    end
    js=button(250,250,"<<",20)
    bs=button(374,250,"<",20)
    de=button(500,250,"Delete",20)
    fs=button(625,250,">",20)
    je=button(750,250,">>",20)
    keyTab={}
    keyPos=1
end

function draw()
    background(219, 217, 219, 255)
    lines()
    for z=1,#nameTab do
        btnTab[z]:draw()
    end
    bs:draw()   -- backspace
    fs:draw()   -- forward space
    de:draw()   -- delete
    js:draw()   -- jump to start
    je:draw()   -- jump to end
end

function touched(t)
    if t.y>300 then
        if t.state==MOVING then
            dx=dx+t.deltaX
        end
    else
        if t.state==BEGAN and t.y<300 then
            for z=1,#nameTab do
                btnTab[z]:touched(t)
            end
            bs:touched(t)
            fs:touched(t)
            de:touched(t)
            js:touched(t)
            je:touched(t)
        end
    end
end

function lines()
    fill(0)
    stroke(0)
    strokeWidth(2)
    yLine=500
    size=16
    for d=0,4 do
        line(dx,d*size+yLine,WIDTH,d*size+yLine)
    end 
    for z=1,#keyTab do
        s=keyTab[z]
        ellipse(z*30+dx,s*size/2+yLine-24,16,10)
        line(z*30+6+dx,s*8+yLine-24,z*30+6+dx,s*8+yLine+30-24)
        text(nameTab[s],z*30+dx,yLine-50)
    end
    stroke(255,0,0)
    line(keyPos*30+dx,yLine-40,keyPos*30+dx,yLine+100)
    text(string.format("Position %d of %d notes.",keyPos,#keyTab),WIDTH/2,HEIGHT-50)
end



button=class()

function button:init(x,y,n,k)
    self.x=x
    self.y=y
    self.name=n
    self.key=k
end

function button:draw()
    sprite("Cargo Bot:Dialogue Button",self.x,self.y)
    fill(255)
    text(self.name,self.x,self.y)
end

function button:touched(t)
    if t.x>self.x-50 and t.x<self.x+50 and t.y>self.y-25 and t.y<self.y+25 then
        if self.key<13 then
            if keyPos<#keyTab then
                table.insert(keyTab,keyPos,self.key)
                keyPos=keyPos+1
            else
                keyTab[keyPos]=self.key
                keyPos=keyPos+1
            end
        end
        if self.name=="<" and keyPos>1 then
            keyPos=keyPos-1
        end
        if self.name==">" and keyPos<=#keyTab then   
            keyPos=keyPos+1
        end
        if self.name=="Delete" and keyPos<=#keyTab and keyPos>0 then 
            table.remove(keyTab,keyPos) 
            if keyPos>#keyTab then
                keyPos=#keyTab
            end
        end
        if self.name=="<<" then 
            keyPos=1
            dx=0
        end
        if self.name==">>" then 
            keyPos=#keyTab+1
        end
        if keyPos*30 > WIDTH-100 then
            dx=WIDTH-100-keyPos*30
        end
    end
end

Thanks you @dave1707. This should be fun.

Hey, @dave1707, I finally finished up with this example project after taking a break (getting sidetracked) and messing with other things. It’s too big to post as a single file so I broke it up into several logical tabs. I’ll start a new thread since the original was over two years old. I hope you find it interesting.