Spring 2016

Tuesday and Thursday, 10:00 am to 4:00 pm

Rutgers, Mason Gross School of the Arts, CSB 224

Art and design, today, refuse to settle into any established medium of expression. Various media, their tools and gadgets converge onto each other. They shape content, create new cultural codes and daily practices. It is not only the communication media in convergence. With the complete digitalization of art and design production, the medium constructs the work and the work constructs the medium.

Humanizing technology is necessary to render it accessible and usable by everyone. Digital art invokes this process and good design is essential to introduce new technologies to everybody.

This course, refusing all industrial norms and standards in art and communication, focuses on possibilities and aesthetics of a wide range of digital media and techniques. Students will gain insights and a set of skills for algorithmic modes of artistic expression and design.

This experimental interaction survey course focused on possibilities and aesthetics of various digital media and techniques consists of four units respectively online publishing, motion graphics, algorithmic design and physical interaction with digital interfaces. Human machine interfaces, human to human, machine to human, machine to machine interactions are also some topics to be covered throughout this course.

At the end of this course it is expected that student will gain knowledge on the modalities of interaction and visualization in the context of art and design practice. Throughout the course students will be asked design and produce a project for each unit within some given constraints and also some in-class exercises will be announced on the day. Between each unit of the course readings will be suggested and students will be asked to write response papers after each article.

All Mason Gross students have access to art.rutgers servers and have their personal domains under the URL:

Students are responsible for building up a website on this URL to present the work done for the class, publish response papers and also to blog relevant material to course interests. In the first couple of the weeks basic HTML/CSS coding will be taught in-class workshops.

This course will also guide students to make meaningful generalizations for interpreting or evaluating digital experiences and practices in digital media, art, communication and design. The course consists of:

Lectures on issues related to

  • online publishing
  • motion design
  • graphic programming
  • data visualization
  • interaction
  • physical sensing


    Workshops and in-class exercises on

    • coding with HTML and CSS
    • keyframe animation
    • programming to create generative patterns and animations visualizing data
    • programming for interaction
    • sensors and physical interaction

    Throughout the semester, for programming and digital production, there will be in class demonstrations, sketch problems, one on one trouble shooting sessions etc., however the aim of this course is not to solely teach any particular software or programming language but rather familiarizing students to various different non-linear visual platforms. All students of Mason Gross Visual Arts Department has free access to all tutorial service, you can log in with your lab user and passwords. For example, take a look at these links:

Besides all the platforms which will be introduced in class are open source and very well documented online. So please take time to go through the online tutorials and always try to troubleshoot online by yourself.

Assignment reviews
These reviews are delivered upon your presentation of the assignment on each submission date. All students in class are encouraged to participate to these reviews and discussions.

Research projects
There are reading sets to be assigned after each lecture session and you will be responsible to write an annotation about them. During the semester you will be asked to explore similar works to the ones presented in lecture hours and post them on your blog. These writings and collections will help you a lot to put your ideas and knowledge together to write your thesis proposal.

The course blog is:

Most of the hardware and the software which are going to be used in class will be provided and be ready in the classroom in our class hours. On the other hand we strongly recommend that you have your own computer at home equipped with relevant software for practice and execution of the assignments. Here is a list of software which we are planning to use during the semester. All of these software are free and open source except the Adobe Suite which will be used provisionally.

Some of the assignments will require higher processing speed and larger memories than your own computer has so please prepare yourself to work in the lab at school throughout the semester. If you would like to attend the class with your notebook computer, of course you can but you will be responsible for your own workflow and troubleshooting.

Finally we will be using some DIY electronic boards and sensors for the final project. Basic requirement will be provided by the school but you might want to have your own Arduino UNO board and sensors depending on your project idea. You may check the following URLs for retailers and a buying guide.

Three arrivals of more than 10 minutes late will count as one absence. After three unexcused absences, your fourth absence will lower your final course grade one level. If you miss class, it is your responsibility to catch up on the work by checking the blog and contacting the instructor via e-mail.

Learning Outcomes
A successful student of this course should be able to:

‣ publish text, images, animations online
‣ publish information driven by vast amount of online data or from a database ‣ publish title graphics at broadcasting quality
‣ relate interaction and animation with architecture
‣ experiment and prototype physical interactive interfaces
‣ set workflows and design

We will expect you to engage in research, sketch ideas and their offshoots, pursue multiple solutions to a given problem, and experiment widely with concept, imagery, type, materials and composition.

By the end of the term you will be asked to publish a video documentary of your work throughout the semester. This video will include screencasts, live action footage and talking heads. Also by the end of the semester you will be asked to make general presentation of all semester work.

Your course grade will be calculated as follows.

50% : an average of all four projects eliminating the least successful one 25% : final presentation performance, overall assignments
25% : coursework and portfolio updates

For project critiques, work must be presented on the announced date, at the beginning of the scheduled critique. No late work will be accepted.

You will have two make up chances during the semester. These two weeks, you may follow from the schedule, you will be given the chance to enhance two previous assignments. Please keep in mind that the make-up’s are only for solving for technical problems or optimizing your work. In order to get an upgrade you should keep working on your project even after the deadline and presentation.

