Rutgers Design 2B: Experimental Computation: Section 1

<p>hello world</p>
Spring 2019 Rutgers, Mason Gross School of the Arts CSB 224 (Computer Lab)

Section 1: Mondays 10:00am–4:10pm
Instructor: Jacob Rivkin


This introductory interaction design course focuses on experimenting with possibilities generated from a wide range of digital media. Students will become familiar with these new technologies through hands-on, process-based exploration. Additionally, students will develop the skills needed to spearhead their own research, developing a process and methodology unique to themselves. The course aims to humanize technology, making it accessible and usable by everyone, as well as to push students to think for themselves.

These various digital media will be situated culturally and historically. While learning new technologies is important for any career, it is equally important to understand the basic implications and intentions surrounding them. How do the tools and platforms we work with shape the things we create? Additionally, how does the narrative change when your client is yourself?

Eventually, students will understand how these new skills and ways of thinking can become instrumental components to their individual art and design practices. Likewise, they will learn to interpret and learn from existing practices in the field.

The course is broken into three units: online publishing (web markup and programming languages HTML, CSS, and JavaScript), algorithmic design (Processing, p5.js, or paper.js), and physical computing (Arduino, circuit design, sensors). Workshops and in-class exercises will include learning markup languages HTML and CSS to make websites, drawing with code, programming to create generative patterns and animations, programming with variable data sources and APIs, and physical computing and sensors.

Throughout the semester, students will complete readings and write short responses in addition to discussing them in class. During each unit, students will learn skills through smaller, in-class exercises. By the end of each unit, they will have designed and produced a larger project within given constraints.
The aim of this course is not to teach any one particular software or programming language, but instead to familiarize students with a variety nonlinear visual platforms and the cultures surrounding them.

All Mason Gross students have access to art.rutgers servers and have their personal domains under the URL:<username> Students are responsible for building a website on this URL to present the work (both exercises and projects) done for the class and publish written responses. In the first couple weeks, basic HTML and CSS coding will be taught through in-class workshops, allowing students the ability to create this portfolio website.

Learning Objectives

In this class, you will learn to:

  • Use code and technology as a medium for art and experimentation
  • Reflect on your own process and influences
  • Use your own experiences to inform the work you create
  • Learn an introduction to design principles online
  • Understand the internet in relation to art history, and the past

And be aware of:

  • what inspires you, what you’re interested in, what you like looking at
  • that everything has a precedent, and everything exists in relation to each other
  • how design and programming tools overlap and can be used in sync
  • how the process can be more important than the end product
  • an ability to use the browser as a canvas for experimentation and self expression

Tutorial Resources

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. All the platforms 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.
Lynda HTML 5 Basics
Lynda CSS Training 1, Lynda CSS Training 2, Lynda CSS Training 3
Lynda and Arduino
P5.js and Processing Tutorials

Tools & Materials

Most of the hardware and software we will use in class will be available in the classroom. On the other hand, if you have access to a computer at home, I strongly recommend that you equip it with relevant software for practice and completion of assignments. Here is a list of software we are planning to use during the semester. All of these are free and open source (except the Adobe Suite, which will be used provisionally).

  • A web browser, like Chrome
  • A code text editor, like Brackets(installed at school), Atom, or Sublime Text
  • An FTP program, like Cyberduck
  • We will also use some DIY electronic boards and sensors for the final project. Basic parts 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 sites for retailers and a buying guide.

Lateness & Absences

Three arrivals of more than 10 minutes late will count as one absence. After three 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 class website and contacting the instructor via email.

Code of Intention

This is a safe, respectful, positive, anti-harassment environment. We will practice:

  • Active listening
  • Not interrupting
  • Creating space for others to speak
  • Being comfortable with awkward silences
  • Being comfortable taking risks with your work and in expressing unconventional ideas Asking questions unabashedly
  • Learning outcomes
  • A successful student of this course should be able to:
  • publish text, images, animations online on web pages
  • code generative patterns, animation and interaction
  • publish information driven by variable online data or from a database experiment and prototype physical interfaces


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, all your work you produced throughout the semester should be published online. Since the third project is physical, it may require you to create a video that explains the interface that you designed. In addition, 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:60% — an average of all projects, eliminating the least successful one 15% — final presentation performance and overall portfolio25% — coursework, attendance, 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 one make-up chance during the semester. With exception to the final presentation (as there is no more time left), each make-up chance is one week long. Please keep in mind that the make-up is only for solving 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. Each unit includes multiple exercises and at least one project. The final project 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

