Ported "Input" examples from Processing

L5.lua

@@ -144,9 +144,9 @@ function love.load()
 
   -- Clear both buffers initially
   love.graphics.setCanvas(L5_env.backBuffer) 
-  love.graphics.clear(0.5, 0.5, 0.5, 1) -- gray background
+  love.graphics.clear(unpack(L5_env.bgColor))
   love.graphics.setCanvas(L5_env.frontBuffer) 
-  love.graphics.clear(0.5, 0.5, 0.5, 1) -- gray background
+  love.graphics.clear(unpack(L5_env.bgColor))
   love.graphics.setCanvas()
 
   initShaderDefaults()
@@ -322,6 +322,7 @@ function love.textinput(_text)
   key = _text
   L5_env.typedKey = _text
   L5_env.keyWasTyped = true 
+  if textinput ~= nil then textinput(_text) end
 end
 
 function love.resize(w, h)
@@ -332,12 +333,12 @@ function love.resize(w, h)
   L5_env.backBuffer = love.graphics.newCanvas(w, h) 
   L5_env.frontBuffer = love.graphics.newCanvas(w, h ) 
 
-  -- Clear new buffers and apply scaling
+  -- Clear new buffers with current background color
   love.graphics.setCanvas(L5_env.backBuffer) 
-  love.graphics.clear(0.5, 0.5, 0.5, 1)
+  love.graphics.clear(unpack(L5_env.bgColor))
 
   love.graphics.setCanvas(L5_env.frontBuffer) 
-  love.graphics.clear(0.5, 0.5, 0.5, 1)
+  love.graphics.clear(unpack(L5_env.bgColor))
 
   love.graphics.setCanvas(L5_env.backBuffer)
 
@@ -423,11 +424,11 @@ function size(_w, _h)
   L5_env.backBuffer = love.graphics.newCanvas(_w, _h) 
   L5_env.frontBuffer = love.graphics.newCanvas(_w, _h) 
 
-  -- Clear new buffers
+  -- Clear new buffers with current background color
   love.graphics.setCanvas(L5_env.backBuffer) 
-  love.graphics.clear(0.5, 0.5, 0.5, 1)
+  love.graphics.clear(unpack(L5_env.bgColor))
   love.graphics.setCanvas(L5_env.frontBuffer) 
-  love.graphics.clear(0.5, 0.5, 0.5, 1)
+  love.graphics.clear(unpack(L5_env.bgColor))
 
   -- Set back to back buffer for continued drawing
   love.graphics.setCanvas(L5_env.backBuffer)
@@ -485,9 +486,9 @@ function fullscreen(display)
   L5_env.frontBuffer = love.graphics.newCanvas(w, h) 
 
   love.graphics.setCanvas(L5_env.backBuffer) 
-  love.graphics.clear(0.5, 0.5, 0.5, 1)
+  love.graphics.clear(unpack(L5_env.bgColor))
   love.graphics.setCanvas(L5_env.frontBuffer) 
-  love.graphics.clear(0.5, 0.5, 0.5, 1)
+  love.graphics.clear(unpack(L5_env.bgColor))
 
   love.graphics.setCanvas(L5_env.backBuffer)
   width, height = love.graphics.getDimensions()  
@@ -852,6 +853,7 @@ function define_env_globals()
   -- global color state 
   L5_env.fill_mode="fill"   --also: "line"
   L5_env.stroke_color = {0,0,0}
+  L5_env.bgColor = {0.5, 0.5, 1}
   L5_env.currentTint = {1, 1, 1, 1} -- Default: no tint white
   L5_env.color_max = {255,255,255,255}
   L5_env.color_mode = RGB --also: HSB, HSL
@@ -898,6 +900,8 @@ function define_env_globals()
   L5_env.useTexture = false
   L5_env.textureMode=IMAGE -- NORMAL or IMAGE
   L5_env.textureWrap=CLAMP -- wrap mode CLAMP or REPEAT
+  -- Background color tracking: {r, g, b, a} normalized 0-1
+  L5_env.bgColor = {0.5, 0.5, 0.5, 1}
   -- custom print output on screen
   L5_env.printBuffer = {}
   L5_env.defaultFont = love.graphics.getFont()
@@ -1673,8 +1677,10 @@ function background(_r,_g,_b,_a)
   if type(_r) == "userdata" and _r:type() == "Image" then
     image(_r,0,0,width,height)
   else
