Critical Making 3 & 4

Nothing is a mistake. There's no win and no fail, there's only make. ~ John Cage

Critical Making Studio is the foundational experience enabling students to realize their full potential as creative citizens in BDW Studios. Central to the studio are four courses, Critical Making 1 and 2 (Fall), and Critical Making 3 and 4 (Spring), in which students enter into an experience as transformative and diverse as the participants themselves; all unique threads woven into whole cloth, informing the very fabric of studio culture. The courses aim to ground students in making as a deeply personal practice and ongoing journey in life thereafter, resulting in creative citizens capable of realizing that which they can envision utilizing a combination of their talents, intellect, abilities, creative faculties, and support networks.

The studio experience is made possible by 24 hr, 7 days a week, access to a state-of-the-art rapid prototyping and fabrication lab facility, media editing suite, and studio workspaces that can be transformed into a variety of configurations supporting activities such as artistic performances and special events. Additionally, access to fellow students, faculty, and industry partners provides an unparalleled educational experience and support network for developing transformative solutions spanning a variety of creative industries.

Instructor:

RJ Duran
rj.duran@colorado.edu
Slack: @rjduran. #cmstudio on bdw1301.slack.com
Office hours by appointment. Feel free to reach out to me via slack or email.

Syllabus:

Critical Making Studio 3
Critical Making Studio 4

Course Resources

This website is the primary resource for all critical making studio courses. Most of the resources used in the courses are divided up into sections that can be found on the left sidebar. Think of these resources as maps containing many possible tools that could help you accomplish your work and from which you will need to choose some to learn and work with. There are pros and cons to any tool but all have a set of functionalities and a purpose. As with any tool and any kind of personal creative process you are free to choose anything that works for you as long as the work gets done. As we move through the phases of the course feel free to recommend, add, and update the tools we and you find useful on this site. Also, note that anything specific and relevant to an assignment or project will be listed out under the assignment or project deliverables.

Be sure to check the Class Links section weekly as there will surely be different things covered in the two courses. The topics of in class discussion will be unique and emergent as the conversation progresses. As always, if you miss a day or just want to know what went on in a different class, get in touch with me and/or talk with your classmates and share ideas. I will make a point to hit some main points in both courses so everyone is getting most of the same information, perhaps in a slightly different order at times.

Workload

  • This studio based course is 3 credit hours which means students should expect to dedicate at least 2-3 hours per credit hour. This translates into 6-9 hours per week if you are taking only one studio course (CM3 or CM4) and 12-18 hours per week if you are taking both studio courses (CM3 and CM4). Consider 6 hours a minimum expectation for one studio course or 12 hours for both studio courses and plan accordingly.

  • Assignments are due the following week by the start of class. Projects (write ups, etc) are due by 11:59pm on the date specified. Students taking both courses simultaneously (CM3 and CM4) should submit all work on the CM4 due date.

Phase 1: Computational Worldmaking

Phase 1 Question

What is a world?

XR Continuum

Jan 17 / Jan 22

Jan 15th - MLK Holiday. No Class.

Assignment 1: What is a World?

In this phase we will focus on learning how to develop Unity applications that run on the HTC Vive. You will be learning how to work with Unity and write scripts to perform a variety of functions and behaviors in the C# programming language. This is merely the technical layer. The "How". Since we suspect that all behavior is motivated, there must be motivation for developing new kinds of worlds of a kind or tools that perform a specific function or experiences that offer something we can't acquire any other way.

What kinds of worlds, tools, or experiences can you imagine and what motivation do you have to create them?

Locate 3 examples of "worlds" and bring them to class next week to discuss. You may also choose to explore current use cases of VR. How can VR be used to help people with disabilities or other ailments? How might VR be used to improve the wellbeing or quality of life of a certain demographic?

Deliverables:

  1. Any kind of media that points at examples of worlds and/or applications of VR. Posted to slack #cmstudio.
  2. Optional: A writeup for your blog of your research and thoughts on worlds, worldmaking, and/or VR.

Resources

Unity + SteamVR

Jan 24 / Jan 29

