Theory and Programing of Interactive Media I
Teachers College, Columbia University
Table of Contents
Duration: 09/04/19 – 12/20/19
Dates: Thursdays 4-7pm
Location: GDH 369
Instructor: Zhenzhen Qi, email@example.com
Teaching Assistant: Lizhen Zhu, firstname.lastname@example.org
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.)
This course is concerned with three areas of software development:
- Understanding and utilizing concepts of computational thinking and programming theory
- Apply said thinking to design and build interactive learning experiences
- 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-Tricks – Fantastic css knowledge and tricks
Semantic UI: https://semantic-ui.com/
Importing 3D Model in Web: http://threejs.org/
Data Viz JS framework: https://d3js.org/
Lightweight JS framework for SVG file manipulation: SVG.JS: http://svgjs.com/
JS framework for vector graphics: Paper.js: http://paperjs.org/
Backend Blogging Database: http://jekyllrb.com/
Web Game frameworks:
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)
|1||9/6/2018||Course Overview. Editor Setup.||Review Course Syllabus. Technical Setup|
|2||9/13/2018||HTML Overview. Github Setup||Formatting a resume with html tags|
|3||9/20/2018||CSS Overview||Add CSS Styling for resume|
|4||9/27/2018||Bootstrap||Project One: Responsive Web Resume|
|5||10/4/2018||JS Overview. Variables. Functions.||Set up static elements for clock|
|6||10/11/2018||Dom elements manipulation||Animate Clock with CSS+JS|
|7||10/18/2018||Events Handling||JS Carousel Effect, Part One|
|8||10/25/2018||JS Objects||JS Carousel Effect, Part Two|
|11/1/2018||Canceled||Draft final project proposal and prototyping.|
|9||11/8/2018||Data Handling and Web API||Make a simple todo list on your website/app/game|
|10||11/15/2018||Canvas. Shader.||Create a canvas element that is textured with your custom shader.|
|11/22/2018||Canceled Due to Thanksgiving||Project two prototyping|
|11||11/29/2018||Final Project Workshop One||Final project prototyping|
|12||12/6/2018||Final Project Workshop Two||Final project prototyping|
|13||12/13/2018||Final Project Workshop Three||Final project prototyping|
|14||12/20/2018||Final Project Critique||Final Project|
Previous Final Project Documentation
3. Summer: https://github.com/xz2758/Final
4. Andrew Gimb
6. Yang Li
7. Ru Xu
8. Lizhen Zhu
Github:https://github.com/Lizhen-ZHU/final (blog is also in the GitHub)
9. Can Zhang
10. YaTing Yang
Final URL: https://jwztccu.github.io/Final/
13. Jiayi Wang
Final URL: www.jiayiwang.co
14. Xiaoxue Chen
15. Qianlin LI
16. Yue Mu
17. Ryan Cheng:
18. Shichao Wang
19. Qin Ye
- Glitch Art:
- Art Education Manifesto: https://github.com/yeqin/Final-Manifesto-Recipe; https://yeqin.github.io/Final-Manifesto-Recipe/
The Language of Interactive Media
Internet of Things
Set up Lynda account. Set up Slack. Go over syllabus and bring questions.
The Music and Arts Library (7th floor Dodge Hall) is hosting a series of free Music and Technology Workshops beginning on Friday.
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
- Got to Document folder
- Make new folder called MSTU5003
- Inside MSTU5003, make new folder Week2
- Open Atom==>File==>Add project folder==>Select the week2 folder you just created
- File==>New File
- Type in “hello world” for now
- Hit Command+S, and name your file index.html
- Format your resume into a simple, one-page website with html + css.
- Bring your code to class next week
- Mistake, broken and messiness are completely ok. Try out different options and have fun.
Atom beautify plugin to help with automatic code indentation: https://atom.io/packages/atom-beautify
Generating color theme: https://color.adobe.com/create/color-wheel/
Typography design fundamentals: Lynda typography lesson
Getting rgb color code of digital files: Spotlight ⇒ Digital Color Meter
Text tutorial for html: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML
Text tutorial for css: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS
Video tutorial for html: Lynda html essential training
Video tutorial for css: Lynda css essential training part 1
Quick html reference: https://www.w3schools.com/html/
Quick css reference: https://www.w3schools.com/css/
Elements of simple and well-designed websites:
In Class Lab:
Github App file management
- Open Github Desktop app installed from previous step on your computer, sign into the account you just created on github.com
- Click button on the left called “create new repository”
- 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
- Click “Create Repository” button
- Click “history” tab to verify that all your files have been committed, and a new file called .gitattributes is also automatically added
- Click “Publish repository” button on top right, and make sure the above option is unchecked.
- Press “Publish Repository” button(blue).
- Go to your github online account to verify that repository has been successfully created, and all files uploaded into the repository.
- 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
- 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.
- Ways of writing CSS style: （MDN Link）
- CSS box model: margin, padding, border (MDN Link)
- CSS Position (static(the default), absolute, relative, fixed) (MDN Link)
- Flex Layout (MDN Link)
- CSS selector: (MDN Link)
- CSS pseduo classes: https://www.w3schools.com/css/css_pseudo_classes.asp
- CSS pseduo element: https://www.w3schools.com/css/css_pseudo_elements.asp
- CSS Animation and Transition: (W3schools Link)
- CSS responsive design:
- Media query: https://www.w3schools.com/css/css3_mediaqueries.asp
Implement simple css based responsive design to your current website.
Play with css animation and transition effect.
Performing Art: Jacolby Satterwhite
Glitch Art: Rosa Menkman
Robotics: Bill Vorn
- Web Game: Mollenindustria
AI Art: Lauren McCarthy
Using Github in Linux Environment
- Go to spotlight, type “terminal”
- Type “pwd” to check current directory
- cd Documents/MSTU/Week2
- Go to your github website and create a new repository
- github command line
- Git add
- Git commit
- Git push
- Git clone
Linux install for windows user
Download GitBash at https://git-scm.com/downloads
Responsive design with Bootstrap
Official bootstrap getting started guide: http://getbootstrap.com/docs/4.1/getting-started/introduction/
Precompiled source code(look up exactly how each bootstrap class is defined in css files): http://getbootstrap.com/docs/4.0/getting-started/download/
List of all bootstrap components: https://www.w3schools.com/bootstrap4/
- Ask a question on Slack.
- Provide an answer either for your own question or someone else’s.
- Finish and publicize project one onto github: responsive resume/portfolio
- 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
Include some reference here – concept maps, images, sound, gifs, websites, your favorite novelists or movies or comic books, etc.
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.
Project One critique:
Can Zhang: https://wswsws125.github.io/WebResume/
Qin Ye: https://yeqin.github.io/project1/；
Qianlin Li: https://medium.com/@chanlin1897
Final URL: https://jwztccu.github.io/Final/
Media art and theory presentation:
3D scanning and photogrammetry by Qianlin
VR arist Amelia Winger-Bearskin(http://www.studioamelia.com/) by Qin
Intro of JS programming fundamentals:
Variables by data types: https://www.w3schools.com/js/js_datatypes.asp
Array Methods: https://www.w3schools.com/js/js_array_methods.asp
Introduction of DOM standard: https://www.w3schools.com/js/js_htmldom.asp
Use JS to access Dom events: https://www.w3schools.com/js/js_events.asp
Use JS to access Dom elements: https://www.w3schools.com/js/js_htmldom_elements.asp
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)
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: https://www.w3schools.com/js/js_exercises.asp
W3schools JS tutorial: https://www.w3schools.com/js/
Youtube tutorial: https://www.youtube.com/watch?v=vEROU2XtPR8
Week 6 – JS fundamental and Dom API Basics
Target elements in the DOM with queryselector method:
Query Selector: https://www.w3schools.com/jsref/met_document_queryselector.asp
Query Selector All: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
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: https://www.w3schools.com/jsref/prop_html_innerhtml.asp
Access and change class: https://www.w3schools.com/jsref/prop_element_classlist.asp
Access and change attributes: https://www.w3schools.com/jsref/dom_obj_attributes.asp
Create and add new DOM elements: https://www.w3schools.com/js/js_htmldom_nodes.asp
Add inline CSS to DOM elements: here
Add event listener to Dom element: https://www.w3schools.com/js/js_htmldom_eventlistener.asp
System function: SetInterval, a great way to call functions without depending on event listener
- Quickly skim through the following tutorials(revisit old JS knowledge within new context):
- Exercise: animated clock
- You are welcome to complete it on your own or as a study group.
- 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.
- 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
- Final project proposal
- Presentation: interactive installation
Add event listeners to a dom object – Two equivalent ways:
- addEventListener: https://www.w3schools.com/js/js_htmldom_eventlistener.asp
- onClick: https://www.w3schools.com/jsref/event_onclick.asp
List of DOM event handler: https://www.w3schools.com/jsref/dom_obj_event.asp
- Click: https://jsbin.com/nelapuk/edit?html,css,js,output
- Scroll: https://jsfiddle.net/solodev/3stm0mnq/
- Resize: https://jsfiddle.net/codeandcloud/xor3L8db/
- Mousemove: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove
Pass arguments through event listeners:
Create and add new DOM elements: https://www.w3schools.com/js/js_htmldom_nodes.asp
inClass Lab 1: debugger intro
- Open the exercise file here
- Right click on page and open inspector
- Find the custom js file link at the end of <body>, right click and choose “review in source panel”
- Try to put in some input the test the outcome on the page. What’s wrong?
- Click line 32 to add a breakpoint.
- Test with two numbers and watch what happens inside the debugger. Very exactly which lines of code are erroneous.
- Try to google the right JS question and fix code.
- Temporarily disable the debugger and run your code again to verify.
inClass Lab 2: Simple Lightbox(Interactive Image Gallery)
inClass Lab 3: Carousel Gallery Part One
- Download setup files from here(please delete main.js for now)
- Review the following debugger resource:
- Quickly review the following tutorials:
- Selectively complete FreeCodeCamp tutorial.
Week 8 – JS Fundamentals
- 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)
inClass Lab 2: My Carousel and background animation effects.
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:
- Object basics
- Object prototypes
- Working with JSON data(for next week)
2. Interactive Coding Exercise:
3. Coding Project: Select at least one of the following two options:
- [commercial portfolio page] Integrate and customize three(or more) JS elements of your choice into your portfolio site(your project one).
- https://www.w3schools.com/bootstrap/bootstrap_theme_band.asp (A good example of what a simple commerical website with js integration could look like. )
- [web app] Create your own interactive animation/game/data viz/app:
- https://molleindustria.github.io/p5.play/examples/index.html (to give you some quick ideas about what kind of JS animation/interaction is typical in a web game setting)
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
Skim through the final project brainstorming session information below
Past student examples:
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.
Past student examples:
- (good scope of a final project idea) http://scroll-o-meter.club/
- Interactive Haiku
Past student examples:
- https://scratch.mit.edu/projects/171838231/#fullscreen(this is not written in JS, but could be a very fun JS final project for someone in our class)
AI & 3D scene in web context
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:
- Look at inClass Lab One, put in line by line logic.
- 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.
- If you like working with JS Canvas, continue to expand on inClass Lab two and make it into your own game/app.
- 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
- Add an additional button.
- 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
- 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:
- [todo list]https://www.w3schools.com/howto/howto_js_todolist.asp
- [styling chat mesages] https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_chat
- [closable list items]https://www.w3schools.com/howto/howto_js_close_list_items.asp
- [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:
- Keep developing your final project prototype
- Happy Thanksgiving Everyone : )
Week 12 ~ 14 – Guided Project Development Studio
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
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.
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.