Theory and Programing of Interactive Media I

Teachers College, Columbia University


Duration: 09/04/19 – 12/20/19

Dates: Thursdays 4-7pm

Location: GDH 369

Instructor: Zhenzhen Qi,

Teaching Assistant: Lizhen Zhu,

Feel free to approach us before/after class or through slack and email any time. 


Theory and Programming of Interactive Media I is the introductory course of a two course sequence (Theory and Programming of Interactive Media II). This course satisfies part or all of the programming requirements for several tracks within CMLTD. By the end of this course, students will be able to design and develop basic multimedia and interactive web-based applications backed by a rationale rooted in learning and media theories. 

No prior knowledge of computer programming is necessary although it is highly advisable for students to be competent with the basics of computer systems (e.g. navigating file structures, working with different operating systems, etc.)

The primary language that we will use for the programming aspect of the course is JavaScript in conjunction with HTML/CSS. Note that this class is NOT a Flash programming language class as formerly known.

This course is concerned with three areas of software development:

  1. Understanding and utilizing concepts of computational thinking and programming theory
  2. Apply said thinking to design and build interactive learning experiences
  3. Web Development through hands-on assignments and projects



A curated list of media theories will be selected from the following Publications:

Manovich, L. (2001). The language of new media. Cambridge, Mass: MIT Press.  (Access book from here)


A curated list of content will be selected from the following learning platforms:

Mozilla Developer Network – Official, detailed, ‘orthodox’ document for web development

W3schools – Unofficial but concise and beginner-friendly documents with tutorials

Lynda (Free step-by-step video tutorial resources for TC Students)

Additional Learning Resources

CSS frameworks: 

CSS-Tricks – Fantastic css knowledge and tricks




Semantic UI:



JS frameworks: 

Codepen & jsbin: playground for interesting html, css, javascript experiments

Importing 3D Model in Web: 

Data Viz JS framework:

Lightweight JS framework for SVG file manipulation: SVG.JS:

JS framework for vector graphics: Paper.js:

Backend Blogging Database: 

Web Game frameworks: 

Twine, an open-source tool for telling interactive, nonlinear stories. You don’t need to write any code to create a simple story with Twine, but you can extend your stories with variables, conditional logic, images, CSS, and JavaScript when you’re ready.

P5.js and – accessible interactive web coding framework for artists, educators, and beginners

Unity, game develop environment. Can export project into web-embed JS Canvas. 


Final grades will be calculated based on the following formula:

  • Participation, attendance, contribution to class environment 20%
  • Weekly Assignment 30%
  • Blog Reflection 20%
  • Final Project, Presentation and Documentation 30%


Participation in class is required. Irregular attendance not only hurts a student’s coursework, but it weakens the class as a whole and is not permitted. Since this course has frequent in-class coding exercise, missing class will also affect your progress in the course. Attendance is recorded prior to every lecture, and students with excessive absences will be officially dropped from the course in accordance with College rules. Arriving late interferes with other students’ learning and is not acceptable. Repeated Late attendance will be counted absent. All cellphones and other electronic devices are encouraged for the purpose of looking up references and note taking during lecture. From time to time, you will also be asked to go on the computer to experience certain web based interactive artwork as well. 

Course Synopsis(Subject to change due to class progress/feedback)

19/6/2018Course Overview. Editor Setup.Review Course Syllabus. Technical Setup
29/13/2018HTML Overview. Github SetupFormatting a resume with html tags
39/20/2018CSS OverviewAdd CSS Styling for resume
49/27/2018BootstrapProject One: Responsive Web Resume
510/4/2018JS Overview. Variables. Functions.Set up static elements for clock
610/11/2018Dom elements manipulationAnimate Clock with CSS+JS
710/18/2018Events HandlingJS Carousel Effect, Part One
810/25/2018JS ObjectsJS Carousel Effect, Part Two

11/1/2018CanceledDraft final project proposal and prototyping.
911/8/2018Data Handling and Web APIMake a simple todo list on your website/app/game
1011/15/2018Canvas. Shader. Create a canvas element that is textured with your custom shader. 

11/22/2018Canceled Due to ThanksgivingProject two prototyping
1111/29/2018Final Project Workshop OneFinal project prototyping
1212/6/2018Final Project Workshop TwoFinal project prototyping
1312/13/2018Final Project Workshop ThreeFinal project prototyping
1412/20/2018Final Project CritiqueFinal Project