Unity Basics

  • Unity Interface
    • Navigation
    • Hierarchy
    • Windows - Scene, Game
    • Console
    • Inspector
    • Custom Layouts
    • Tools - QUERTY
  • Project / File Organization
    • Assets Folder
      • If you delete it in Unity it deletes it from the folder. Careful.
      • .meta files generated by Unity. They need to go with the source file if you move it in the explorer (windows) or finder (MacOS).
      • Make subdirectories to keep it organized
        • Ex. Scenes, Scripts, Models, Textures, Prefabs, Physical Materials, Materials
  • Adding Objects to a Scene
    • Manipulating Objects
    • Inspecting Objects
    • Nesting Objects - Parents and Children
  • Working with Game Objects
    • Adding Components
    • Rigid Body
  • Game Play
    • Init Objects, Compile Scripts, etc
    • Changing parameters in Unity before and during gameplay
  • Importing Assets
    • Import your own assets (from CAD package - Rhino, Fusion, Maya, Blender, etc)
    • Import assets from Asset store
    • Import assets you find on the web
  • Intro to scripting
    • Scripting...What the?
    • What's in a script?
    • Monodevelop and Visual Studio
    • Make a GameObject
    • Make a new script and add it as a Component to your new GameObject
    • Print to the console from your script
      • Debug.Log("Hello World!!");

Unity + SteamVR

  • SteamVR Plugin - It's easier to import via Asset store within Unity
  • Demo: Build a Unity project and add the SteamVR plugin
    • Make a new Unity project
    • Import plugin SteamVR from asset store
    • Add a Plane and Sphere to the scene
    • Add the [CameraRig] and [SteamVR] Prefabs
    • Disable the default Main Camera and Directional Light
    • Add a Point Light
    • Start adding other objects into a scene
    • Hit play and put on the vive

A Note about SteamVR Prefabs:

[SteamVR] handles a few things. It automatically pauses the game when a player opens the system menu and syncs the physics update rate with that of the rendering system. It also handles smoothing of room-scale VR movement.

[CameraRig] controls the Vive’s headset and controllers.

-

Assignment 2: Sandbox

Build a virtual world sandbox in Unity. Think about this as an environment you can play in. Like you did back in kindergarten but in the computer and with a screen strapped to your face. What do you want to put into your world? Boxes? Trees? Dinosaurs? People? Everything? Do any of your creatures make sound? What new techniques did you discover with Unity?

Deliverables:

  1. A VR experience running on one of the laptops and vive setups.
  2. Optional (but highly recommended): A writeup for your blog of your sandbox environment. Screenshots, video documentation, animated gifs / images help to explain concepts where motion and immersion are the experience being communicated. Share the URL to your blog post on slack #cmstudio.

Resources

C# Scripting: VRTK

Jan 31 / Feb 5

  • C# in Unity (Started last week)
    • Scripts!
    • Attaching scripts to GameObjects (ie. Script Components)
  • The C# Language
  • Trigger and Collider Examples
  • Locomotion
    • Movement in Place - Run with your arms
    • Teleportation - Jump from place to place

-

Assignment 3: Interact with GameObjects

Write a script that enables you to interact with objects in your virtual world sandbox. Experiment with public variables (parameters) that you can adjust before and during gameplay from the inspector. If your world is large and you need to move around in it you might dig deeper into VRTK and explore teleportation or move in place to get from place to place.

Deliverables:

  1. A VR experience running on one of the laptops and vive setups.
  2. Optional (but highly recommended): A writeup for your blog of your approach to creating one or more scripts to interact with your GameObject(s). Screenshots, video documentation, animated gifs / images help to explain concepts where motion and immersion are the experience being communicated. Share the URL to your blog post on slack #cmstudio.

Resources

  • VRTK
  • Tutorial: How to Setup a VRTK Project w/ "Movement in Place" Locomotion - IN PROGRESS

Unity Scripting References

Unity Scripting Tutorials

Watch these and test out everything they show in your sandbox.

C# References

C# Scripting: Object Agency

Feb 7 / Feb 12

-

Assignment 4: Scripting Behavior

Write a script that enables your GameObjects to interact with each other or behave in a particular way when triggered or automatically. Experiment with public variables (parameters) that you can adjust before and during gameplay from the inspector. How might you use these variables to manipulate the behavior of your objects?

Deliverables:

  1. A VR experience running on one of the laptops and vive setups.
  2. Optional (but highly recommended): A writeup for your blog of your approach to creating one or more scripts. Screenshots, video documentation, animated gifs / images help to explain concepts where motion and immersion are the experience being communicated. Share the URL to your blog post on slack #cmstudio.

