Documentation: Ported Processing "Input" examples

[hmyam6090-lab]

Ported all examples under the Input section of the Processing examples website

https://processing.org/examples/

Added animation examples (Easing, Clock, Milliseconds) to the "Animations and Variables" section
Created a new "Input and Interaction" section with:
Mouse Input subsection (6 examples)
Keyboard Input subsection (2 examples)
Constraints and Movement subsection (1 example)

All documented with gifs and example code following the structure of existing examples on l5lua.org

[lee2sman]

Thank you for your work on this.

Some comments:

• Can you remove the comment line that says "-- Draw modes" inside the setup of every sketch? I think that is confusing to a beginner trying to understand the difference between setup() and draw()
• Typo in the windowTitle for Constrain() example (missing the letter "s")
• In the Mouse Press example I'd remove the first comment line in draw. I think it's confusing to explain Processing there. Please also remove the line saying to implement doubleClicked() in the "To try" section; it doesn't make sense since we don't have that function in L5 currently. You also don't have a mousePressed() function there so i'd remove the line that says it demonstrates the difference between mousePressed() (function) and mouseIsPressed (variable) in L5.
• Please remove comments in any sketch that say "Declare variables" or "Initialize variables" as that is not needed
• Can you add back in the useful comment line from mouse functions about checking for testing if the cursor is over the box
• Don't forget that in keyboard we can't use width variable in line 4 until setup() is called! This needs to be moved later.
• In Keyboard Functions it shouldn't suggest in the "to try" section adding sound feedback for different keys since we haven't implemented a sound library yet!
• Keyboard Functions code does not work correctly for me. Typing uppercase does not create a bigger rectangle. Check the ouput of the Processing example and then try your code in L5 to compare. I would use a different approach, checking if the key is within a to z for lowercase or A to Z for uppercase and then within number digits.

Thanks

[hmyam6090-lab]

Thank you for your suggestions @lee2sman! I've gone through and cleaned up the comments/documentation as well as fixed the width variable bug in keyboard.

For the Keyboard Functions example, I wanted to ask for your opinion on how best to handle debugging this behavior. While testing, I printed the built-in key variable across Processing, p5.js, and L5, and noticed a difference in how they handle case.

In Processing and p5.js, the key variable distinguishes between uppercase and lowercase automatically. For example, when typing "Hi L5lua"

In p5.js, "shift" was parsed as "Shift" and there was also a distinction between lower and uppercase

In Processing, modifier keys like Shift are parsed as special characters and uppercase letters are correctly reflected in the key variable:

However, in L5, there does not seem to be a distinction between uppercase and lowercase, all letters appear lowercase. After looking into the library code, it seems the key variable is updated through updateLastKeyPressed(), which relies on love.keyboard.isDown() that don't take uppercase key presses

Because of this, I wasn’t able to reproduce the original Processing example’s behavior using a clean keyPressed() implementation. The only workaround I found was manually checking modifier keys (lshift, rshift, capslock) with love.keyboard.isDown() but that felt really messy compared to the original example.

Instead, I was able to reproduce the Processing behavior using the textinput() callback by slightly modifying it's implementation in L5.lua. This approach produces the same output as the Processing example, but I wanted to check if there’s a more idiomatic way to handle this in L5, or if relying on textinput() here is the right direction, since the example was supposed to show how to use the keyPressed() function.

-- In L5.lua
function love.textinput(_text)
  key = _text
  L5_env.typedKey = _text
  L5_env.keyWasTyped = true 
  if textinput ~= nil then textinput(_text) end
end

-- In keyboard-functions.lua
function textinput(text)    
    local char = text
    local charByte = string.byte(char)
    
    local keyIndex = -1
    
    -- Check if character is uppercase (A-Z)
    if charByte >= string.byte('A') and charByte <= string.byte('Z') then
        keyIndex = charByte - string.byte('A')
        letterHeight = maxHeight
        fill(colors[keyIndex])
        
    -- Check if character is lowercase (a-z)
    elseif charByte >= string.byte('a') and charByte <= string.byte('z') then
        keyIndex = charByte - string.byte('a')
        letterHeight = minHeight
        fill(colors[keyIndex])
    else
        -- Non-letter character
        fill(0)
        letterHeight = 10
    end

    newletter = true

    -- Update the "letter" position
    x = x + letterWidth

    -- Wrap horizontally
    if x > width - letterWidth then
        x = 0
        y = y + maxHeight
    end

    -- Wrap vertically
    if y > height - letterHeight then
        y = 0
    end
end