Ok, so I got excited and couldn’t wait a week until the next lesson. And I know all of you got extremely exited while building your own cities and you want to do more!
Did you notice that some stuff felt like a lot of effort to do? I did, that is why I cheated and used Inkscape to produce the images you saw on the previous post…
But before I bore you to death, click here and enter the following where it tells you to:
var base = 200;
var left = 10;
var height = 100; // something less than the value of base
var width = 20;
rect(left, base - height, width, height);
height = 50;
width = 60;
left = 40;
rect(left, base - height, width, height);Lets play a little. Change the value of base - replace var base = 200; with var base = 300. See what that did? Lining up the buildings at the bottom has just became a breeze!
Try adding the following below the code you’ve written:
left = left + width + 10;
rect(left, base - height, width, height);Now creating something a little more complex feels like a bit less work (at least to me, I don’t like keeping running totals of positions in my head).
You have just learned how to use variables! They are basically a way for the computer to store a value. That value can be used later as in rect(left, base - height, width, height) or changed as in height = 40;.
And you can do some maths with variables: var x = 2*4 + 1; or left = left + 10;.
Not all variables need to be numbers. Add this:
var myCityName = "Some city";
text( 10, 10, myCityName);Now go and change that, you can’t let people see a city named “Some city”!!
Recreate the city that you created in the previous lesson, but this time using variables. Try out new variables and see what happens. Here is mine (code this time, promise). And please remember to share yours with the tag #learn2code.
Until next, uhm, time.