Resources

Object Agency

Programming / Coding

Project 1: Build a Virtual World

Build your own virtual world or contribute to building a virtual world with others using Unity, SteamVR, and the HTC Vive. The concept, content, narrative, purpose, and gameplay of your virtual world is entirely up to you and/or your team to develop. You may use any combination of readily available assets such as 3d models, terrains, textures, materials, or prefabs to build out your worlds.

Its no small task to build a complete world. Consider working in teams to develop your concepts and execute. Gain experience with different parts of workdmaking by exercising your new skillsets.

Deliverables:

  1. A virtual world built in Unity that runs on the windows laptops. Zip up the entire project directory and submit it via Dropbox, OneDrive, or Google Drive link. We also have the ability to transfer files over the local network via shared folder. Read the server access page to learn how to do this.
  2. A URL to the project writeup posted on your blog. If you worked in groups, everyone needs to submit their own writeup for the project documenting their contributions to the project. It would probably be good to include links to your team mates writeup's in your writeup. Posted to slack #cmstudio.

CM4: Due Feb 14
CM3: Due Feb 19

Phase 2: Web Development

Phase 2 Question

What is the Web?

Tip

Remember to look at the Development section often. It contains a variety of tools and learning resources beyond what we will cover in class. Many of the links in this phase will be to sections of the Development Tools page.

Fundamentals

Feb 21 / Feb 26

Why the Web?

Why do anything with the technologies of the Internet? What is the point of using these technologies?

The big idea: The purpose of building websites and web applications is to make an idea accessible to one or more people through the Internet.

About this phase:

The majority of this phase will be about current web development paradigms and practices -- getting comfortable with programming for the web, learning how to use web development tools and workflows to solve problems, and building a personal practice around using these technologies for projects.

If you are curious about the history of electronics, computers, computer science, programming, and the Internet, check out the Histories section. I strongly advise you to start getting familiar with the various histories and technological underpinnings of the technologies you use every day. These resources are meant to work through at your own speed and as you begin to ask deeper questions about why something works and how something works.

Industry

  • What is web development in 2018?
  • What does a web developer do?
  • How do you develop web development skills?

Good Reads

Read through each one. Click on the links. Read about the tech. Take a breath. Begin to understand how things connect. Don't get overwhelmed. Make a list of the technologies you read about. Try some of them out in your sandbox.

Stacks

  • Front-End = HTML, CSS, Javascript, Design, Interactivity, Responsive
  • Back-End = Ruby, Python, PHP, Node, MySQL, PostgreSQL, MongoDB, Dev Ops
  • Full-Stack = Front-End + Back-End + DevOps + Design

Development Environment

Lets jump into it. Tools, tools and more tools. Working with web technologies requires constant learning of programming languages, tools, and workflows. The only constant is change. Especially to existing and widely used code bases (ie. anything open source). Never stop learning. Keep practicing.

Languages

In this phase we won't be explicitly be working through tutorials for each language but we will use each language at varying levels of depth. In the resources here you can find some learning pathways for building skills with these tools. Make time to read through the basics of all the languages and try things out. Most importantly, seek to apply the skills you are learning towards projects.

Interesting Things

-

Assignment 5: Build a Sandbox

Build a local development (sandbox) environment for experimenting with HTML, CSS, and Javascript. This means you have a kind of local workspace similar to what runs on a server in a rack somewhere in the world. This environment can be as simple (a folder or git repo with boilerplate code) or elaborate (an environment similar to code sharing sandboxes) as you want to make it.

Note: MacOS provides a default Sites folder to host fully functional websites out of. The Sites folder is located in your username directory. You may also consider setting up a specific working directory for all programming projects (For Example, username/code). This directory then becomes your goto location for anything having to do with code, programming, cloning repos from github, experimenting with new tools and software, and more. This is precisely how I organize my system. I rarely use the Sites folder.

What is the purpose of this?

To become familiar with the file types, languages, and how they work together. At a fundamental level this approach to experimentation establishes good development practices and efficient workflows. It also supports hands-on learning, which is the only way to improve as a programmer. As a programmer you want to be in control of your code, tools, workflow, and system. Don't let the computer control you.

