/SNWG

Course Website and Repository for CMU Fall 2017 'Spatial Narratives via Web Graphics'

Primary LanguageJavaScript

Spatial Narratives via Web Graphics

Course Information

62-633 (9 Units)

Carnegie Mellon University College of Fine Arts Interdisciplinary Course
Open to all graduate students; Instructor permission required for undergraduate students

Class Times: W 6:30PM – 8:20PM
Class Room: MMCH 303 (TBC)

Instructor:

Office Hours: By Appointment
Office Location: MMCH 308

Teaching Assistants:

Office Hours & Location: TBA

Course Description

This course explores experimental applications of web graphics technology in the service of communicating spatial narratives. The spatial narratives will strive to reimagine the concept of space and the practice of storytelling in the context of browser-based graphics environments. This course will contemplate specifically the use of multi-dimensional media via the web as a vehicle for delivering spatial narratives. Web graphics technologies, such as CSS, SVG, Canvas and WebGL, have dramatically increased in their compatibility with both mobile and desktop computing devices and have consequently broadened the reach of graphically rich content to the masses. Students will work on a semester-long project in the form of an interactive web application that challenges, augments, or reaffirms the sense of space through deliberate use of storytelling devices. Upon culmination, the projects will be exhibited on the course website for public viewing. The first half of the course will consist of workshops for building various skills from asset creation to graphics programming. Starting with a brief introduction to HTML/CSS/JS and UI/UX design principles, the workshops will focus primarily on the THREE.js library. The second half of the course will focus on the production of the final project where class times will turn into hack sessions. While there is no prerequisite for this course, some familiarity of the technologies mentioned above and basic programming skills are highly preferred. First class will meet after Labor Day on September 6, 2017.

In short, this course is a research seminar that will explore affordances of spatial narratives by experimenting with various web graphics technologies.

Learning Objectives

Students will produce an interactive 3D narrative experience for the web, and will gain technical, conceptual, and organizational insights along the way.

Outcomes

By the end of the course, students should have the following outcomes:

  • Gain experience in programming web-based interactive 3D applications
  • Gain experience in conceptualizing, constructing, and delivering spatial narratives
  • Gain theoretical insights into the potential applications for spatial communication using web graphics technologies

From a technical perspective, the students can hope to learn how to:

  • Work on web-based multimedia projects, organizing work and assets
  • Model evocative environments and models in CAD softwares (3DS Max, Rhino)
  • Create simple animations and write simple interactive scripts
  • Leverage audio, video, images, and prose in 3D experiences

Evaluation Criteria

Experimentation is encouraged in this course. The experiments shall strive to challenge, accentuate, and intertwine the following spatial concepts:

  • Dimensionality
  • Materiality
  • Scale

Weekly Logistics

Week 1: No Class
Week 2: Course Introduction; Github Workflow; Markdown/Jekyll Overview (Recording)

Due next class:

  • Fork the course repository
  • Create a new Jekyll post with an embedded 3D model (that you've created) using SketchFab
  • Analyze and describe the experience of publishing your 3D model
  • Describe your motivations for taking this course
Week 3: Overview of Web Development; Introduction to ES6/JS (Recording)

Due next class:

  • Research and gather more examples of the technologies discussed in class
  • Create a gallery within a new Jekyll post that links to the examples
Week 4: ES6/JS Recap, Getting Started with THREE.js (Recording)

Due next class:

  • Create an interactive THREE.js sketch embedded in a new Jekyll post
Week 5: Post-processing Effects; Narrative Devices & Atmospheric Aesthetics; User Experience Design (Recording)

Due next class:

  • Narrative proposal(s) in the form of storyboards in a new Jekyll post
Week 6: 3D Modeling; Other asset creation & pipelines; Decimation as low-polygon workflow (Recording)

Due next class:

  • Embed two 3D models into a new Jekyll post using SketchFab
Week 7: 3D Modeling; UV mapping (Recording)

Due next class:

  • Embed a texture-mapped 3D model into a new Jekyll post
Week 8: Animation; Blend shapes; Shaders; Interactivity (Recording)

Due next class:

  • Animated and interactive THREE.js prototype based on the storyboards in a new Jekyll post
Week 9: Getting Final Projects Started; Principles of Software Design (Recording)

Due next class:

  • A new Jekyll post with insights and challenges so far, and goals for next week
Week 10: Project Progress Review; Hack Session

Due next class:

  • A new Jekyll post with insights and challenges so far, and goals for next week
Week 11: Project Progress Review; Hack Session

Due next class:

  • A new Jekyll post with insights and challenges so far, and goals for next week
Week 12: Project Progress Review; Hack Session

Due next class:

  • A new Jekyll post with insights and challenges so far, and goals for next week
Week 13: No Class (Thanksgiving)
Week 14: Project Progress Review; Hack Session

Due next class:

  • Final project presentation
  • Final project live demonstration
  • Final Jekyll post summarizing the project
Week 15: Final Project Presentations (Recording)

Field Trips

There will be a few field trips organized over the course of the semester to companies, labs, and institutions relevant to the course. More information will be posted here.

Supplemental Tutorials

Grading Breakdown

  • Progress Work
    • 10% Week 3 Assignment
    • 10% Week 4 Assignment
    • 10% Week 5 Assignment
    • 10% Week 6 Assignment
    • 10% Week 7 Assignment
    • 10% Week 8 Assignment
  • Final Project
    • 15% Conceptual Execution
    • 15% Technical/Organization Implementation
    • 10% Documentation & Process