MART 191 - Creative Coding | Spring 2017

Professor Michael Musick

E-Mail: michael.musick@umontana.edu.
Office: McGill Hall, 224.
Office Hours:
- Wed, 12:30PM - 2:00PM (please e-mail to confirm)
- Thu, 12:30PM - 2:00PM (please e-mail to confirm)

COURSE OVERVIEW

The goal for this course is to begin a journey in which the creative and technical possibilities of the computer becomes an tool in your palate. The goal for this tool, or rather set of tools, is for them to become an extension of you, something you think through, express yourself through, and can contribute to the world through. Ultimately, this course is designed to offer you a deeper understanding of the essential possibilities of computation. The course focuses on the fundamentals of programming the computer (variables, conditionals, iteration, functions, and objects) while also touching on a few advanced topics, and relating this all back to the creative and expressive possibilities of media art. The JavaScript-based 'p5.js' programming framework will be utilized within this class. The course will conclude, with your design, development, and implementation of a final project of your choosing.

For additional info about the class, as well as official policies, please see the Syllabus
Class Discussion Forum via GitHub Repo Issues
Homework Wiki (OR, click the "wiki tab" up above.)
Coding & P5.js Resources to help with your semester

Final Presentations

Final Presentations will occur during our University scheduled final time.

Monday, May 8th from 10:10AM - 12:10PM.

For examples of what was done during Fall 2016, visit;

Final Project Ideas

Weekly Breakdown

Check here for what we have done, or are going to be doing.

1.1 — Introduction

Overview of the syllabus.
What is computational media?
- What is programming?
- How can I apply programming to _____________?
- As a ____________, why would I want or need to write software?
- Example projects.
Programming language discussion
- General discussion of programming languages
- History of creative coding frameworks
  - Processing and p5.js (and what's processing.js?): What is p5.js video
  - openframeworks, cinder
  - max/msp dataflow programming
  - How does arduino fit in?
p5.js in the context of the browser
- Landscape of HTML, CSS, and JavaScript
- Other JS frameworks
- Server-side vs. client-side
- What is the difference between p5 and JavaScript?
macOS & Windows
- Terminal vs PowerShell
- Differences in Git
- Why it does not matter.
Your computer as YOUR development environment.
- Command Line
- Directory Structure
- Not fearing the command line
**TODO: ** Look at and complete HW-1 in the homework wiki.

1.2 — Necessary Technologies

Text Documents
Text Editors
Git Version Control
TODO:
- if you haven't already done so, please complete the homework from the first class. HW-1 in the homework wiki.
- Please watch the GitHub links from this weeks course document.

2.1 - Necessary Technologies (con't)

More with Git and GitHub
- Git via terminal
- Git via a text editor
- Git via Sourcetree

2.2 - Necessary Technologies (con't)

Finish up Git / GitHub.com
markdown (.md)
Setting up your own GitHub Repo to submit homework
- SourceTree vs GitHub Desktop vs git
- Pulling from this GitHub Site https://github.com/Montana-Media-Arts/191_CreativeCoding/
TODO
- *Go to the HW Wiki-

3.1 & 3.2 -- "Hello World" & Drawing

Discussion Participating in an open-source community
When should you post to a forum vs. file a github issue?
Who makes these things?
Getting started, your first program
- Download Examples
- Drawing with numbers: video tutorial
- Shape and color functions: video tutorial
- setup() and draw()
- Downloading p5.js
- Start by downloading the p5.js editor.
- p5.js reference
Uploading your sketch !!! ADD SOMETHING
Adding your response as a markdown file
Optional viewing / reading:
- Casey Reas Eyeo 2012 talk on Chance Operations
- Introductory p5.js videos
- FORM+CODE: Introduction and What is Code?
- As We May Think, Vannevar Bush
- Long Live the Web, Tim Berners-Lee

4 -- The Basics; function() and variables. Animation.

Program flow (what's a function?)
- Setup, draw, and other events
- Variation: mouseX and mouseY
- video tutorial
Variables
- make your own variables (numbers and strings), video tutorial
map(), video tutorial

5 -- Random, Objects, and Reviewing Math

JS objects (variables inside variables), video tutorial
random(), video tutorial
Math
- Add/Subtract
- Multiply/Divide
- Square/Square Root
- Modulo

6 -- Conditional Statements

Conditional Statements
- Boolean expressions
- if statement
- relational operators
- video tutorial
- Case study, bouncing ball: video tutorial
- else, else if, and, or video tutorial
- buttons, rollovers, switches video tutorial
Loops (while and for)
- while and for video tutorial
- nested loops video tutorial

7.1 -- Functions: the basics

Calling vs. defining
Modularity: video
Arguments and parameters
Re-usability: video
Return types: video
Recursion
Functions inside objects: video

7.2 -- Functions: the hard stuff

Re-usability: video
Return types: video
Recursion
Functions inside objects: video

8 -- More With Functions, Objects, and Arrays

Review object literals:
- properties - name/value pairs
- functions inside objects
- this keyword
What is an array? video tutorial 6.1
- declaring, intializing
- numeric indices
- arrays and for loops: video tutorial 6.2
- length property

9 -- Objects and Lots o' Objects

An array of objects! video tutorial 6.3
Constructor function! video tutorial 6.4
Adding and deleting from an array, push() and splice() video tutorial. 6.5, video tutorial 6.8
Multiple JS files video tutorial 6.6

10 More with Objects and Object Interactions

Clicking on objects video tutorial 6.7
Checking objects intersecting with other objects video tutorial 6.9, video tutorial 6.10

michaelmusick/191_CreativeCoding