Hello World
From Impure Wiki
This is an introductory tutorial to guide you through your very first steps in Impure - and to follow a very long tradition of saying Hello World that every decent programming language respects.
Contents |
1. Thinking about it
The unavoidable beginning point of any program -of any good program at least- is thinking about what you are trying to accomplish. There's no sense in moving things around if you don't know what you want to do and how to do it.
In Impure you will often start with these two questions:
- What kind of data will I be working with?
- What do I want to accomplish with it?
Our case is clear: We want to say "Hello World!", which means displaying the message within the application. And the data we are dealing with is text, which in the context of Impure is called a String data structure.
Therefore, we need a way of displaying strings. We are en route!
2. Gathering the tools
The place for getting anything you might need within Impure is the Library. Since we want to visualize something, we are going to start by opening the Visualizators panel.
There are lots of visualizators in there - but we know we want to display a String. So we are going to click in the strings tag in the cloud at the top. This brings up in the list all the relevant modules for this data structure. We will also choose basic, because we know we don't want do anything complicated - just show some text.
There are currently only two modules that are tagged as string and basic at the same time: SimpleStringVisualizator and TextVisualizator. That narrows the search down nicely for us. Since we are at it, we will go for the slightly fancier option: TextVisualizator. We just need to click on it and drag it to any point within the blank application canvas or stage.
3. Getting the data
There's always an important step when building Impure spaces, which is getting the data we are going to work with. There are several ways to do it: we can load a file, get it from the Internet using an API module, or even generate it on the fly. But our mission today is much more simple: our data is the string we are going to visualize, namely, "Hello World!", so we can just enter ourselves.
All modules have one or more "input boxes" or inlets, which are the "doors" through which they get data from the outside world. Some are required for the module to work, and some are optional. TextVisualizator has just one required inlet, which is precisely the string we are going to visualize. It is the topmost icon in the left side of the module.
We just have to click in the small gray rectangle to the left of the inlet and start typing...
And that's it! As soon as we click anywhere else (or do nothing for a few seconds) the input data is sent to the module, which then performs its specific function. In this case, showing everyone around our important message: Hello, Impure World!
4. Making it better
Once we get a basic information flow working in Impure, there are always many ways to improve it and make it grow. Ours is as simple as it gets, but still we can make it a bit more handsome. The optional inlets of modules give your further control of the way they do their work. We are going to use the second inlet of TextVisualizator to make our message bolder. This inlet takes a Number data structure, and controls the size of the font in the visualizator. The default value (there's always a default in optional inlets) is 12 pixels.
Let's go for something larger: say, 48. Type the number in the inlet.
That's better!
5. Passing it around
We've done a nice little space, but since it was easy to get here we can perhaps go one step beyond. The soul of Impure is setting up information flows: that means connecting modules to pass data around, transforming and visualizing it in interesting ways.
As many visualizator modules, ours allows for user interaction, and makes the result of that interaction available for further use within the space. The operation allowed by textVisualizator is selection: just drag your mouse over the displayed text to select any part of it. The contents of your selection are also a String. The module outputs that String in its outlet: that is, the icon you can see on the bottom right of the module.
Let's take that output and use it to feed another module. Since it is still a String, why not using TextVisualizator again? Let's go for it. We don't need to come back to the library. There is a handy way of duplicating modules that are already on the stage. Press the 'D' on your keyboard, click on the module's border and drag. That's it: a blank copy of TextVisualizator ready for use.
Now we need to connect it. Click on the outlet of the first instance of the module and drag. You will see a line that follows your mouse around: that is the connection. Let's release it within the first inlet of the new visualizator.
Any outlet can feed more than one input. We will take advantage of that for making the font of the new instance larger, using the same Number we already have for the first. Connect it to the second inlet.
Now there's a dynamic, interactive visualization process in place. Everything we select in the first TextVisualizator is immediately visible in the second one. Perhaps not terribly useful, but a simple example of common processes you will undoubtedly use to build much more complex spaces in the very near future!
