Introduction Welcome Getting Started My First Program     Troubleshooting and Distributing Transforming Data Interactive Programs     Programming Exercises     Making Games
Documentation Declarations     Procedures     Variables Statements     Flow Control Expressions Libraries     Print     IO     Random     Game Engine
Tutorials Complete Tutorials     Introduction to Programming     Quick Start     Programming Exercises     Programming Games

MY FIRST PROGRAM


Create your first computer program





What is Programming

Programming (or coding) is the creation of instructions for the computer to execute.

The computer is just a machine that follows exactly what it's instructed, so programming well simply means instructing it to do what you want it to do.

For example, you can create a program that instructs the computer to write the message: "Hello".
If you have an instruction for writing a message, the program will only consist of the instruction:
write
  
"Hello"

Another example: if you have an instruction to move a robot to any direction, you can make the following program to control the robot:
move_robot
  
right

move_robot
  
right

move_robot
  
up

move_robot
  
up

move_robot
  
left





Computers and Data

There is another important thing about computers: they can store and operate on data.

Data can be all sorts of stuff: could be a number the user typed, a mouse click, a gamepad interaction, an image, a video, a file, a 3d object,... anything else we ask it to store.
Likewise, we can do several operations on the data: adding, subtracting, multiplying, comparing, changing the type of data,... and a lot more.

So a more complete way to view programming is:
Programming is instructing a computer to transform data

This way, you can think of any program as a series of instructions that transform data. For instance: a calculator is a program that reads numbers and operations and transform the numbers based on the operations, displaying the result. Paint is a program that reads where the user clicked with the mouse, changes the color of the image where the user clicked and displays the image. Video games are programs that continually reads the user control, updates the game world (like making enemies move and attack, testing if the player fell off a platform, and so on) and transforms that world data into an image on the screen.
As you can see, most programs follow this struct of Input -> Processing -> Output, where you receive some data, transform it and produce a result. In fact, inside a single program you will see this structure multiple times: receiving and processing data so that other parts of the program can then receive and process that data!

Now let me give you a real example!
Considering we have the instructions read_number, add_numbers and write_number, let's instruct the computer to read two numbers and show the result of adding them together.
read_number
   place1
read_number
   place2
add_numbers
   place1, place2, place3
write_number
  place3

Let's go line by line (just like the computer does) to understand what is happening:
  • Read a number and store it some place called place1.
  • Read another number and store it some other place called place2.
  • Add the numbers stored in place1 and place2 and store the result in place3.
  • Write the number stored in place3.

So if the user types the numbers 3 and 4 here is what will happen:
  • The computer will read the number 3 and store it in place1. place1 will hold the number 3.
  • The computer will read the number 4 and store it in place2. place2 will hold the number 4.
  • The computer will add the number in place1 (3) to the number in place2 (4) and store the result of (3+4) in place3. So place3 will hold the number 7.
  • The computer will write to the user the number inside place3: the number 7!




Jumping in Vizzcode: The Entry Point

Hopefully now you have an understanding of what programming is, so let's jump right in and make our first program!
Firstly, create a new project inside Vizzcode.
To start writing instructions to the computer we need an Entry Point.
Like the name says, it's where the computer will start executing commands!

Drag off the white circle in the node Global Scope Start and release the left mouse button.
From the menu, select New Procedure. A procedure is simply a bunch of commands bundled together.

How to create a procedure in Vizzcode

In order for the computer to know that this procedure is the entry point, we have to rename it to main. Simply double click the node header (where it's written proc) and type main.

How to rename a procedure in Vizzcode

If you want to know the basics of using Vizzcode, click here.

Note that when you finished renaming the procedure node to main, the Text panel unlocked and displayed the following code:
main
:: () {
}

This is the equivalent code representation of what you did in the Visual panel.
In Vizzcode, you can program with visual-based nodes or with text interchangeably, so you enjoy the best of both worlds!




Compiling and Executing

After you type some code via text or connect some nodes, you have to tell the computer to transform this representation of computer commands (the text or visual representation) into actual commands the computer can execute. This process of transforming the source code into executable machine instructions is called compilation.
The result of the compilation process is a .exe file anyone can run on their computer, and the computer will execute the instructions inside the executable file.
I will "talk" a little more about executable files in the Distributing section later on.

To generate the executable file, simply click Compile in the top part of Vizzcode.
If the compilation process generated valid machine code, you will see the message
[Compilation Successful]
in the bottom left corner of the screen.
If you see a
[Compilation Error]
message, fear not. It will be accompanied with a nice and descriptive error it encounter so you can fix it. We will discuss Fixing Errors in a while. For now, just make sure you have a correct procedure named main like I showed you in the last section.

Note: If you are using the free version of Vizzcode (instead of the Premium version) you only have one button: Compile and Execute. We will talk about it later in the Distributing section, so just act as if you are pressing both Compile and Execute. ;)

With a successful compilation, you are ready to execute the instructions you told the computer! So press Execute!
**** End of program. Press any key to exit ****

Well, what does that mean?
If everything went as according to plan, you saw a console window (or command prompt) pop up and display the "End of program" message.
The main procedure is the entry point of our program, but we didn't tell the computer to do anything! So the "program execution" is nothing, it just ends... :P

But now you are ready to start with some real instructions... :)




Importing Libraries

Libraries are pieces of code that someone wrote to provide easy access to more complicated instructions.
For example, in Vizzcode, we can import a library that provides a simple way to write (or print) a message to the screen.
To access this library, all you have to do is to drag off the white circle (or Execution Pin) in the Global Scope Start and select Import Library, similarly to what we did before.

There are several libraries in Vizzcode that will help you build the programs you want. You can learn all about them here.

For now, just type "Print" inside the text box in the node. It will tell the compiler to import the library Print. ;)

How to import a library in Vizzcode

Notice again that when you finished the import, more code was generated in the Text panel:
#import
"Print"


main
:: () {
}

Now we have an easy way to display a message to the screen!

Note: You can press the Rearrange Nodes button next to Compile to automatically organize the nodes. :)




Hello, There!

Remember back when we discussed what is programming, I gave an example of a program that instructs the computer to say "Hello"?
Well, now is the time!

If you drag off the Execute pin inside the main procedure node, you will see what instructions you have at your disposal - what you can tell the computer to do in this context.
Just select the node print. It will instruct the computer to display a message to the screen.
You can type whatever message you want in the print node's text box. Just remember to type it inside "double quotes".

How to display a message on the screen

Again, as you program in the Visual panel, the Text panel is updated accordingly!
#import
"Print"


main
:: () {
    
print
(
"Hello, There!"
);
}

Now let's compile and run the program.
Hello, There!
**** End of program. Press any key to exit ****





Next Steps

That's it!
You instructed the computer to do something, and it did it.
This is the heart of programming. Maybe you can already imagine the possibilities that arise from such a simple program, maybe you're considering what instructions you need to make this or that happen, maybe you are just figuring out what just happened.

Fear not, the journey has but begun. You will have many an opportunity to keep learning basic and advanced concepts, building ever more complex programs as you go along.
For now, celebrate this victory and arm yourself for the challenges to come...

:)