Bit By Bit Developers

Hello World

Your First Program

OK, let's get started. Usually the complexity of programming languages is judged by how easy it is to print out "Hello World" on the screen. You can check variations of that on this Wikipedia page. In this lesson we will compose a few blocks of code to make that happen, but in 3D! Isn't it exciting?

Start The Application

First thing we will need to do is open up our Application on https://bitbybit.dev/app. This will immediately start an empty Blockly workspace. Now we will need to find two components in order to compose the Hello World application.

Draw Component

To draw things on the screen in bitbybit requires a draw component. You can draw points, lines, polylines, solids and other kinds of objects. It is one of the most important categories, thus you can find it on top of all of the categories that exist. Click on "Drawing" -> "Draw" -> "Draw babylon mesh". Also check out the following picture and click on the marked component to put it on your script canvas.

Picture show how to find the draw component in Blockly editor

Draw Components

When you have that component on your canvas, it will not do anything as it still lacks one required input. We will need a 3D text component from the JSCAD category. Click "JSCAD" -> "3D Text" -> "Spherical Text" as shown in the picture below:

3D text component

3D Text Component

Now that you have two components on your script canvas, you are able to drag them around and change their input values. What we actually need to do is place the 3D Text component into the input of the Draw component. Try dragging Spherical Text to align it's central position to the area of input as shown in the picture below. When the input area of the draw component is highlighted, release the mouse and your component will attach to the draw component which will scale to incorporate the Spherical Text component.

3D text component

Add 3D Text Block to Draw Blocks Input

If the previous step succeeded, change the first input of the Spherical Text component from "abc" to "Hello World" as shown in the picture below.

3D text component

Enter Text "Hello World"

When that is done, find the arrow button in the left bottom part of your screen and click it to "Run" the script.

Image showing how to Run the script

Run Script

Now click the "Swap Canvas" button shown in the next picture to enter the 3D world.

Image showing how to swap the canvas from script to 3D

Swap Canvas

Hold down the left mouse button and drag your cursor in order to rotate your model. You will see the "Hello World" text appear on the screen. In the beginning it's written backwards, but that is just because your camera is positioned behind the text. Rotate the camera and you should see the result of this script as in the picture below.

Image shows the result of script execution that creates 3D hello world text

Hello World Result

Now that you're done with this tutorial you can Save your work by exporting the script you just wrote. Click "More" -> "Export" as shown in the screenshot below.

Image shows which buttons to click to save the script to your computer

Save Your Work

Now your work is safe in your Downloads folder. Next time you will open the Application, you can click "More" -> "Import" to load the file and continue working.

Recap

In the following video we go through this process once more so if you missed something you can see exactly what we did with the mouse while writing this script.

Congratulations! You completed the "Hello World" tutorial. We hope it was not too difficult. Proceed to the next one.