Making things requires tools. And the same surfeit of tools that makes it possible for us to make all sorts of neat stuff—digitally and physically—also can make it pretty overwhelming to get up and running. This page begins to document some of those tools and a handful of selected resources we think will make getting started easier.

A remarkable amount of making things is about setting up your environment and tooling. While it's wonderful and amazing how many different people and communities make the making of digital and physical stuff easier, that diversity introduces a lot of complexity. It is natural to be overwhelmed by all this. All we can say is that we feel that each of these tools [pretty quickly] end up being worth it. It's amazing how much the experience sucks, given how much rides on building things with technology.

If you are really into tooling and want to take a bit of a meandering jaunt through what's out there and why you might choose to use which things for what, feel free to read The Long Story. The rest of this page will focus on what you will need to install and familiarize yourself within the scope of this course.

Materials for this course

For those of you with a Mac computer

You will need to download a lot of stuff to do work in this course. Here's a quick list of some general software you should install on your machine:

Get an Apple ID.
Install Xcode Developer Tools.
Install Homebrew.
Install Sublime Text 3.
Install Google Chrome.
Run each line of code from this gist at your terminal.
Create a Github account.

For those of you with a Windows machine

Install Sublime Text 3.
Install Google Chrome.
Download and install node.js, an implementation of JavaScript that can run without a browser (which also has a nice community and tooling for installing a wide variety of libraries).
Download and install Babun, a nicely configured terminal setup for Windows.

Some of the first projects and exercises we'll do in class will require a few more installations and account set-ups.

`/people` page project

Create an account at Codepen.io.
Fork this Codepen and modify it to reflect information about yourself.
Now, add some CSS or Javascript effects to your card. Check out our current people page or this list of effects for inspiration on how to adapt your card.
When you're done with your card, export it as a Github gist, and post the link on your personal Github Pages site. From there, we'll incorporate it into the class website.

personal site & journal set-up

Create a Github Pages site for your username using the linked instructions. This site will serve as your daily journal and portfolio during the class.

`a-story-in-pomes project`

Fork the a-story-in-pomes repository by clicking the "Fork" button in the upper left.
Next, clone it from your Github account by typing git clone https://github.com/YOUR_USERNAME/a-story-in-pomes.git into your terminal or by using GitHub Desktop.
cd (change directory) in your terminal to the a-story-in-pomes folder
Run npm install in your terminal (this installs the various packages required for a-story-in-pomes).
Now, run node server.js in your terminal to start up the server.
You should now be able see the site by going to http://localhost:3000/ in Google Chrome.

Materials from previous courses

Sample projects used in previous terms

This time around, we are focusing on the pomes project to serve as our shared code base and exemplar project. In previous versions of this course, however, we've used projects with different levels of finish, complexity, and authenticity. We wanted to make these previous projects available to you, even if we won't dig into them as a whole group, in case they speak to you, your interests, and the work you hope to do this term more directly than pomes.

Scrolling Video Timeline: This project, using a Beyonce video to demonstrate, is the skeleton for a one page app/website which can move frame-by-frame through a video based on mouse scrolling. It also indexes into the video using visual waypoints which, when activated by click or hover, move forward or backward through the video to a certain frame. If you clone this repository and open the project.html file in your brower, you will be able to play with it. When developed, this project was meant to serve as an inspiring structure for digital interactions with video.
Personal Portfolio Framework: Based on the Apple homepage from a couple years back, this skeleton of a project provides the basic structure for the front page of a horizontal scroll portfolio site. If you clone the repository and open the index.html file in your browser, you will be able to see how it works. When developed, this project was meant to serve as a portfolio for class work and provide a basic structure participants could build on to display the work they did during the course.
Osmos: This barebones version of this beautiful project from Hemisphere Games is a crash course in physics simulation. It's not beautiful, and it hasn't built out all of the game mechanics present in the original osmos, but it gets at some of the fundamental principles underlying the movement and interaction that makes the original game so great. If you clone the repository and open the osmos.html file in your browser, you will be able to play around by clicking to propel your character by ejecting mass. When developed, this project was meant to serve as an introduction to physics simulation, interactivity, and object-oriented programming.
Twitter's State of the Union: This project was a stripped down implementation of a cute data visualization project done visualizing Obama's 2014 SOTU address with listeners' responses on Twitter, categorized by topic, in a stacked line plot over time. If you clone this repository, follow the instructions laid out in Readme.md about how to open Google Chrome with a special flag, and then open SOTU.html in that way, you should be able to play with this project. This project was meant to be an introduction to data visualization and API usage.
Letterpress: This is another stripped down version of a game built as a gift and demonstration. If you clone the repository and open the index.html file in your browser, you will be able to play the game. When developed, this project was meant to provide a compelling origin story for creating a digital project, provide a structure for building other tile-based games, and a code base on which course participants could riff and tweak.
3D-GIF: This was a project developed to act as an in-browser interface for controlling the The Looking Glass Factory's L3D Cube. If you clone the repository and open the index.html file in your browser, you should be able to play with the interace. When developed, this project was meant to demonstrate how to connect in-browser code with external, physical hardware and, in the process, dabbled in 3D representation and interaction.

Topical introductions from previous terms

In addition to creating sample projects to provide more developed code bases, we have also created a series of introductions and galleries filled with what we like to call "code snippets." These are bits of code which, in a decontextualized way, accomplish a particular effect. Our hope is that these snippets can help to illustrate some fundamental concepts that you can then rework and incorporate into projects of your own design.

An intro to HTML, CSS, and JS: This repository contains a few files which are walked through and built up from scratch in a screencast put together by Alec. In about an hour, you'll draw shapes in your browser, make them move, and begin to get at the boundaries between those three languages. Clone the repository and check out the Youtube link in the Readme.md file to check it out.
A Gallery of HTML, CSS, and JS Effects: This is a small gallery of effects, stripped down and implemented with as few lines of code as possible, meant to provide small sandboxes in which to draw, randomize, animate, and more in the browser. If you clone this repository and then open any of the .html files in your browser and Sublime Text, you will be able to mess around by tweaking and changing the code in Sublime and seeing your effects reflected on the screen.
Object Oriented Gallery: Sometimes, when you need to make many versions of the same thing (e.g. circles or words or etc.) or a custom thing (e.g. Imagine making a version of the game Pacman and wanting each of the ghosts to exhibit the same behavior and appearance) in your code, you'll build programs using a programming approach called Object Orientation. This gallery of scripts draws a collection of circles in progressively more object-oriented ways. Follow the progression laid out in Readme.md to get a sense for what's going on.
Processing.js Intro: Processing is a graphical programming environment meant to make software literacy more accessible within the visual arts community and visual literacy more accessible within technology circles. After being used through a desktop application for a number of years, they developed an in-browser, Javascript version of their environment. This introduction to Processing.js walks you through some of the basic tutorials for using Processing.js.

Code snippets from previous terms

And finally, here is a collection of snippets we've pulled together in response to previous participants' questions and requests. Some of them may be a bit contextual, but many of them will be quite generally applicable, and we may direct you to this list from time to time.