Programming Fundamentals
Lecture 04 – Loops, Arrays and Images
Edirlei Soares de Lima
<edirlei.lima@universidadeeuropeia.pt>
Loop Statements
•
•
•
You may encounter situations where a
block of code needs to be executed
several times.
A loop statement allows us to execute a
statement or group of statements
multiple times.
Lua loop statements: while, for, repeat
Loop Statements (while)
•
•
The while consists of a block of code and a boolean condition.
The condition is evaluated, and if it is true, the code within
the block is executed. This repeats until the condition
becomes false.
While the “boolean condition” is true,
the “block of code” is executed.
.
..
while boolean_condition do
- block of code
-
When the condition becomes false, the
execution of the program continues to
the code that comes after the block of
code of the while.
end
...
Loop Statements – Example 1
•
Examplo 1:
local i = 0
“
write all numbers between 0
and 100 on screen.”
Implement a program to
while i <= 100 do
io.write(i, "\n")
i = i + 1
end
Loop Statements – Example 2
•
Example 2: “Write a program to read 10 numbers and find their
sum and average”
local i = 0
local sum = 0
local avg = 0
io.write("Input the 10 numbers:\n");
while i < 10 do
local value = io.read()
sum = sum + value
i = i + 1
end
avg = sum / 10.0
io.write("The sum is: ", sum, "\n")
io.write("The Average is: ", avg, "\n")
Loop Statements (for)
•
Another common loop statement is the for.
–
It simplifies the implementation of loops that need to be executed a
specific number of times.
...
for var = initial_value, final_value, increment do
- block of code
-
end
...
•
The block of code will be executed for each value of var,
starting from initial_valueand going to final_value,
using incrementto increment/decrement the value of var.
Loop Statements – Example 1
•
Example 1: “Write all numbers between 0 and 100 on screen.”
local i = 0
while i <= 100 do
io.write(i, "\n")
i = i + 1
for i = 0, 100, 1 do
io.write(i, "\n")
end
end
•
Important:
–
In the for statement, the control variable i is local variable;
–
Never change the value of control variable manually;
Loop Statements – Example 2
•
Example 2: “Write a program to read 10 numbers and find their
sum and average”
local sum = 0
local avg = 0
io.write("Input the 10 numbers:\n");
for i = 1, 10, 1 do
local value = io.read()
sum = sum + value
end
avg = sum / 10.0
io.write("The sum is: ", sum, "\n")
io.write("The Average is: ", avg, "\n")
Loop Statements (repeat)
•
•
The while loop checks the condition before executing the
block of code. Thus, it is often known as a pre-test loop.
Lua offers a third loop statement called repeat:
–
The condition is evaluated after the execution of block of code.
–
This means that the block of code will be executed at least once.
...
repeat
-- block of code
until boolean condition
...
Loop Statements – Example 1
•
Example 1: “Write a program to read 10 numbers and find their
sum and average”
local i = 1
local sum = 0
local avg = 0
io.write("Input the 10 numbers:\n");
repeat
local value = io.read()
sum = sum + value
i = i + 1
until i > 10
avg = sum / 10.0
io.write("The sum is: ", sum, "\n")
io.write("The Average is: ", avg, "\n")
Back to the “Hello World”
•
•
•
In the last version of the “Hello World”, we moved the text and
made it return to the initial position when it reaches the limit
of the screen.
What if we need to do the same with 20 “Hello World’s” at the
same time?
–
Duplicating code is never a good option!
How can we do that?
local px -- position of the text in the x axis
function love.load()
love.graphics.setColor(0, 0, 0)
love.graphics.setBackgroundColor(1, 1, 1)
px = 0
end
function love.update(dt)
px = px + (100 * dt)
if px > love.graphics.getWidth() then
px = 0
end
end
function love.draw()
love.graphics.print("Hello World", px, 300)
end
local px -- position of the text in the x axis
function love.load()
love.graphics.setColor(0, 0, 0)
love.graphics.setBackgroundColor(1, 1, 1)
px = 0
end
function love.update(dt)
px = px + (100 * dt)
if px > love.graphics.getWidth() then
px = 0
end
end
function love.draw()
for y = 0, 20, 1 do
love.graphics.print("Hello World", px, y * 30)
end
end
Back to the “Hello World”
Back to the “Hello World”
•
In the last implementation of the “Hello World”, we
implemented the movement of 20 “Hello World’s”.
–
Problem: the 20 “Hello World’s” moved all together
•
How can we make the “Hello World’s” move independently of
each other?
Arrays
•
Arrays are sequences of items (like variables) of the same
type.
–
Each item is identified by an index (integer).
•
With arrays we can store in memory sequences of values
numbers, text, imagens, etc.), which are all associated with a
single variable (the array).
(
Lua Tables
•
•
•
In Lua, all data structures, including arrays, are implemented
using tables.
Tables are the main (in fact, the only) data structuring
mechanism in Lua (a very powerful one).
A Lua table is defined by a set of pairs key-data, where the
data is referenced by the key.
–
The key (index) can be of any type of data (except nil).
Arrays in Lua
•
•
•
In Lua, are implemented through tables indexed by integer
numbers.
Different from many other programming languages, in Lua we
don't need to define the maximum size of an array.
Creating a new array:
my_array = {}
Arrays in Lua
•
Initializing some positions of the array:
my_array[1] = 5
my_array[2] = 11
my_array[5] = 0
my_array[10] = 3
Arrays in Lua
•
We can access the values stored in the array using their index.
myarray = {}
1
2
3
4
5
5
?
?
?
8?
?1
myarray[1] = 5
myarray[4] = 8
myarray[5] = 1
Arrays in Lua
•
Declaring and initializing an array:
a = {}
-- new array
for i=1, 1000, 1 do
a[i] = 0
end
•
•
Indirectly we are defining that the maximum size of the array
is 1000.
We can also declare and initialize an array using a single
statement:
squares = {1, 4, 9, 16, 25, 36, 49, 64}
Example 1: Displaying the Values of an Array
myarray = {2.3, 5.4, 1.0, 7.6, 8.8, 3.9}
for x = 1, 6, 1 do
io.write(myarray[x], "\n")
end
•
Inverse order?
myarray = {2.3, 5.4, 1.0, 7.6, 8.8, 3.9}
for x = 6, 1, -1 do
io.write(myarray[x], "\n")
end
Example 2: Sum of the Values of an Array
myarray = {2.3, 5.4, 1.0, 7.6, 8.8, 3.9}
total = 0
for x = 1, 6, 1 do
total = total + myarray[x]
end
io.write(total)
Exemplo 3: Finding the Larger Value
myarray = {2.3, 5.4, 1.0, 7.6, 8.8, 3.9}
largervalue = myarray[1]
for x = 2, 6, 1 do
if myarray[x] > largervalue then
largervalue = myarray[x]
end
end
io.write(largervalue)
Back to the “Hello World”
•
In the last implementation of the “Hello World”, we
implemented the movement of 20 “Hello World’s”.
–
Problem: the 20 “Hello World’s” moved all together
•
How can we make the “Hello World’s” move independently of
each other?
local px
-- position of the text in the x axis
function love.load()
love.graphics.setColor(0, 0, 0)
love.graphics.setBackgroundColor(1, 1, 1)
px = 0
end
function love.update(dt)
px = px + (100 * dt)
if px > love.graphics.getWidth() then
px = 0
end
end
function love.draw()
for y = 0, 20, 1 do
love.graphics.print("Hello World", px, y * 30)
end
end
local array_px = {} -- array of positions in the x axis
function love.load()
love.graphics.setColor(0, 0, 0)
love.graphics.setBackgroundColor(1, 1, 1)
for y = 1, 20, 1 do
array_px[y] = love.math.random(0, 800)
end
end
function love.update(dt)
for y = 1, 20, 1 do
array_px[y] = array_px[y] + (100 * dt)
if array_px[y] > love.graphics.getWidth() then
array_px[y] = 0
end
end
end
function love.draw()
for y = 1, 20, 1 do
love.graphics.print("Hello World", array_px[y], y * 30)
end
end
Back to the “Hello World”
Generating Random Numbers
number = love.math.random(min, max)
Example 1:
x = love.math.random(1, 100) -- generates a number between 1
and 100
Exemplo 2:
vet = {} -- fill an array with 100 random numbers
for i=1, 100, 1 do
vet[i] = love.math.random(1, 100)
end
Exercise 1
1
) Modify the code of the “Hello World” in order to have each
“Hello World” moving with a different speed (randomly
chosen).
ImageType
•
Games are not created using only geometric shapes. Usually
2
D games use images to represent characters, objects and
environments.
•
•
Löve offers a especial data type called image.
We can load a new image using the function:
image = love.graphics.newImage(filename)
•
We can draw an image using the function:
love.graphics.draw(drawable, x, y, r, sx, sy, ox, oy, kx, ky)
ImageType
•
•
To draw an image on screen, two steps are required:
–
Load the image with the function love.graphics.newImage
–
Draw the image with the function love.graphics.draw
Example:
function love.load()
hamster = love.graphics.newImage("hamster.png")
end
function love.draw()
love.graphics.draw(hamster, 325, 225)
end
ImageType
ImageType
•
By default, images are drawn with the origin located at the
top left corner:
•
Is possible to change the origin point with some addicional
parameters of the love.graphics.drawfunction.
ImageType
•
The function love.graphics.drawhas several optional
parameters:
love.graphics.draw(drawable, x, y, r, sx, sy, ox, oy, kx, ky)
–
–
–
–
–
–
–
–
–
–
drawable: image or other object that can be drawn on screen;
x: position to draw the object (x-axis);
y: position to draw the object (y-axis);
r: orientation of the object (radians).
sx: scale factor (x-axis);
sy: scale factor (y-axis);
What is shearing fator?
ox: origin offset (x-axis);
oy: origin offset (y-axis);
kx: shearing factor (x-axis).
ky: shearing factor (y-axis).
ImageType
•
Example:
function love.load()
hamster = love.graphics.newImage("hamster.png")
end
function love.draw()
love.graphics.draw(hamster, 400, 300, math.rad(90), 1, 1,
hamster:getWidth()/2, hamster:getHeight()/2)
end
Notice that we can get the width and height of an image
with the functions hamster:getWidth()and
hamster:getHeight()
Exercise 2
2
) Write a program to draw a scene like the one illustrated
bellow:
Important: you need to use loop statements
to drawn the images that are repeated
several time (ground and mountains).