Categories
Coding openFrameworks

2017/06 Interactive Systems @ Hochschule Rhein-Waal

Between 26 June and 1 July 2017, I taught the Interactive Systems course at the Digital Media M.A., Hochschule Rhein-Waal. Below are the support materials we used for the course.

The course is focused on interaction design for media generation and manipulation. Students will experiment with a broad range of media elements with an emphasis on controlling media behavior through code. Special emphasis will be given to crossings between interaction design, sound and image. The main development environment for the course will be openFrameworks (http://www.openframeworks.cc/), although other environments can be explored. Students are required to plan, develop, document and present a project at the end of the course.

IMG_2742

Program:
26/June
Introduction to openFrameworks; Animation;
Drawing; Interactive behaviours; Generative graphics;
27/June
Interactive particle systems; Physics;
Image, Video;
28/June
Camera; Computer vision for interaction;
Sound; Audio-visuals;
29/June
Project proposal presentations;
Project development;
30/June
Project development;
1/July
Project development;
Project presentations.

You can also check a library of exercises, most of which we’ll replicate in class, here:
http://mlab.taik.fi/mediacode/archives/13371

More introductory info on openFrameworks:
http://mlab.taik.fi/mediacode/archives/13368

Recommended bibliography:

  • ofBook (work in progress) http://openframeworks.cc/ofBook/chapters/foreword.html
  • Noble, J., 2012. “Programming Interactivity: A Designer’s Guide to Processing, Arduino, and openFrameworks” (2nd Edition), O’Reilly Media. (new version coming out in May 2016)
  • Perevalov, D., 2013. “Mastering openFrameworks: Creative Coding Demystified”, Packt
  • Perevalov, D. & Tatarnikov, I., 2015. “openFrameworks Essentials”, Packt

For Processing, but easily adapted to oF:

  • Shiffman, D., 2012. The Nature of Code: Simulating Natural Systems with Processing. http://natureofcode.com.
    Examples ported to oF: https://github.com/superartificial/Nature-Of-Code-Open-Frameworks-Port
  • Bohnacker, H., Gross, B., & Laub, J., 2012. Generative Design: Visualize, Program, and Create with Processing. (C. Lazzeroni, Ed.). New York: Princeton Architectural Press.
  • Pearson, M., 2011. Generative Art: A Practical Guide Using Processing (1 edition). Shelter Island, NY: Manning Publications.

Exercises done in class:

Tutoring exercises:

Instructions: In the openFrameworks folder, duplicate and rename “emptyExample” folder under apps > myApps. Replace the “src” folder with the downloaded “src” folder

(*) add a font file to bin > data folder inside the project folder; change font file name in code
(**) add 6 image files to bin > data folder inside the project folder; change image file names in code

Project evaluation criteria:

  • Functional and aesthetic qualities of final result (UI/UX design) (30%)
  • Technical capabilities demonstrated (30%)
    • Data management (ex: arrays/vectors/for loops/conditions)
    • Project structuring (ex: classes/structs)
  • Depth of project (amount of content or functionalities) (20%)
  • Innovation and creativity (20%)

Send projects to:

  • Project files: https://www.dropbox.com/request/zDi9jZ5lqErclwMNuXNV (Deadline 1/July/2017);
    • Project files should be sent as the whole project folder, zipped. You can also email me the GitHub link if you have the files there.
  • Video files: https://www.dropbox.com/request/Bk81YDOWvmoDmIe8MkqU (Deadline 8/July/2017).
    • Video files should be around 20 seconds of duration, and demonstrate usage of project. They can be screen capture videos, or recorded with a camera (ex phone). Videos and their quality count for evaluation. Resolution should be HD 1280 x 720.
    • Mac screen capture: you can use QuickTime (Fila > new screen recording) with SoundFlower for audio (if needed) – tutorial
    • PC screen capture: some recommendations – Camtasia, OBS, VLC (haven’t tried these myself)

Project proposals:

Class notes: