Now that we know how to count, let's try drawing, using our newly discovered counting abilities! To draw, we are first going to learn about an 'array'. An array is a list of slots where each slot can hold a value (much like a variable). You can kind of think of an array as a list of variables.
To use arrays, you use square backets [ and ]. You can use or change
the value of slot in the array by telling the computer which 'index' you want to use.
An index is a number inside the [ and ] and arrays always start at
index 0. For example, array[0] tells the computer you want to use the
first slot in the array. array[1] is the second slot and
array[2] is the third slot.
Here's a simple example showing how we can make a new array and index into it.
var myArray = [];
myArray[0] = 100;
myArray[1] = 200;
print(myArray[0]);
print(myArray[1]);
Let's copy that example code and run it to see what happens.
Let's try to understand each piece of this code. Just like before,
the var tells the computer that we want to have a new variable, and this time
the variable is called myArray. We using = to set
the variable to [], which is an empty array.
Just like before ; tells the computer that we at the end of the line.
var myArray = [];
myArray[0] = 100;
myArray[1] = 200;
print(myArray[0]);
print(myArray[1]);
Now we are setting the first slot in the array. We do this by telling the computer
that we are using the varible myArray we created above. Then we tell it we want
the first slot [0] (remember 0 is the first slot, 1 is the second, 2 is the third,
etc.).
var myArray = [];
myArray[0] = 100;
myArray[1] = 200;
print(myArray[0]);
print(myArray[1]);
And just like before, we are using = to set a value. This time we are setting the
first slot of myArray using index [0], and we are setting it to the
number 100. Again, ; is the end of the line.
var myArray = [];
myArray[0] = 100;
myArray[1] = 200;
print(myArray[0]);
print(myArray[1]);
The next line is very simliar to the previous one, but now we are setting the second slot of
the array by using index [1] and we setting it to the number 200.
var myArray = [];
myArray[0] = 100;
myArray[1] = 200;
print(myArray[0]);
print(myArray[1]);
The next two lines use that print function to display the values in the array.
myArray[0] is the first slot and myArray[1] is the second slot.
var myArray = [];
myArray[0] = 100;
myArray[1] = 200;
print(myArray[0]);
print(myArray[1]);
Now let's try to combine what we learned in the first challenge with an array. Let's fill up
an array with the numbers from 0 to 10,000 counting by 100's. We use * for
multiplication and in this case, we are multiplying by 100.
var myArray = [];
for (var i = 0; i < 101; i = i + 1) {
myArray[i] = i * 100;
}
print(myArray);
Let's copy that example code and run it to see what happens.
Hopefully you understand how and why that works. If not, ask Mommy or Daddy.
Here's another way to fill up an array.
var myArray = [];
for (var i = 0; i < 101; i = i + 1) {
myArray.push(i * 100);
}
print(myArray);
You may have noticed a new push function that we used here. It pushes
a new number onto the end of the array. For example, if your array has
the numbers 5 and 8 in it [ 5, 8 ] and then
you push(10) on it, you'll get an array of [ 5, 8, 10 ].
Let's copy that example code and run it to see what happens.
Now for something a little different. Let's try drawing using an array. We are going
to draw in a box where the number 0 is the middle of the box,
-150 is the bottom of the box, and 150 is the top
of the box. Each value in the array will get drawn in the box from left to right.
This might be easier to understand with an example
If you wanted to draw something across the middle of the box, you could do this:
var myArray = [];
for (var i = 0; i < 151; i = i + 1) {
myArray.push(0);
}
draw(myArray);
Give it a try! You can try changing push(0) to push(150) to make
it go across the top. Or push(-150) to go across the bottom.
Now let's make it a little more interesting.
var myArray = [];
for (var i = 0; i < 151; i = i + 1) {
myArray.push(i);
}
draw(myArray);
This will draw a line from the middle of the box to the top-right corner. Try it!
I hope you understood all of that. If not, please ask Daddy or Mommy questions! Okay, now for your challenges!!
Write code that draws a line from the middle of the box to the bottom-right corner.
Write code that draws a line from the bottom-left of the box to the top-right corner.
Write code that draws an X across the box. It should look like this:
You might need two arrays for this one!
Write code that draws a diamond in the box!!!
You might need 2 arrays for this one and change the direction of your for-loop in the middle of each one.