Deliverables:

  1. A 1 min video screen capture demonstrating your sandbox environment and system folder structure.
  2. Optional (but highly recommended): A writeup for your blog of your learning experience. What hurdles did you encounter and how did you overcome them? What worked and what didn't? Embed your video in your writeup. Share the URL to your blog post on slack #cmstudio.

Resources

Examples of Sandbox-like / Code Sharing Environments

Setting up a Localhost

There are several ways to work with a local web server. Some are simpler than others to setup and configure. Its mostly a matter of personal preference and project preference which local web server option you use. You can refer to the cm-code/live-servers repo for simple examples.

Workflow

Feb 28 / Mar 5

-

Assignment 6: Play in Your Sandbox

You now have a local development (sandbox) environment to experiment with HTML, CSS, and JS. You (hopefully) have a better handle on the terminal command line. If you feel you need more practice with this, look at the learning terminal section for some guidance. You also (hopefully) now have a better understanding of npm and how it fits into a modern web dev workflow. If you need more practice with this tool, look at the hello-npm examples in the git repo. Perhaps you are using atom-live-server or npm's live-server module to manage your local server for rapid prototyping. If you need more practice with either of these tools, look at the cm-code/live-server examples. Maybe you are using browserify or budo to build your projects and iterate quickly. Remember that these tools enable bundling javascript and live reloading similar to the live-server tools. Regardless of your workflow, the greater question is, what do you want to make? What are your curious to make?

Build 1-3 prototypes in your sandbox using HTML, CSS, and JS to the best of your abilities. Think about web designs that inspire you or you are drawn to understand how to build them. Use the Chrome Dev Tools (View > Developer > Developer Tools) to inspect how these exemplary websites are constructed. Look at the css and js files loaded then Google them to learn more. Other possible projects could be as simple as a HTML/CSS webpages for experimenting with styles, layout, colors, fonts, and positioning or more complex pages that include interactivity using helper libraries such as jQuery. You may also consider using a front end framework such as bootstrap styles and javascript features to build pages. You may also want to view and interact with your localhost server prototypes on other devices using ngrok. Check out the hello-ngrok example to learn more.

Deliverables:

  1. A 1-2 min video screen capture demonstrating your sandbox environment and 1-3 prototypes. Talk about your workflow, your code, how you organized your project files, what your prototypes do, and what you learned from the process.
  2. Optional (but highly recommended): A writeup for your blog of your learning experience. What hurdles did you encounter and how did you overcome them? What worked and what didn't? Embed your video in your writeup. Share the URL to your blog post on slack #cmstudio.

Resources

Libraries & Frameworks

Mar 7 / Mar 12

How does one choose which library or framework to learn?

There are many out there. It's best to make choices based on the project goals. The reason there are so many options is because people are constantly inventing new tools to solve problems. Over time the tools being used begin to gain popularity based on the number of users, development cycles, stability, and relevance. Keep in mind that there will ALWAYS be new tools and it's best to have an understanding of whats available while knowing a few tools really well. As such, there is always more to explore.

Project 2: Build a Web App with a Framework or Library

Choose one or more libraries or frameworks to build a project with. Most of the tools listed above have getting started documentation that should be relatively straightforward to follow to get going. Begin to understand the way you integrate one or more of the libraries or frameworks into a project or begin a new project with it. How do you prototype with these tools to construct a functional web application? What's your approach? How do you use these tools with your current development workflow?

Deliverables:

  1. A 2-3 min video screen capture demonstrating your project. Talk about your workflow, your code, the chosen libraries/frameworks, how you organized your project files, what your project is and does, and what you learned from the process.
  2. A link to the git repo that contains your project. You need to include a README.md file with instructions for its use. Look at examples of README files or tutorials about how to write a good README file. A typical project will likely have at least an index.html file and a README.md file. Any other files or folders will depend on the frameworks, css, and js used. The purpose of this is to improve your ability to organize a project and its files.
  3. A writeup for your blog of your learning experience. What hurdles did you encounter and how did you overcome them? What worked and what didn't? Embed your video in your writeup. Share the URL to your blog post on slack #cmstudio.

Resources

CM4: Due Mar 14
CM3: Due Mar 19

Final Project Proposal

