Mon, Dec 18

Computational Art

Today's objectives

  • Basics of Processing:
    • Program structure (setup and draw loops)
    • Variables
    • Simple graphics
    • Loops
    • Randomness
    • Mouse input
    • Simple animation
    • Libraries
  • Computational art concepts and examples
  • Physical computing concepts and examples
  • Assignment 8: InDesign

    Using InDesign, use the text and images provided to create a short publication.

    Download images and text here. Assignment files

    You must use all the text provided in the file iceland text.docx, and as many of the images as you choose, with a minimum of one image per page. For every image you use, include the appropriate caption from the captions.txt file. There is no maximum or minimum number of pages.

    You may only use a maximum of two font families - one serif and one sans-serif. You may crop images but not otherwise modify them.

    All text must be black, except for any text superimposed on photos, which may be black or white. All text must be easily readable. Body text should be between 9 and 12 points.

    Use a simple publication grid. I recommend a simple multicolumn grid .

    You do not need to fill the entire page - white space is almost always a good idea. Correct use of paragraph styles, parent pages (master pages) and page numbers is required.

    How to submit:

    Use the "Package" function in InDesign to create a folder containing all the required files, and then use the "Compress" function in MacOS or the "Send to Compressed" function in Windows. You can access these by right-clicking/control-clicking on the folder you want to compress.

    Then, upload to Brightspace by 6 pm, Sun, Dec 10 the resulting zip file as

    To create a .zip archive: Press and hold (or right-click) the file or folder, select (or point to) Send to, and then select Compressed (zipped) folder.


    1. Read the text carefully before attempting to lay it out.
    2. Consider sketching layouts on paper (as simple boxes) before working in InDesign
    3. If you need to refer to the original; the source is the Wikipedia article on Iceland.
    4. Check to make sure the fonts you choose support all characters in the text. (Hint: Icelandic uses characters not found in modern English)
    Late assignment penalties

    For this assignment, late submissions will be penalized at 10% of the total mark (that is, if an assignment is graded out of 10, you will lose 1 point per day, starting on the due date.)

    A 1-hour grace period after the assignment due time will be given to avoid any technical issues related to internet speed resulting in late assignment penalties.

    The best approach, however, is to submit work early.

    Formatting for Usability Assignment

    Needs to be done in InDesign.

    Margins a minimum of 1 inch left and right.

    Use a leading value of twice your body text point size.

    Title page: Title of essay, your name, your student number, instructor's name, course name and number, due date.

    Pages need to be numbered, starting with the first page of your essay (not the title page). Use a header with the title of the essay in it, and your name. Use parent pages.

    You must use paragraph styles for all content.

    Cite the name of the web site on a separate page titled "Works Cited."

    Getting your page numbers to start on the first text page (not the cover page) can be tricky. You need to define a section and then remove the extra automatic page number from the cover page. Refer to: Page numbers and sections or to the video on the class web page, Managing page numbering options.

    Use the MLA format for the citation of the web site on the "Works Cited". List any other references in the "Works Cited" page. Follow the MLA style exactly; you must also include the URL for any web sites. (URLs are optional in MLA style, but I am requiring you to include them. ZoteroBib is a good resource for generating references.

    Include the usability test with your participant as a "personal interview" in your Works Cited - find out how to format that here.

    Package (use File->Package) and zip the file.

    Upload to Brightspace by 6 pm, Sun, Dec 17

    Name your folder YOURLASTNAME_Review and so your zip file will be called



    Variables and Loops


    Handout: Processing PDF

    Basic Processing Template

    Loop example

    Random values example

    Mouse input example

    Computational art with Processing

    Resources and links
    Getting started
    Drawing shapes
    Using colour

    Processing: Start Here. Downloads, tutorials, references.

    Handout: Processing PDF

    What can processing do? Here are lots of examples. Processing exhibition

    Digital art museum: A collection of digital art works, covering the early eras especially well

    Reactable: Making music with touch


    Physical computing

    Resources and links

    Arduino: The most popular microcontroller for artists and designers

    Arduino tutorial: A good starting point

    Wearable computing: the Arduino LilyPad: Incorporating microcontrollers into garments

    Arduino Notebook: Another good starting point


    inFORM - Interacting With a Dynamic Shape Display from Tangible Media Group on Vimeo.


    Many examples found at the Arduino Playground.

    Optional resource

    Simple game mechanism


    • Have Processing open and ready to go.
    • For home use: Download, install and test Processing.

    Quick topics

    Intellectual Property

    Michael Geist's web site is the best starting pointing for news on intellectual property in Canada.

    A primer on Canadian Copyright Law.

    Open source concepts

    A good definition of open source

    Creative Commons: an "open source" license for creative works

    Industrial design

    The Graphical User Interface gallery

    Coming soon...

    Using Processing on the Web.

    While Processing sketches can be run within the Processing IDE, or exported as applications for Windows, Linux or MacOS, you can also insert them in web pages. Processing uses Processing.js. To do this, you need to do several things:

    • First, you need to enable JavaScript mode. Choose "JavaScript" from the mode menu at the top right of the Processing IDE window.
    • If you don't see JavaScript mode as an option, choose "Add Mode..." and install it.
    • Switch into JavaScript mode and choose "Export" from the file menu. This should create a "web-export" folder and open it.
    • Within this folder you will find the "processing.js" library, the ".pde" file which is your sketch, and an HTML file that allows you to preview the sketch. You can look the the HTML to see how the sketch is shown on a web page, and insert that code into your own page.
    • Note that some older browsers will have problems displaying Processing files, and some sketches may need changes to work properly in JavaScript mode.
    • A good tutorial on how to do this is here.