Please note that a C grade means you have attended all classes and met satisfactorily the requirements of the course. To earn a higher grade, you must show not only more effort but also a higher level of achievement in your work. There is no guarantee that extra effort will yield outstanding work; and yet it is extremely unlikely that without extra effort you will create interesting work or develop as a designer.

Below you can find more detailed information and a rough schedule for three units of the course which are, respectively, online publishing, data visualization and physical interaction and electronic sensing. Each unit will include more than one exercise or assignments. The final assignment of the last unit will require you to utilize all the skills and know how that you gained throughout the semester in reverse order.

I. Online Publishing

In this first unit of the course it is required to start a personal web site or you may call it a portfolio which will be coded using HTML/CSS from scratch publish it online at lab accounts

The content of the site will be developed over the semester but as a start it should contain some basic info like a biography, about page, external links etc. Also a logo type or a personal logo mark can be used.

Format is online presentation of series of HTML pages.

Week 1
Internet protocols
Separation of form and content in design production Markup languages and HTML/CSS framework
In class tutorials for coding HTML/CSS
Start building and styling the site
Test it online

Week 2
Put together content for the website Work in class
Troubleshooting and critique one-on-one Introduction to Javascript

Week 3
Screen based data driven graphics Introduction to d3.js

Week 4
Final deployment / Presentation / Critique Revision (lab hours) + Final submission for


CSS Almanac

II. Motion Graphics

In this unit students will be introduced basic concepts of motion focusing on keyframe animation. They will explore ways of integrating motion in screen design using the notion of keyframe in coding CSS or keyframe editing software.

Week 5
Introduction to keyframe animation
Designing Motion with CSS
Designing Motion with keyframe operators like Edge Animate CC or After Effects

Week 6
In class exercise for keyframe animations

III. Algorithmic Design

This third unit of focuses on parametric visual aesthetics, algorithmic design and data visualization. In the beginning of this unit various basic design principles will be explored in the generative context. Students will become acquainted with new possibilities in the design process by generating color palettes, geometrical structures and interdependent aesthetic frameworks. Motion and animation are also be subject to same parametric frameworks and students will be introduced to object oriented programming.

In the second phase of this unit, fundamental graphic coding techniques will be used handle and visualize these data sets. For example recorded temperature of a single location is variable in relation to time or the same data is variable in regard to location at a fixed time. Students are free to use any given data set of their interest and furthermore they will be encouraged to create their own.

Exercises can also be presented in printed formats that gives a chance to present data in a high resolution medium. The online interactive format will allow to present an interactive artifact. For the second exercise you will be given a set of data. The change in value of one variable can be with respect to time, space or any condition that you may think of.

For the interactive part of this unit you are asked to design an organism that lives on the screen. Either Processing, d3.js or Paper.Js might be used for the drawing and programming of this interactive artifact.

Week 6
fundamentals of parametric aesthetics and graphic programming art historical examples
in-class exercise on generative pattern design

Week 7
parametric motion and animation
object oriented programming
animation and interaction
in-class exercise on algorithmic motion and interaction

Week 8
working with data
in-class exercise on data visualization finding and cleaning the data set review of ideas and sketches

Week 9
redesign the same data set in an interactive fashion

Week 10
Final print or deployment and presentation in class followed by the critique session


IV. Physical Interaction with Digital Interfaces

Final unit of this course is about physical interaction with digital interfaces and I/O prototyping.

Week 11
basic electric physics and circuit design introduction of input types and sensors introduction of the programming environment

Week 12
in-class exercise on experimental electronic instrument design – circuit bending sensor testings
review of ideas and sketches
do something fun like an instrument or a lighting system

Week 13
come up with idea for environmental research bring together a circuit for this purpose

Week 14
show and tell your physical interface or interactive object

Books and Readings

Extracts from ‘The Language of New Media’ by Lev Manovich
read for annotation

HTML5 Graphics with SVG & CSS3 by Kurt Cagle

Extracts from Digital Mantras: The Language of Abstract and Virtual Worlds by Steven R. Holtzman

Visualizing Data: Exploring and Explaining Data with the Processing Environment by Ben Fry

Processing: A Programming Handbook for Visual Designers and Artists by Casey Reas, Ben Fry

Processing: Creative Coding and Computational Art by Ira Greenberg

The Visual Display of Quantitative Information by Edward R. Tufte

Getting Started with Processing by Casey Reas, Ben Fry

Else/Where: Mapping — New Cartographies of Networks and Territories by Janet Abrams and Peter Hall

Extracts from Multimedia: From Wagner to Virtual Reality, Expanded Edition by Ken Jordan, Randall Packer
read for annotation

Extracts from Virtual Art: From Illusion to Immersion by Oliver Grau
read for annotation

Extracts from Modalities of Interactivity and Virtuality by Jeffrey Shaw
read for annotation

Getting Started with Arduino (Make: Projects) by Massimo Bans

Arduino Cookbook by Michael Margolis

Programming Interactivity: A Designer’s Guide to Processing, Arduino, and Openframeworks by Joshua Noble