Bitsbox

Coding Primer for Grownups

What's the difference between programming and coding?

The terms computer programming and coding are one and the same. I'll use coding from here on because it's shorter.

Coding is the work of writing instructions that a computer can follow. You can't write code in English or any other human languages—computers aren't smart enough to understand those yet. Instead, you write code in dedicated languages that computers can understand. Here are some coding languages that you may have heard of:

- JavaScript

- C++

- Python

- Ruby

There are thousands more, but that hardly matters. You only need to be able to code in the languages that control the hardware or software you want to control. Once you know one coding language, it's pretty easy to learn another. This is because all programming languages use the same concepts. The syntax (the words and how they go together) are different, but the logic is the basically the same.

The anatomy of a computer program

First things first: computer programs look like basic text documents. There are no special sections or predefined headings—just an infinite number of lines. For beginning programmers, this is really confusing. Without structure, how are you supposed to know what goes where?

Practice. And lots of good examples to look at.

When it comes to programming, there's really only one rule: The computer (or whatever device is running the code) starts at the top of the document and runs the lines of code in order. Simple, right?

Not really. Some code runs right away, while some only runs when it's called (referred to) by other code. Some code is running all the time, and some runs only once. Just because a line of code appears above another doesn't mean it will run first. Oy.

Even though code is just instructions, and it's supposed to run in order from top to bottom, the nasty truth is that most programs are anything but linear. Reading code takes practice because you're always jumping around to figure out what's happening.

That said, most programs have the same basic sections of code. Let's look at a typical Bitsbox app and break it up into sections:

  1. fill('oldwest')

  2. prey = stamp('mouse',100,930)

  3. bird = stamp('eagle',370,425)

  4. direction = RIGHT

  5. function grab() {

  6.   prey.move(375,-200,2000)

  7.   bird.move(375,-400,2000)

  8. }

  9. function drag() {

  10.   note.hide()

  11.   bird.move(x,y)

  12. }

  13. function loop() {

  14.   if (prey.x > 750) {

  15.     direction = LEFT

  16.   } else if (prey.x < 50) {

  17.     direction = RIGHT  

  18.   }

  19.   prey.move(direction, 100)

  20.   if (bird.hits(prey)) {

  21.     grab()

  22.     drag = null

  23.     loop = null

  24.   }

  25. }

  26. note = text('Grab that mouse!',240,240,'brown')

Lines 1 – 4: Setup stuff

Programs generally begin with a set of short statements which assign values to keywords that are used later in the code. These keywords are called variables, and they might be single letters, whole words, or compound words that are mashed together.

These four lines of code insert a background image, draw a mouse, draw an eagle, and set the initial value of the variable direction to RIGHT.

Lines 6 – 9: Named blocks of code that are needed later

These are blocks of code that they are referred to elsewhere in the program. Some languages call these methods or procedures; in Bitsbox (and JavaScript), they're functions. Anytime there are several lines of code which would otherwise be repeated, those lines of code are lumped into a function. Thereafter, instead of typing the same code over and over, you can type the name of the function the code inside of it will run.

These four lines of code are a function that moves the eagle and the mouse up to the top of the screen. The function is called grab().

Lines 11 – 14: Code that's ready to respond to inputs

Programs that pay attention to what their users are doing (and react accordingly) have a section of code that is always watching for interactions. These might be screen taps, drags, keyboard presses, or other kinds of input from a person. When the program detects an interaction, it runs the appropriate code.

These three lines of code tell the computer what to do when the user drags on the screen. In this case, the line of text is hidden and the eagle is dragged around the screen.

Lines 16 – 30: Code that keeps repeating over and over and over

Some programs—particularly games—have code that is meant to always be running. Objects that are constantly moving around the screen require the same code to loop over and over. In Bitsbox, loops are most often set up inside of a special loop function, but there are lots of different kinds of loops in programming.

These 15 lines of code do three things: First, they determine the direction the mouse is moving as it goes back and forth across the screen. If it's all the way to the right, is starts going left, and vice versa.

Second, line 23 actually tells the mouse to move—in the current direction, 100 pixels at a time.

The third chunk of code checks to see if the eagle has caught the mouse. If it has, it tells the function called grab() to run, disables dragging, and stops the loop.

Line 32: Commands that execute as soon as you run the program

This is the part of the code that actually runs as soon as you start your program. They execute in order, from top to bottom. Because they're not contained in any functions or loops, they generally only execute once. For this reason, this is the code that starts everything off.

This line of code does only one thing. It prints a message on the screen.

Note:

Order sometimes matters. In Bitsbox, because of the way JavaScript works, it doesn't really matter what order you put the above sections in, but that isn't the case in every programming language. Either way, it's good to come up with a system and follow it consistently; your code will make more sense when you come back to it later.

Where to go from here

When you're coding in Bitsbox, look for this icon in the upper-right corner:


Assets icon


Click it and you'll find a nice list of stamps, fills, and most importantly, commands. Click the commands link to learn more about Bitsbox code and general Javascript. Good luck! You're well on your way toward learning to code yourself.