Previous Final Project Documentation

1. Liyan: 

2. Guanzhi: 

3. Summer: 

4. Andrew Gimb

5.Yiting Liu



6. Yang Li



7. Ru Xu



8. Lizhen Zhu

Github: (blog is also in the GitHub)

Live View:

9. Can Zhang



10. YaTing Yang



11.Hui Pan



12. Juin: 

Final Blog:

Final URL:  

13. Jiayi Wang


Final URL:

14. Xiaoxue Chen




15. Qianlin LI



16. Yue Mu



17. Ryan Cheng: 



18. Shichao Wang




19. Qin Ye



  1. Glitch Art:
  2. Art Education Manifesto:;

Weekly Notes

Week 1


The Language of Interactive Media

hypertext fiction

Interactive Haiku Every day the same dream


The Museum of Stolen Art

Collaborative Storytelling

Olafur Elasson  

The Moon (Website)    The Moon (documentation) 

The Sheep Market   

The Wilderness Downtown 

Video Collage



Museum of feelings 

Internet of Things

Tools for social interaction 


Dead Drops 


Slow Hot Computer  Slow Hot Computer (Documentation)

Web Venus 


RMB City   VR Chat 


Lauren  Stephanie Dinkins 


Download Atom

Set up Github account. Download Github Desktop app. 

Set up Lynda account. Set up Slack. Go over syllabus and bring questions.

Week 2


The Music and Arts Library (7th floor Dodge Hall) is hosting a series of free Music and Technology Workshops beginning on Friday.—summer-2018.html

Media Artist Rosalie Yu’s 3d scanning inspired participatory art project sponsored by EdLab

Art Game exhibition – No Love Lost


Atom plugin installation

packages=> setting view==>install

  • Atom live server (local hosting)
  • Emmet (html tab shortcut)
  • Beautify (automatic code indentation) 

Atom emmet bug fix: 

If typing ! and press TAB button doesn’t bring up default html code example, try Google “emmet tab not working in atom”


File management with Atoms

  1. Got to Document folder
  2. Make new folder called MSTU5003
  3. Inside MSTU5003, make new folder Week2
  4. Open Atom==>File==>Add project folder==>Select the week2 folder you just created
  5. File==>New File
  6. Type in “hello world” for now
  7. Hit Command+S, and name your file index.html


  1. Format your resume into a simple, one-page website with html + css.
  2. Bring your code to class next week
  3. Mistake, broken and messiness are completely ok. Try out different options and have fun. 

Helpful resources:

Atom beautify plugin to help with automatic code indentation: 

Generating color theme:

Typography design fundamentals: Lynda typography lesson 

Getting rgb color code of digital files: Spotlight ⇒ Digital Color Meter 

Text tutorial for html:

Text tutorial for css:

Video tutorial for html: Lynda html essential training

Video tutorial for css: Lynda css essential training part 1 

Quick html reference: 

Quick css reference:



Elements of simple and well-designed websites:

In Class Lab:

Github App file management

  1. Open Github Desktop app installed from previous step on your computer, sign into the account you just created on
  2. Click button on the left called “create new repository”
  3. Type in the EXACT SAME folder name into Name input field, and click “Choose…” button to choose a local Path up until the parent directory of your project folder path. 

For example: to host a project under /Users/Zhenzhen/Documents/webResume, the following selections should be made

  1. Click “Create Repository” button
  2. Click “history” tab to verify that all your files have been committed, and a new file called .gitattributes is also automatically added
  3. Click “Publish repository” button on top right, and make sure the above option is unchecked.  
  4. Press “Publish Repository” button(blue). 
  5. Go to your github online account to verify that repository has been successfully created, and all files uploaded into the repository.
  6. When at a major development milestone, go back to github app, type in commit code, and press “commit to master”, and press “push origin” button to push new code to github
  7. To publish your project to the world wide web, got to online github account repository, click “settings” tab on to right, scroll down to “Github Pages” section, select “master branch” from the dropdown menu, and click “save”. A web url will now appear, telling you where your project is hosted on the internet. 

