Yesterday was kind of a rest/review day. Today let's start getting into some fun stuff: drawing!
If you've got your Mini Micro Cheat Sheet, then you know that the Mini Micro has an 8-layer display. Each layer can be set to any of several display modes: solid color, text, pixel graphics, sprites, or tiles. Where one layer is transparent, you can see through to layers behind; display(0) is the frontmost layer, and display(7) is at the back.
Today we're going to use a pixel display, which by default is already set up as display(5), and referred to by the gfx global variable. So fire up your Mini Micro, and try this command:
gfx.clear
Did you notice anything happen? It's pretty subtle. At startup, the graphics layer is set to a very dark blue color. The above command cleared it to black.
Now let's try a bit more:
for x in range (0,960,7)
gfx.line 0,0, x,640
end for
You should see a result like this:
Neat, right? The pixel display is 960 pixels wide, with 0 on the left and 960 on the right; and 640 pixels high, with 0 on the bottom of the screen and 640 at the top. In computers, just as in math, we commonly refer to the horizontal axis as "x" and the vertical axis as "y". (And you may note that x and y in Mini Micro are laid out exactly the same way as graphs you probably did in school... this is not true in all environments, so watch out for that if you ever do any coding elsewhere.)
The gfx.line command takes four parameters: the X and Y coordinates of one end of the line, and the X and Y coordinates of the other end of the line. So, as our for loop varies x from 0 to 960 in steps of 7 (i.e. 0, 7, 14, 21, etc.), gfx.line 0,0, x,640 draws a line from the lower-left corner, to each x position at the top of the screen.
This makes some interesting patterns because the lines are not perfect; they are composed of pixels. (These are called moiré patterns, if you're curious.) You'll get different patterns by varying the step size.
But producing this pattern took four lines of code, which is a bit of a nuisance to repeat and modify. So let's use the code editor. Enter edit, then type the code in again:
gfx.clear
for x in range(0,960,7)
gfx.line 0,0, x,640
end for
Save & Exit, then run. The result won't look much different, though if you're paying attention you will see it draw the pattern again. At this point, take a moment to edit and run a few more times, changing that 7 to other numbers, or maybe changing the 0,0 to something like 480,0 (the middle of the bottom edge of the screen).
Now let's make it more interesting by adding some color! You may recall that the color global variable refers to a map of common colors; enter color to see them. But wait... one of those items is not like the others. The "rgb" entry is displayed as FUNCTION(r, g, b)!
color.rgb is in fact a function that constructs a color given the red, green, and blue values, each from 0 to 255. Try it: enter color.rgb(0,0,0). This prints "#000000", which is the color hex code for black, and is exactly the same value as color.black. color.rgb(255,255,255) returns "#FFFFFF", or the same as color.white. But you can make a whole lot (about 17 million) different colors by varying those red, green, and blue numbers.
So now edit your program one more time, and insert this line right before the gfx.line call:
gfx.color = rgb(x % 256, 128, 255)
This uses %, or the mod operator, which you may not have seen before. The mod operator gives you the remainder after dividing. Remember in elementary school when you learned that 7 divided by 3 was "2 remainder 1"? Well, mod gives you that remainder 1. 7 % 3 is 1 (don't take my word for it; try it in Mini Micro!).
The handy thing about mod is that the result is always less than the number you're dividing by. So x % 256 (read this as "x mod 256") is always less than 256, and so a valid argument for rgb. Here we're using x % 256 for the red value, while always using 128 for green and 255 for blue.
The result, if you've left your text display cluttered like I have, will look something like this:
To get rid of all that junk, you can enter text.clear (or just clear if you want to clear all displays). Considering adding this to your program so the junk is cleared every time.
And this is where I stop guiding your steps for today. Take it from here! Vary those color values! Add additional loops that draw to the rest of the screen. Change the step size. What pretty patterns can you create?
Click here for Day 6!