Weeks 1–5
In this first unit of the course, students are required to create a personal website (or “portfolio”) which will be coded using HTML and CSS from scratch, published online at lab accounts. Each student’s URL will be in the format: content of the site will be developed over the semester, but to begin, it should contain some basic information like a biography, about page, external links etc. Also a logo type or a personal logo mark can be used.
This unit will cover:

  • internet protocols
  • hypertext
  • markup languages and HTML/CSS framework the CSS Box Model
  • building portfolio website introduction to JavaScript through p5.js
  • screen based data driven graphics introduction to keyframe animation designing in motion with CSS


II. Algorithmic Design

Weeks 6–10
This second unit focuses on creative visual coding, algorithmic design, and data visualization. In the beginning of this unit, generative design principles will be explored alongside introductory programming fundamentals. Students will become acquainted with new possibilities in the design process by generating geometric structures, motion, animation, and interaction.
This unit will cover:

  • art historical examples of procedural drawing
  • fundamentals of parametric aesthetics and graphic coding generative pattern design
  • working with data and visualization
  • information design
  • print libraries in processing
  • parametric motion and animation
  • object oriented programming
  • animation and interaction
  • algorithmic motion and interaction
  • interactive data visualization finding and cleaning the dataset

Processing Resources

P5 Resources
First Steps with p5 Notes – by Allison Parrish
Intro to p5.js YouTube playlist
Getting Started with p5.js code
Introduction to Data and APIs in JavaScript – p5.js Tutorial

Web editor for p5.js

III. Physical Computing

Weeks 11–14
The final unit of this course is about physical interaction with digital interfaces and I/O prototyping. Students will be introduced to various different methods to design and create inputs for 2D digital interactive systems on screen.This unit will cover:introduction to various input systemsimage recognitionbasic electric physics and circuit designsensors and I/O boardsexperimental electronic instrument design – circuit bending sensor instruments and lighting systems


Suggested Readings

The following articles and books may be referenced throughout the course:
Farkuk Ates, “A Brief History of Women in Computing,” 2017
Charles Broskoski and Laurel Schwulst, “Charles Broskoski on self-discovery that happens upon revisiting things you’ve accumulated over time,” The Creative Independent, 2017
John Seely Brown and Mark Weiser, “The Coming Age of Calm Technology,” 1996
Paul Ford, “Reboot the World” The New Republic, 2016
Jill Lepore, “Can the Internet be Archived?” The New Yorker, 2015
Olia Lialina, “OFFLINE ART: new2 Opening Speech,” 2013
Olia Lialina, “Prof Dr Style,” 2010
Giorgia Lupi and Stefanie Posavec, Dear Data, 2016
Lev Manovich, The Language of New Media, 2001
Don Norman, The Design of Everyday Things, 2002 — Chapter 1
Hito Steyerl, “Too Much World: Is the Internet Dead?,” 2013
Paul Soulellis, “Library of the Printed Web,” 2013
Edward R. Tufte, The Visual Display of Quantitative Information, 1983
Artie Vierkant, The Image Object Post Internet, 2010 2.
Rafael Lozano-Hemmer, Best Practices for Conservation of Media Art from an Artist’s Perspective,September 28, 2015
Abigail Susik, Art with a Life of its Own: Questioning Mimesis in Media Art Prototypes, 2015

Words & Phrases

HTML, CSS, JavaScript, jQuery, p5.js, d3.js, paper.js, Arduino, Processing, API, data, design, maker culture, programming, computers, exploration, typography, web development, internet, internet art, history of the internet, art history, interactive art, experimental, technology, algorithms, object oriented, sensors, instruments, web publishing, p2p, blockchain, exploration, contemporary moment, skills, humans, society, technopolitics, networked media, cultural discourse, inclusivity, collaboration, play, variable fonts, parametric fonts, unsemantic web, responsive design, at media queries, generative adversarial networks, artificial intelligence, machine learning, all sorts of JS libraries and frameworks,  p5.js, paper.js, processing, data visualization, d3.js, procedural drawing, UI, UX, web design, google fonts, typekit, app design, native iOS,, skeuomorphism, flat design, i/o prototyping, remote sensing, open frameworks, unity, python, live streaming, skill sharing, desktop streaming