CSS Summary: 

  1. Ways of writing CSS style:  (MDN Link
  2. CSS box model: margin, padding, border  (MDN Link)
  3. CSS Position (static(the default), absolute, relative, fixed)  (MDN Link
  4. Flex Layout (MDN Link)
  5. CSS selector:  (MDN Link)
  6. CSS pseduo classes:
  7. CSS pseduo element:
  8. CSS Animation and Transition: (W3schools Link)
  9. CSS responsive design:
    1. Max-width
    2. Media query:


Implement simple css based responsive design to your current website. 

Play with css animation and transition effect. 

Week 4


Project Critique:

Generative Art: Casey Reas, Raven Kwok, Axis Gan, Shizheng, Ololade Adeniyi 

NetArt: exonemo, aaaajiao 

Performing Art: Jacolby Satterwhite 

Glitch Art: Rosa Menkman 

Interaction Art and Design: Zach Libberman, 

Simulation Art: Ian Cheng, John Gerrard, Theo Trantafyllidis, Stephanie Dinkins

3D Animation: David O’reilly, Sondra Perry 

3D Scanning: Ziv Schneider, Rosalie Yu  

Bio Art:  Heather Dewy-Haborg, Zach Blaz 

Robotics: Bill Vorn 

Gif Art: Carla Gannis, Lorna Mills

AI Art: Lauren McCarthy

Games: Anna Anthropy and Dys4iaNathalie Lawhead and Everything is Going To Be Ok, Giant SparrowThat Game Company, Bandai Namco

Using Github in Linux Environment

  1. Go to spotlight, type “terminal”
  2. Type “pwd” to check current directory 
  3. cd Documents/MSTU/Week2
  4. Go to your github website and create a new repository
  5. github command line
    1. Git add
    2. Git commit 
    3. Git push
    4. Git clone 

Linux install for windows user

Download GitBash at

InClass Lab

Responsive design with Bootstrap

Helpful Resources

Official bootstrap getting started guide:

Precompiled source code(look up exactly how each bootstrap class is defined in css files): 

List of all bootstrap components:

Video tutorials:


  1. Ask a question on Slack.
  2. Provide an answer either for your own question or someone else’s. 
  3. Finish and publicize project one onto github: responsive resume/portfolio
  4. Write a blog post with 350 words, documenting the following aspects of your project: 


Concisely introduce the overall objective of your project in three sentences, specify the following: 

  • Personal Intention
  • Design Purpose
  • Intended Audience

Design Inspiration:

Include some reference here – concept maps, images, sound, gifs, websites, your favorite novelists or movies or comic books, etc. 

Technical Execution:

What experiments have you tried so far? What did you like and not like about them? How did you appropriate an imagination/inspiration with concrete design and technical execution? How did you teach yourself something you didn’t know how to do before? When you find out a mistake/something you want to do differently, how do you go about making changes/corrections? What are some resources you found helpful? How did you find them? What are the next steps you might want to take to further develop your project? How do you go about teaching yourself to realize it? Include screencaps of what you have done so far in this section, and list out a few more steps for future development if you have more time beyond the deadline. 

Please provide link to your github repository at the end of your Technical Execution section. 

Week 5

Project One critique: 

Hui Pan:    




Andrew Gimb: 

Can Zhang:



Lizhen Zhu


Qin Ye:


Yue Mu:

Ryan Cheng:


Shichao Wang:




Guanzhi Li:

Xiaohan Zhao

Qianlin Li:

Juin Zhou



Final Blog: 

Final URL: 

Media art and theory presentation:

3D scanning and photogrammetry by Qianlin

VR arist Amelia Winger-Bearskin( by Qin 

Intro of JS programming fundamentals: 


Variables by data types:





Array Methods: 


Introduction of DOM standard: 

Use JS to access Dom events: 

Use JS to access Dom elements:

Play with the demos below and try to identify JS programming concepts used for each example: 

1.(Variable, Function, Dom events, Query Selector)

2.(Variable, Array, Conditions, Dom Events, Query Selector)

InClass Lab:

Consult with the following link, implement an alert and button interaction on your website:


Leave two comments for two of your classmates. Mention what you liked about his/her site, and offer some constructive critique as well. 


Finish online quiz: 

Helpful resources:

W3schools JS tutorial:

MDN JS tutorial:

Youtube tutorial: 

Week 6 – JS fundamental and Dom API Basics

Target elements in the DOM with queryselector method: 

Query Selector:

Query Selector All:

In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE, or any other HTML element. A list of properties for all HTML elements:

Important DOM element properties: 

Access and change innerHTML: 

Access and change class: 

Access and change attributes: 

Create and add new DOM elements:

Add inline CSS to DOM elements: here  

Add event listener to Dom element: 

System function: SetInterval, a great way to call functions without depending on event listener

inClass Lab 1: number guessing game setup file, (check out finished version here

inClass Lab 2: silly story generator set up file, raw text file (check out finished version here


  1. Quickly skim through the following tutorials(revisit old JS knowledge within new context): 
    1. JS trouble sooting
    2. Storing data with variables
    3. Numbers anhd Operators
    4. Comparison Operators 
    5. Strings 
    6. Arrays  
  2. Exercise: animated clock 
    1. You are welcome to complete it on your own or as a study group. 
    2. You are also encouraged to reinvent your own versions that may look completely different from a regular analogue clock – a weird random crazy clock, or even completely different JS animation effect you want to try that has very little to do with a clock. Maybe scroll down your website and have all elements fly around? Explore and have fun. 
    3. Suggested answer is Here. Please do not look at it until you’ve given it a good try. 

Week 7  – JS fundamental and Dom API Advanced


  1. Final project proposal
  2. Presentation: interactive installation

Add event listeners to a dom object – Two equivalent ways:

  1. addEventListener: 
  2. onClick:

List of DOM event handler:

Pass arguments through event listeners: 

Create and add new DOM elements:

inClass Lab 1: debugger intro

  1. Open the exercise file here 
  2. Right click on page and open inspector
  3. Find the custom js file link at the end of <body>, right click and choose “review in source panel” 
  1. Try to put in some input the test the outcome on the page. What’s wrong? 
  2. Click line 32 to add a breakpoint. 
  3. Test with two numbers and watch what happens inside the debugger. Very exactly which lines of code are erroneous. 
  1. Try to google the right JS question and fix code. 
  2. Temporarily disable the debugger and run your code again to verify.

inClass Lab 2: Simple Lightbox(Interactive Image Gallery)

  1. Download setup files from here
  2. heck out the finished project here

inClass Lab 3: Carousel Gallery Part One

  1. Download setup files from here(please delete main.js for now)


  1. Review the following debugger resource: 
    1. Debugger intro: 
    2. (optional)Debugger syntax in code: 
    3. (optional)Debugger breakpoint reference:
  1. Quickly review the following tutorials: 
    1. Making decisions in your code — conditionals
    2. Function return values
    3. Introduction to events 
    4. Introduction to JS objects 
    5. JS object basics 
    6. Looping code
    7. Functions — reusable blocks of code
    8. Build your own function
    9. OOP for JS beginners
  2. Selectively complete FreeCodeCamp tutorial. 
    2. Javascript Algorithms And Data Structures Certification (300 hours)
    3. Don’t go beyond lesson Delete Properties from a JavaScript Object 

Week 8 – JS Fundamentals

Debugging Lab: 

  1. Debugging CS.

Inspect element⇒ hover to element⇒ right click ⇒ copy ⇒ copy selector

2. Debugging JS.

Example: Html event(object) vs. html element

inClass Lab 1: Simple Lightbox (interactive button) 

  1. Download setup files from here 
  2. check out the finished effect here 

inClass Lab 2: My Carousel and background animation effects.  

Download HTML and CSS setup files. 

Check out the finished effects HERE

Homework(depending on your own learning style, you may skip either reading or interactive portion of the tutorial assignment. If you have previewed JS tutorial in summer, feel free to skip all of them and dive into your own JS project right away). 

1.Quickly review the following learning points we have covered/will practice soon: 

2. Interactive Coding Exercise: 

  • FreeCodeCamp⇒ Javascript Algorithms And Data Structures Certification⇒ Debugging
  • FreeCodeCamp⇒ Javascript Algorithms And Data Structures Certification⇒ Basic Data Structures

3. Coding Project: Select at least one of the following two options:

  1. [commercial portfolio page] Integrate and customize three(or more) JS elements of your choice into your portfolio site(your project one). 

Helpful resources:

  1. [web app] Create your own interactive animation/game/data viz/app: 

Helpful resources: 

For this option, you can draw your own creative assets in photoshop/illustrator if you want. But creating your own assets take a lot of time. To begin with, you can also copy and paste one of the following html/css animation and add your own JS to it, or google “CodePen, css animation” and find an animation you’d like to work with. Helpful resources listed from option 1 may also be of help for you here. 

Week 9 [No Class] – Preparing towards final project

Step One: 

Skim through the final project brainstorming session information below

Commercial Portfolio: 

professional examples:

Past student examples:

Helpful Resources:n/rY

Google the following topics and check out code snippets from jsfiddle/stackoverflow: plain vanilla js for carousel, dropdown menu, modal, scroll related behavior, responsive design.

Data Viz:

Professional examples:

Past student examples: 

Helpful resources:

Web Game:

Professional examples:

Past student examples: 

Helpful resources:


AI & 3D scene in web context 


Helpful resources:

Step two: 

Start a new online blog and fill in a few sentences for each of the four sections. 


In a few sentences, concisely describe what this project is about. 


Why is making such a project important to you? Be personal and honest to yourself. Include some visual reference here – concept maps, images, sound, gifs, websites, your favorite novelists or movies or comic books, etc. 

Design and Technical reference:

Websites, tutorials you intend to follow and incorporate into your own project. 


What experiments have you tried so far? What did you like and not like about them? How did you appropriate an imagination/inspiration with concrete shapes and forms? How did you teach yourself something you didn’t know before? What are the next steps you might want to take to further develop your project? Include screencaps of what you have done so far in this section, and list out a few more steps for further action. 

As a creative technologist/interaction designer/educational technologist/ web developer, I am interested in explore/research/investigate_________________. I became interested in this topic when___________________. I would like my audience (students) to interact with this piece by________________. I would like them to feel__________________. Technically, I think these are the steps needed to test my concept: __________________. I have researched into a few similar projects, such as _________________(provide visual references). I think in the next few weeks, I would like to use the class time to find out how to________________. Visually, I would like my piece to look like ________________(provide visual references). 

Feel free to alter any of the above format to help you find your voice, identity and creative process. The main objective is to use this writing space to establish a process where you can use repeatedly to bring together artistic and technical inspiration, for the purpose of appropriating your own authentic voice with tangible shapes and forms. 

Step Three(free free to expand on last week’s homework):

  • Start a simple code snippet to demo a single functionality of your final project idea. 
  • Slack PM me your blog link and github link for final project prototyping by Thursday, Nov 1st, before class. 
  • I will PM back feedback and suggestions. 

Week 10 – JS Object intro part II: Canvas based interactivity

inClass Lab One:

inClass Lab Two:


  1. Look at inClass Lab One, put in line by line logic.
  2. Look at the final effect in inClass Lab Two. Based on inClass lab one, recreate inClass Lab Two on your own. Try to not look at the final js I published unless really necessary. 
  3. If you like working with JS Canvas, continue to expand on inClass Lab two and make it into your own game/app. 
  4. If you don’t enjoy JS Canvas, continue to follow your original direction for final project and keep expanding on your own prototype. 

Week 11 – Data Manipulation

Final project brainstorming

inClass Lab: setup files here 


  1. Add an additional button. 
  2. Create an additional function so that it
  • Changes all todo objects in data as done:true
  • Updates the visual display of the todo items in the todo app
  • Call this function in the appropriate place(s) somewhere else in this code
  1. Refer to the inClass exercise above, add a message board/toDo list on your portfolio project(project 1) so that it allows live user input to be reflected on your website. Additional references:
    1. [todo list]
    2. [styling chat mesages]
    3. [closable list items] 
  2. [optional] review google map API tutorials. Learn how to manipulate object properties offered by this API to embed a custom google map on your website. Suggested tutorials below: 
    1. [text reference]
  3. Keep developing your final project prototype
  4. Happy Thanksgiving Everyone : ) 

Week 12 ~ 14 – Guided Project Development Studio

Academic Integrity 

Students who intentionally submit work either not their own or without clear attribution to the original source, fabricate data or other information, engage in cheating, or misrepresentation of academic records may be subject to charges. Sanctions may include dismissal from the college for violation of the TC principles of academic and professional integrity fundamental to the purpose of the College. – From TC Student Misconduct Policy 

Written Work 

Specifically all writing assignments must follow APA style for citations, including any code examples, technical diagrams, etc. If it is determined that you have plagiarized any portion of a writing assignment, including and especially your portfolio, you will receive an F for the assignment, and other possible charges may result as outlined above. 

Source Code 

No portion of your homework should be copied from another student, book, or electronic resource. You are expected, though, to consult with your peers, reference materials, and instructors while working on your coding assignments. Programming is seldom a solo activity and it is often best done in the company of others. If you choose to use existing, third party code in your assignment, it should be including according to the licensing guidelines if it is open source, and should be noted in a comment if it is in the public domain. If it is determined that you copied code directly into your program and represent it as your own creation, you will receive an F for the assignment.