|28 Janvier 2018|
by Adrien Meyer (Student from DI)
In this first phase, we explored the principles of instructing a machine about what it must do, and when.
Programming a computer, is like making it “know” what we want it to do, and how we want it to behave.
In this LightBot game, the purpose is to make the little robot walk and jump and switch on light bulbs. But, unlike a regular game where you, the player, click a mouse or tap a screen when it is time to jump, here we need to program the robot. It means that we need to compose a block of instructions for it to execute when we say Go.
The robot will then execute the exact program as we wrote it ahead of time.
We went through 3 stages:
We saw how we can add instructions (i.e. actions) from the bottom row, to the program area (the yellow box). The instructions in the bottom, are everything the robot is able to understand, and knows to do.
We just compose a music for the machine, with the instructions: it will play its part when told to start.
Procedures are small (or big!) blocks of code (i.e. instructions) inside a program.
A Procedure has a name (for example: PROC1) and the main program is able to call (i.e. run, execute, invoke) a procedure by its name, as much as needed.
In the above example, instead of repeating 3 times the exact same series of instructions to advance and light up and turn right, we can instead gather together this sequence inside a Procedure, and then we tell the robot to execute 3 times the procedure!
A loop, in programming, means: repeating something a certain number of times.
In this stage, we instruct the robot to repeat the same procedure again and again.
Instead of adding multiple times the “call” to P1 from the main program, here we decided to make the procedure P1 call itself again!
The robot will never end the loop… but fortunately the game is successfully over the moment we light up the last bulb 🙂
But programming is not really clicking on big buttons to make a robot turn right or jump.
In this phase, let’s see what real code looks like.
We learn here to manipulate the Canvas, i.e. to draw lines and polygons and circles on the white, empty Web page.
“c” is the name of our canvas here.
On the “c” canvas, we select the fill color, then we paint a rectangle using the function “fillRect”.
A function is like a procedure, but it accepts parameters. This way, the fillRect function can be used to draw any rectangle of any dimensions, at any position, because these are the parameters that we pass, when invoking the function.
We’ve covered the use of a variable, which is like a small box in the head of the program, in which you can put a value (for example, the number 80, above), and which has a name (in this example: “size” is the name of the variable, and we place the value “80” inside).
Using this variable, it is possible for us to change the value in one single place, and then our two rectangles will be painted differently.
Then, we’ve covered… loops again!
In a for loop, every iteration (i.e. every time the inner block of code is executed) can know the current number of iteration: here we’ve used the variable “i” to count the number of iterations in our loops.
See how we use “i” inside another variable “b”, in order to compute a Color variable “rgba” to make a gradient from black to blue!