+    local bgColor = toColor(_r,_g,_b,_a)
+    L5_env.bgColor = bgColor  -- Store normalized RGBA for buffer clearing
     local prevR, prevG, prevB, prevA = love.graphics.getColor()
-    love.graphics.setColor(unpack(toColor(_r,_g,_b,_a)))
+    love.graphics.setColor(unpack(bgColor))
     love.graphics.rectangle("fill", 0, 0, width, height)
     love.graphics.setColor(prevR, prevG, prevB, prevA)
     L5_env.clearscreen = true 

examples/clock.lua

@@ -0,0 +1,67 @@
+--[[
+  Clock.
+
+  The current time can be read with the second(), minute(),
+  and hour() functions. In this example, sin() and cos() values
+  are used to set the position of the hands
+
+  Adapted from Processing Examples website.
+  https://processing.org/examples/clock.html
+]] --
+require("L5")
+
+local cx, cy
+local secondsRadius
+local minutesRadius
+local hoursRadius
+local clockDiameter
+
+function setup()
+    size(640, 360)
+    windowTitle("Clock")
+    describe("Display the current time")
+
+    stroke(255)
+
+    local radius = min(width, height) / 2
+    secondsRadius = radius * 0.72
+    minutesRadius = radius * 0.60
+    hoursRadius = radius * 0.50
+    clockDiameter = radius * 1.8
+
+    cx = width / 2
+    cy = height / 2
+end
+
+function draw()
+    background(0)
+
+    -- Draw the clock background
+    fill(80)
+    noStroke()
+    ellipse(cx, cy, clockDiameter, clockDiameter)
+
+    -- Angles for sin() and cos() start at 3 o'clock;
+    -- subtract HALF_PI to make them start at the top
+    local s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI
+    local m = map(minute() + map(second(), 0, 60, 0, 1), 0, 60, 0, TWO_PI) - HALF_PI
+    local h = map(hour() + map(minute(), 0, 60, 0, 1), 0, 24, 0, TWO_PI * 2) - HALF_PI
+
+    -- Draw the hands of the clock
+    stroke(255)
+    strokeWeight(1)
+    line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius)
+    strokeWeight(2)
+    line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius)
+    strokeWeight(4)
+    line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius)
+
+    -- Draw the minute ticks
+    strokeWeight(2)
+    for a = 0, 354, 6 do
+        local angle = radians(a)
+        local x = cx + cos(angle) * secondsRadius
+        local y = cy + sin(angle) * secondsRadius
+        point(x, y)
+    end
+end

examples/constrain.lua

@@ -0,0 +1,48 @@
+--[[
+  Constrain.
+
+  Move the mouse across the screen to move the circle.
+  The program constrains the circle to its box.
+
+  Adapted from Processing Examples website.
+  https://processing.org/examples/constrain.html
+]] --
+require("L5")
+
+local mx = 0
+local my = 0
+local easing = 0.05
+local radius = 24
+local edge = 100
+local inner = edge + radius
+
+function setup()
+    size(640, 360)
+    windowTitle("Constrain")
+    describe(" Move the mouse across the screen to move the circle. The program constrains the circle to its box.")
+
+    noStroke()
+    ellipseMode(RADIUS)
+    rectMode(CORNERS)
+end
+
+function draw()
+    background(51)
+
+    -- Change the position of the drawn ellipse to the position of the mouse with easing
+    if (abs(mouseX - mx) > 0.1) then
+        mx = mx + (mouseX - mx) * easing
+    end
+
+    if (abs(mouseY - my) > 0.1) then
+        my = my + (mouseY - my) * easing
+    end
+
+    -- Constrain the position of the ellipse to the inner rectangle
+    mx = constrain(mx, inner, width - inner)
+    my = constrain(my, inner, height - inner)
+    fill(76)
+    rect(edge, edge, width - edge, height - edge)
+    fill(255)
+    ellipse(mx, my, radius, radius)
+end

examples/easing.lua

