Lecture 6: JavaScript Web Apps Using gibber.lib



  • gibber.lib.js JavaScript library (GitHub will always have the latest version, but the template below includes the current version to get started.)
  • TextWrangler (or the text editor of your choice)
  • Cyberduck (of the FTP client of your choice)


  • Lecture 4 and 5 JavaScript Readings

Gibber Code Examples: 

HTML/JavaScript Gibber Template:

Assignment #2

Reading Response (due 10/27)

  •  Complete the readings/tutorials from Lectures 4 and 5. Send me an email with the subject “Art 102 Reading 2″ containing the following:
    • At least 2 topics/concepts that were confusing and what you did not understand.
    • At least 2 topics/concepts that you found interesting/useful and would like to explore or understand further.
    • Answers to the following:
      1. How does Gibber’s Canvas object differ from a standard HTML 5 canvas?
      2. In JavaScript (and most programming languages) what is the difference between ‘=’, “==” and “===” ?
      3. Suppose you are using Gibber to create an continuous mapping between a 3D object’s scale and an oscillator’s frequency. What parameters would you need to set to change the range of mapping? What method would you call to change the direction of the mapping?
      4. Suppose you are trying to create a 2D drawing in Gibber that changes size or color depending on the current note playing in a synthesizer’s sequence, for example, d = FM(‘bass’).note.seq( [0, 3, 5 , 7], 1/8 ). What parameter of d could you read that would correspond to the current note being played? In what special function would you read this parameter so that you obtain the latest value at the graphics frame rate?

Programming Project (due 10/29)

  • Create an audiovisual composition or experiment for the web using JavaScript and libGibber meeting the following requirements:
    • The use of at least one for or while loop.
    • The use of at least one custom function that takes at least one parameter.
    • The use of at least one conditional statement.
    • You may use 2D and/or 3D graphics, but you must also use at least one of Gibber’s prebuilt shaders. Use the mouse to control at least one of the shader’s parameters.
    • Use at least 2 audiovisual mappings. Sound may drive graphics or vice-versa. (Hint: you may need to use the Follow() function or capitalization of a property name, but not necessarily)
    • Your project and source code should be viewable online at www.art102.com/YourName/Project2 (or you can use your own webspace and url if you have one)
    • If you are experiencing difficulty getting your Gibber code to run in the browser using gibber.lib.js (Windows users, for example), please just focus your efforts on the composition in Gibber and email me your code. If you are on mac and experiencing problems running in the browser then please see me in office hours Wednesday morning between 10-12 or send me an email to debug.

Lecture 5: JavaScript Basics and Graphics in Gibber (Part 2)


Code Examples:

Lecture 4: JavaScript Basics and Graphics in Gibber (Part 1)


  • Gibber Beta – addresses some bugs such as ADSR
  • Note: When working with graphics in Gibber make sure WebGL is enabled in your browser (usually found in settings or preferences).


Code Examples:

Assignment #1: (due before class on the listed due dates)

  • Reading response due 10/14: Complete the readings/tutorials from Lectures 2 and 3. Send me an email with the subject “Art 102 Reading 1″ containing the following:
    • 2 topics/concepts that were confusing/unclear and what you did not understand.
    • 2 topics/concepts that you would like to explore or understand further.
  • Programming project due 10/16: Create your first “Giblet” i.e. Gibber program. This could be a study in sound design, a short musical composition, or simple instrument. Projects will not be graded on aesthetics – so you are free to make something purely experimental or musical. Feel free to use the Gibber manual/tutorial examples as a basis for you work, but the result should be your own. You can think of this as sonic sketching. If there is a sound or piece of music you like, you can try to “sketch” something similar, or you can create something completely abstract. The purpose is simply to being experimenting with sound and programming in Gibber. Projects should meet the following requirements:
    • Use at least 2 arrays
    • Use at least 1 effect controlled by the mouse X and/or X position
    • Use at least 2 oscillators or synths
    • Implement at least one form of modulation
    • Email me your Gibber code with the subject “Art 102 Assignment 1″
    • Be prepared to give a quick (3-5 min) presentation of your program in class and describe the ideas/rules/mappings used.

Lecture 1: Introduction to the Field(s)

Computer Music:


Visualization and Visual Music

Sound Art/Interactive

Hierarchy of Programming Languages


Welcome to Art 102! Please check out the Course Info page for the syllabus and contact info. Continue to check this page for the latest course notes, readings, example code, and assignments.