- Email: michael.musick@umontana.edu
- Office: 232 - McGill Hall
- Office Hours: Tuesdays, 10:30AM-Noon; Wednesdays, 2:30PM-4:00PM
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.
- UMT Moodle
- We will be using p5.js, a JavaScript framework. Start by downloading the p5.js editor.
- Kadenze course
- Shiffman Vimeo channel -- no ads
- Shiffman Youtube playlist -- has ads
- Make: Getting Started with p5.js: Making Interactive Graphics in JavaScript and Processing is probably your best bet for now if you are looking for a book.
- If you are interested in some supplemental reading on HTML and CSS, The HTML & CSS book is a nice one.
- p5.js forum
- p5.js tutorials
- Getting Started with p5.js - O'Reilly book
- Intro to Visual Programming with p5.js - online video tutorials (free with signup)
- 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?
- Participating in an open-source community
- What are git and github?
- Git is Awesome
- When should you post to a forum vs. file a github issue?
- Who makes these things?
- p5.js working group mailing list
- Setting up your own GitHub Blog to submit homework
- SourceTree vs GitHub Desktop vs
git
- SourceTree vs GitHub Desktop vs
- Pulling from this GitHub Site
https://github.com/michaelmusick/191_CreativeCoding/
- What are git and github?
- TODO
- Getting started, your first program
- Download Examples
- Drawing with numbers: video tutorial
- Shape and color functions: video tutorial
setup()anddraw()- 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
- 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
- More about Variables
- JS objects (variables inside variables), video tutorial
- random(), video tutorial
- map(), video tutorial
- Simple loading and displaying image
- 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
I may have an orientation session during this class period. Stay tuned for more info...
- Loops (while and for)
- while and for video tutorial
- nested loops video tutorial
- Calling vs. defining
- Modularity: video
- Arguments and parameters
- Re-usability: video
- Return types: video
- Recursion
- Functions inside objects: video
- Optional Readings:
- Work of Art in the Age of Mechanical Reproduction, Walter Benjamin
- Homework: TBA (but something like use a function to draw a design different ways, multiple times. Make a previous sketch modular.)
- Review object literals:
- properties - name/value pairs
- functions inside objects
thiskeyword
- What is an array? video tutorial 6.1
- declaring, intializing
- numeric indices
- arrays and for loops: video tutorial 6.2
lengthproperty
- An array of objects! video tutorial 6.3
- Constructor function! video tutorial 6.4
- Adding and deleting from an array,
push()andsplice()video tutorial. 6.5, video tutorial 6.8 - Multiple JS files video tutorial 6.6
- Clicking on objects video tutorial 6.7
- Checking objects intersecting with other objects video tutorial 6.9, video tutorial 6.10
- loading images for objects video tutorial 6.11
(First week of October)
- Review events -- mousePressed, keyPressed
- Tutorial: Intro to HTML/CSS basics
- Tutorial: Beyond the Canvas, using p5.dom
- DOM elements - p5.dom reference
createP()createButton()createSlider()
- Callbacks
button.mousePressed(callback);
style()-- low key intro to CSS- CSS Reference
- Tutorial: more about data and APIs
- JSON and APIs (and more on callbacks!)
- Word Counting
- Tabular data
- Optional Reading:
- Art and the API, Jer Thorp
- The Anxieties of Big Data, Kate Crawford
- TBA
- p5.sound reference
- Sound
- Live capture
- Michael geeks out in his favorite land
(Halloween)
- Video/capture: p5.MediaElement reference
- Movie playback
- Video Assignment
(November)
- Possible topics for Final Projects
(Election Week, Michael may also need to be out of the state)
- Workflow and process, get a previous sketch running on a device
- Touch interaction
- Sensors
- More mobile examples from Jia
- p5 mobile workflows by Jia
- Using the viewport meta tag to control layout on mobile browsers
- Hammer.js
- Homework: Prepare a final project proposal.
- Present and receive feedback on final project proposals.
- EXAM
- Life beyond p5.js
- Take Creative Coding into the spring semester courses
- Other JS libraries?
- Coding outside the p5 IDE? (local server tutorial)
- local server tutorial
- More HTML/CSS
- What is server side programming for?
- Processing
- Open source
- How do artists make and adapt tools for themselves and their communities, like Processing, p5.js, openFrameworks, etc?
- How do you get involved with this?
(December)
- This week you will "user test" your project with fellow classmates. You must have some implementation that you can test completed by this time. User testing can mean different things for different projects. For a game, it can mean that the user tries to play it. For an art piece, it could mean showing it to a classmate and asking for them to say what they think it is about or how it made them feel. We'll show projects in a "one on one" / round robin / speed dating-style session. 5 minutes then switch. You cannot not explain your project, just show and let the user try it and give you feedback. Then you can answer questions. User testing schedule will be provided on a wiki.
(The last day of class)
- Please add your link to your final project documentation on the wiki.
- "Practice is the best of all instructors." - computation requires practice
- "An agreeable companion on a journey is as good as a carriage." - look to your classmates for help too
- "While we stop to think, we often miss our opportunity." - sometimes you need to take a leap of faith
- "When two do the same thing, it is not the same thing after all." - encourage students with similar ideas
- "The bow too tensely strung is easily broken." - don't get too stressed out
- All of these are from Plubius Syrus.(42 B.C.)
##Evaluation
We will have weekly assignments that are relevant to material from the previous class. These assignments are required and you should be prepared to show/talk about them in class. It is expected that everyone in the class will create and maintain a blog for their assignments.
Attendance is mandatory. Please inform your teacher via email if you are going to miss a class. Two unexcused absences is cause for failing the class. (An unexcused lateness of 10 minutes or more is equivalent to 1/2 an absence.)
This class will be participatory, you are expected to participate in discussions and give feedback to other students both in class and participate with their projects. This (along with attendance) is 40% of your grade.
Class will culminate with final projects. You are expected to push your abilities to produce something that utilizes what you have learned in the class that is useful in some manner to yourself or the world. This will comprise 20% of your grade. Grades will be based primarily on the student’s ability to:
- Demonstrate an understanding of the specific characteristics and integrative capabilities of the assigned topic in your own words and code.
- Articulate a clear and concise perspective. Cutting and pasting or copying word for word off the Internet will result in loss of points.
- Present an organized file/program, as well as blog entry; including proper and punctual delivery of the assignment files.
- Demonstrate creativity beyond the expected technical requirements.
IMPORTANT: Assignments handed in after the due date and time will have points deducted for lateness. This will be in addition to any points deducted for content. Those that are uploaded late but within one week of the due date will lose 1 point for lateness. For those uploaded after that, the number of deducted points will be at the discretion of the faculty.
### Grade Break Down Grades will be determined according to the following breakdown:
- Regular Assignments 50%
- Participation and Attendance 20%
- Exam 10%
- Final Project 20%
Letter Break Downs
- A 95-100
- A- 90-94
- B+ 86-89
- B 83-85
- B- 80-82
- C+ 76-79
- C 73-75
- C- 70-72
- D 60-69
- F 0-59
All students must practice academic honesty. Academic misconduct is subject to an academic penalty by the course instructor and/or disciplinary sanction by the University. All students need to be familiar with the Student Conduct Code. The Code is available online at http://www.umt.edu/vpsa/policies/student_conduct.php
I reserve the right to change the intended content of this course throughout the semester. This may be done to adjust for the speed of the class, to better meet educational goals, or to account for changes in technology.
This course is modeled off of NYU ITP's Intro to Computational Media Course. https://github.com/ITPNYU/ICM-2015.