Wed, Apr 13

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
  • Resources


    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.

    Processing assignment

    Using Processing, create a simple program of your own design that demonstrates some of the techniques we learned in class.

    Mouse input, loops, random number generation, colour and drawing are all topics to explore.

    Points to keep in mind:

    • All code must be your own. Include your name in a //commment at the top of your sketch. Include a credit and source for any code you have used as a reference or model, and include your name and the assignment date. Use a comment at the beginning of your sketch to do this.
    • Test carefully
    • Use the Processing "Archive Sketch" function (in the "Tools" menu") to create a .zip file of your sketch - submit that zip file.
    • Use the "Reference" function in the "Tools" menu to learn more about additional functions.

    Upload to Brightspace by 6 pm, Tue, Apr 19.

    Name your file

    Optional resource

    Simple game mechanism


    • Have Processing open and ready to go.
    • For home use: Download, install and test Processing. Note: we will stick with Processing version 3.5.4 - scroll down the page to find the download link.

    Quiz 2

    Quiz: April 20
    Quiz preparation

    The quiz covers all topics dealt with from Wed, Feb 09 to April 6. Review all handouts, videos, presentations and other materials.

    This includes:

    • Illustrator: Techniques and tools
    • Vector concepts
    • HTML and CSS concepts: Note: While structure and concepts are important, you will not be expected to write code from memory.
    • InDesign: Tools and techniques
    • Basic typography

    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 master 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

    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.

    Upload both the InDesign file (does not need to be packaged) and a PDF.

    Upload to Brightspace by 6 pm, Tue, Apr 26

    Name your files YOURLASTNAME_Review.pdf and YOURLASTNAME_Review.indd.

    Remember that this is the date for the final version - you still need to submit a rough draft beforehand.

    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.