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.
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
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.
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.
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.
Run Script
Now click the "Swap Canvas" button shown in the next picture to enter the 3D world.
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.
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.
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.