Write a final project proposal that builds upon your interests in Critical Making and explores one or more technologies you explored throughout the Spring semester. Spend some time reflecting on the tools and technologies you enjoyed learning about and wish to dig deeper into. Think about the questions that came up then and now as you are exploring creative possibilities using the technologies of your choice. Ask yourself, what do I want to create and what tools do I want/need to use to realize my vision? What challenges do I anticipate I will need to work through? What problems might I want to solve? And for what purpose? Exercise your creative muscles by creating sketches, drawings, maps, renderings, animations, prototypes, videos, etc of your original concept. Make use of reference materials that inspire you and fuel your creative drive.

Possible Project Areas:

  • VR (Unity / WebVR) Experiences
  • Worldmaking (Computational Creativity)
  • Web Applications
  • Digital - Physical Experiences
  • Enchanted Objects
  • IoT Devices and Systems
  • Drones
  • Magic Mirror Platform
  • Physical Computing
  • Interactive Experiences

This is only a suggestion based on some of the concepts we have covered this semester (and a few from last fall). You are free to propose any kind of project you think you can accomplish in the given the timeframe.

This project can be completed as individuals or in a group. Each person's contributions to the project need to be explicitly stated in the proposal. I (highly) encourage everyone to share ideas and work together to assist each other as you develop your projects. This phase is much shorter (by about a week) than the others which means you need to be already making progress on your final project throughout Phase 3.

Deliverable:

A final project proposal posted to your blog. It should include the following:

  1. Project Title
  2. Project Summary ~ 1 page max (ie What is it? What problem(s) are you solving? What will it do? How will it work?)
  3. Key components of your project (ie. Resources, skills, and technology needed to realize it ~ HTC VIVE, Web Technologies, Javascript Libraries, Raspberry PI, Materials, CAD, 3d Printing, Bantam Mill, Processing, Arduino, etc)
  4. A brief timeline. If you need to order parts for your project, what do you need and when? If you need to order something, decide on it early and plan ahead for shipping times etc.

Final Project Proposals Due Mar 21 by 11:59 pm (Before Spring Break). I will review them and send questions and comments to you by the end of Spring Break.

Note there are about 2 weeks from the due date of Project 4 until Final Project Presentations on May 2nd, 2018.

Spring Break (No Class)

Mar 26 - Mar 30

Phase 3: Enchanted Objects

Phase 3 Question

What is an Enchanted Object?

Tip

Remember to look at the Physical Computing and Development sections often. They contain a variety of tools and learning resources beyond what we will cover in class. Many of the links in this phase will be to sections of these pages.

This phase is inspired by the book Enchanted Objects: Innovation, Design, and the Future of Technology by David Rose. Through this phase you will explore the merger of digital and physical materials transformed into intelligent systems, common objects, immersive experiences, and products. We will be exploring accessible IoT platforms such as Raspberry Pi and Arduino combined with open source software, frameworks, and libraries such as Node.js. The focus of this phase is on integration - platforms, deployment, connectivity. How do all these technologies work together to support the realization of "enchanted objects".

Platforms

Mar 21 / Apr 2

Note: CM4 we will start talking about this stuff on Mar 21, the week before spring break. CM3, I suggest reviewing the information early just to know where we will be going right after spring break.

For this phase we will be using Raspberry Pi and Arduino boards as the IoT platforms for building Enchanted Objects. I recommend everyone purchase their own Raspberry Pi device and 16 or 32GB MicroSD card(s). We do have a few Raspberry Pi boards in the shop but are low on MicroSD cards. We have plenty of Arduino boards to use so no need to purchase one unless you want to own one.

You can pick up a Raspberry Pi 3 on Amazon or Microcenter (Retail Store in Denver). If you want a more complete starter kit you can find similar systems on Amazon, Sparkfun, and other online retailers. Packages with more components will typically cost more. Note that the Raspberry Pi 3 B+ was just released (on Pi Day 3/14/2018) and it costs a bit more than its predecessor (3 Model B). It doesn't matter if you have this new version or the slightly older version.

Typical Raspberry Pi Setup

  • Raspberry Pi 3 ~ $35
  • 16, 32, or 64 GB MicroSD Card (16 GB is a good size to start with) ~ $10 for 16 GB
  • HDMI Cable (To plug in display) ~ $6
  • USB Keyboard ~ $5-15
  • Est Total: $66

Terminal / Command Line (Review)

