Depending on operating system and computer model, WebGL may or may not work on a particular computer. You can still draw in 2D even if WebGL is disabled. A link is presented in the console to check for WebGL compatibility when Gibber first launches.
Gibber's environment is fairly simple to use. The primary unit of the environment is the
Column; a Gibber column
can consist of a code editor, a graphic user interface (GUI), Gibber's code reference, a chat window, a graphics context, or any number of other
programming tools. These columns can be freely resized by dragging on their borders. Every column is given a unique id # that is present on the left
of the column header. This identifier can be used to identify any column in the global
Columns array for manipulation. As one example:
When Gibber is first launched a single code editor and the Console column fill the window. New columns that are created are placed to the right of all existing columns; the window automatically scrolls to new columns to reveal them if they wind up being outside the bounds of the window's viewport.
Giblets in Gibber are code sketches that can be saved, loaded and shared with other users via a simple hyperlink. In order to save and load giblets, you must first make an account on Gibber's central server. By hitting the publish button in Gibber's main menubar, you can save your giblet to Gibber's database and decide whether or not you want to make it publicly viewable. You can browse all your published sketches by hitting the Browse button in Gibber's main menubar. Once you have published a sketch you can save iterations by simply hitting Ctrl+S.
I will provide more options for local storage in the future; in the meantime, if you don't want to deal with Gibber's central server it is simple to copy and paste to/from a text editor.
When learning a programming language, the first task is typically to get the text `Hello, world.' to appear. In Gibber, we can be a little more original and try creating a drum loop (we'll follow that up with a visual example afterwards). Enter the following code into the code editor that appears when you first launch Gibber (the left column width id # 0):
a = Drums( 'x*ox*xo-' )
To execute the code, highlight it, and then hit Control+Shift+Enter. This will execute the code at the start of the next musical measure, while Control+Enter (no shift) will execute it immediately. In practice it's common to use Control+Shift+Enter when doing audio programming to help ensure that musical sequences are rhythmically aligned.
What happened here? We can roughly break it down into three steps:
'x*ox*xo-'that is used to define our drum beat. x's represent kick drum hits, o's represent snares, and * / - represent hihats.
a. There is special significance to single-letter variable letter names that will be discussed later.
Now try changing the string that makes up the drum beat
'x*ox*xo-'). What happens if you change the string to
'xxxxxxxx' and execute the code again? The beat is replaced and now we only hear the kick drum every 1/8th note. It is important to note that the original beat was replaced; this is thanks to using a single-letter variable name, which will be discussed more in the future. For now, notice that if we use a different name, like
aa, and repeatedly execute the line of code, multiple drum beats will play simultaneously.
Now that we've created some audio, how about trying our hand at some visuals? The visual equivalent of hello world in Gibber is to place a 3D Geometry on the screen and spin it. Try entering the following line:
a = Cube().spin(.001)
What happens here?
spinmethod of the Cube object, which then spins the cube .001 radians along all axes per frame of video.
You'll notice that, similar to the Drums example, if we change the speed for the rotation and re-execute the line of code, we still only have one cube present on the screen. The new cube that we create simply replaces the old one due to the use of a single letter variable name. Also similar to the drums, if we change the name to
aa, and repeatedly execute the line with different speeds, we'll instead get multiple cubes all spinning at different rates.
So far we've learned the Control+Enter and Control+Shift+Enter keyboard shortcuts to execute code. Another important shortcut is Control+. (Control plus period). This shortcut executes the following line of code:
clear removes all elements from the audiovisual graph. It's an especially important one to remember in case you accidentally program something that's really, really loud.