@@ -0,0 +1,42 @@
+--[[
+  Easing.
+
+  Move the mouse across the screen and the symbol will follow.
+  Between drawing each frame of the animation, the program
+  calculates the difference between the position of the
+  symbol and the curson. If the difference is larger than 
+  1 pixel, the symbol moves part of the distance (0.05) from its
+  current position toward the cursor.
+
+  Adapted from Processing Examples website.
+  https://processing.org/examples/easing.html
+]] --
+require("L5")
+
+local x = 0
+local y = 0
+local easing = 0.05
+
+function setup()
+    size(640, 360)
+    windowTitle("Easing")
+    describe(" Move the mouse across the screen and the symbol will follow.")
+
+    noStroke()
+end
+
+function draw()
+    background(51)
+
+    -- Change the position of the drawn ellipse to the position of the mouse with easing
+
+    targetX = mouseX
+    dx = targetX - x
+    x = x + dx * easing
+
+    targetY = mouseY
+    dy = targetY - y
+    y = y + dy * easing
+
+    ellipse(x, y, 66)
+end

examples/keyboard-functions.lua

@@ -0,0 +1,92 @@
+--[[
+  Keyboard Functions
+
+  Click on the window to give it focus and press the letter keys to type colors.
+  The keyboard function keyPressed() is called whenever a key is pressed. 
+  keyPressed() is another keyboard function that is called when a key is released.
+
+  Adapted from Processing Examples website.
+  https://processing.org/examples/keyboardfunctions.html
+  by Martin Gomez
+
+  Original 'Color Typewriter' concept by John Maeda.
+]] --
+require("L5")
+
+local maxHeight = 40
+local minHeight = 20
+local letterHeight = maxHeight
+local letterWidth = 20
+
+local x = -letterWidth
+local y = 0
+
+local newletter = false
+
+local numChars = 26
+local colors = {}
+
+function setup()
+    size(640, 360)
+    windowTitle("Keyboard Functions")
+    describe("Press letter keys to create forms in time and space")
+
+    noStroke()
+    colorMode(HSB, numChars)
+    background(numChars / 2)
+
+    -- Set a hue value for each key
+    for i = 0, numChars - 1 do
+        colors[i] = color(i, numChars, numChars)
+    end
+end
+
+function draw()
+    if newletter == true then
+        -- Draw the "letter"
+        local y_pos
+        if letterHeight == maxHeight then
+            y_pos = y
+            rect(x, y_pos, letterWidth, letterHeight)
+        else
+            y_pos = y + minHeight
+            rect(x, y_pos, letterWidth, letterHeight)
+            fill(numChars / 2)
+            rect(x, y_pos - minHeight, letterWidth, letterHeight)
+        end
+        newletter = false
+    end
+end
+
+function textinput(text)    
+    local alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+
+    if string.match(key, "^[A-Z]$") then
+        keyIndex = string.find(alphabet, key) - 1
+        letterHeight = maxHeight
+        fill(colors[keyIndex])
+    elseif string.match(key, "^[a-z]$") then
+        keyIndex = string.find(alphabet, string.upper(key)) - 1
+        letterHeight = minHeight
+        fill(colors[keyIndex])
+    else
+        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

examples/keyboard.lua

@@ -0,0 +1,48 @@
+--[[
+  Keyboard.
+
+  Click on the image to give it focus and press the letter keys
+  to create forms in time and space. Each key has a unique identifying
+  number. These numbers can be used to position shapes in space.
+
+  Adapted from Processing Examples website.
+  https://processing.org/examples/keyboard.html
+]] --
+require("L5")
+
+function setup()
+    size(640, 360)
+    windowTitle("Keyboard")
+    describe("Press letter keys to create forms in time and space")
+
+    noStroke()
+    background(0)
+
+    rectWidth = width / 4
+end
+
+function draw()
+    -- Keep draw() here to continue looping while waiting for keys
+end
+
+function keyPressed()
+    local keyIndex = -1
+    -- Convert the built-in key variable from a string to its byte value
+    local keyByte = string.byte(key)
+
+    if (keyByte >= string.byte('A') and keyByte <= string.byte('Z')) then
+        keyIndex = keyByte - string.byte('A')
+    elseif (keyByte >= string.byte('a') and keyByte <= string.byte('z')) then
+        keyIndex = keyByte - string.byte('a')
+    end
+
+    if (keyIndex == -1) then
+        -- If it's not a letter key, clear the screen
+        background(0)
+    else
+        -- If it's a letter key, fill a rectangle
+        fill(millis() % 255)
+        x = map(keyIndex, 0, 25, 0, width - rectWidth)
+        rect(x, 0, rectWidth, height)
+    end
+end