Hardware

Connectivity

  • Node
  • Raspberry Pi + Arduino = Super Combo!
    • Demo: Node Application running on Raspberry Pi (Application uses Node, Express, Websockets, and Johnny Five)

Physical Computing (Review)

-

Assignment 7: Build and Deploy a Web Application on Raspberry Pi

Build a web application to deploy on your Raspberry Pi board. If you are designing and building an "enchanted object", what will make the object "enchanted"? What will the user experience be like? How will you go about constructing your application? What framework(s) or libraries will you use? How will someone interact with your system / object?

Sketch out some possibilities for your application and how it works on paper first. Think about the components of your application and system and how they connect. What types of input devices will you use? What output devices will you use?

Possible directions could be a simple webpage running on a Raspberry Pi that displays useful sensor data or a system that makes LEDs flash when driven by user input via laptop or mobile device. Perhaps you have a device that relays its position and orientation to a webpage and alters the background color in real-time. The possibilities are endless!

Prototype both locally (on your laptop localhost) and on a Raspberry Pi (via ssh). Deploy on a Raspberry Pi and access via Wifi or ethernet cable.

Deliverables:

  1. A 1-2 min video screen capture demonstrating your system. Talk about your overall concept, workflow, code, how you organized your project files, what your prototypes do, and what you learned from the process.
  2. Optional (but highly recommended): A writeup for your blog of your learning experience. What hurdles did you encounter and how did you overcome them? What worked and what didn't? Embed your video in your writeup. Share the URL to your blog post on slack #cmstudio.
  3. Optional (but highly recommended): A github repo that contains your project and instructions for others to run it in the README.md.

Resources

Building Systems

Apr 4 / Apr 9

Connectivity Cont.

Integrations

  • Web Application + VR (Unity)
  • WebVR (A-Frame) + Node.js + Express
  • Physical (Sensors) + Digital (A-Frame or Unity)

Data

Deployment (Remote)

Interfaces

-

Resources

Project 4: Build an Enchanted Object

Build a visual or physical object or experience that connects with the digital world. This might be an IoT connected device that senses its environment, human interaction, or the presence of other devices. Maybe your project connects the physical and virtual through connected hardware such as Raspberry Pi and Arduino.

Note: To build an enchanted object doesn't imply or require the use of all these technologies. It can make use of any combination of hardware and software built from scratch or configured from examples. The objective is to work creatively to build an object or experience that explores connected systems that enable a sense of "enchantment" one has with an object, experience, or product at any fidelity.

  • What makes your object or objects enchanted? Shape, color, size, material, a combo?
  • What kinds of inputs / outputs does your system use?
  • What kind of hardware are you using?
  • What software / platforms / frameworks are you using?

Deliverables:

  1. A 2-3 min video screen capture demonstrating your project. Talk about your workflow, sketches, code, chosen libraries/frameworks, how you organized your project files, what your project is and does, and what you learned from the process.
  2. A link to the git repo that contains any project code. You need to include a brief README.md file with instructions for its use.
  3. A writeup for your blog of your learning experience. What hurdles did you encounter and how did you overcome them? What worked and what didn't? Embed your video in your writeup. Share the URL to your blog post on slack #cmstudio.

CM4: Due Apr 11
CM3: Due Apr 16

Phase 4: Final Projects

Info

This phase is much shorter (by about a week) than the others which means you need to be already making progress on your final project throughout Phase 3. Perhaps you use your Phase 3 project as a stepping stone towards your Final project.

Open Studio

Apr 18 / Apr 23

Open Studio

Apr 25 / Apr 30

Final Project Presentations

May 2nd @ 6:30pm
CMCI STUDIO (1301 Walnut St)
Both CM3 and CM4 will present their final projects during scheduled class time. All are welcome.

Projects

  • Effugium Escape Room by Jim Murphy & Meredith Fong
  • Forum - the stories you need to hear by Nick Balderston & Matt Isola
  • Seasons (VR Experience) by Nikki Cavalier
  • Enchanted Ovulation by Sarah Safranski & Rebekah Sosa

Everyone will present their work starting at 6:30pm. Come prepared with a 5-10 min presentation / demo. Be sure to include the project/work title, problem statement, inspirations, previous work, and lessons learned.

Following presentations we will celebrate the semester with food and drink at a local establishment.