15-104 Lecture 1 Notes, 8/31/15
Prof. Roger Dannenberg
Hello! Welcome to 15-104, Computation for Creative Practices. The entire staff is really excited to have you!
“This course is an introduction to fundamental computing principles and programming techniques for creative cultural practitioners, with special consideration to applications in the visual arts, music, and design.”
I grabbed this quick description from our course website. We’ll go into the various parts of the website in a bit more detail down below.
Programming Language and Tools
In class, we experimented with the “sinewave” example. Feel free to mess around with any of the variables in this file and watch the sketch change as you rerun it!
- Punctuation – Punctuation performs a similar function in both code and regular english: separating language into more understandable chunks. For example, the semicolon (;) separates lines of code the way a full stop separates sentences.
- Comments – Comments, identified using the punctuation // or /* and */ are pieces of text that the program ignores at runtime. You can use these to leave notes for yourself or to help explain your code should anybody else look at it.
- Functions – Functions are pieces of code that can be called using a keyword. createCanvas(), background(), and ellipse()are all functions! Functions are powerful because they let you perform complex tasks multiple times, each requiring only a single line of code. You can also define functions in-sketch. Every p5 sketch.js defines 2 functions that it needs and calls for you: setup() and draw(). For now, these are the only ones you need, but you’ll learn more about making custom functions later.
Getting your Sketch to “Work”
Programming for the web often requires the use of many different files that work together to display your project. p5.js requires the use of .html files and .js files, but you can also use media such as images and audio. When we create a new sketch in p5, our sketch folder contains a few files:
- index.html – .html files are the backbone of web programming. Ours is very simple: it tells the browser to run a .js file.
- The class website (cmuems.com/2015c)
- The class site is shared with a section of the course taught by Golan Levin. Some things on this site are only applicable for 60212 students and will be noted as such.
- Posting to the Website – You should all have a WordPress account you use to post to the site. Log in and hit Add Post button in the dashboard
- Set the title of your post.
- Set the content of your post
- Content can include words, images and entire p5.js sketches!
- To add p5.js sketches, Click “Add Media”, find your uploaded .js file, and you’ll see an html tag that starts “<a href=”. change this to “<a class= “p5-embed” data-width=x data-height=y href=” where x and y are the width and height of your sketch as defined by createCanvas().
- Set the Categories to your appropriate section and homework assignment.
- Komodo Edit
Getting Started With This Week’s Assignments
For the coding section of Thursday’s assignment, all you will need to do is insert commands into setup().
- Commands can be anything from assigning variables to calling functions.
- When your sketch runs, each command in setup() is executed before the output is displayed.
- To change the size of your “canvas” you’ll need to call the createCanvas() function. This is one of the most important and widely use functions so be sure to read the p5.js reference documents on it!
- There are many primitive graphics functions which allow you to draw many primitive shapes like rectangles and ellipses. Here’s a short list of some of the most common that’ll come in handy for this week’s assignment:
- You can change the color of objects on screen using functions like fill(), background() and stroke(). Try them out!
- Check the reference for more: http://p5js.org/reference/
- Every week you’ll be receiving a few deliverables which consist of a few different types of tasks:
- These are fairly structured tasks designed to test your coding skills. An example of this type of tasks is reproducing an image or simple audiovisual output.
- These are much more open ended coding tasks, allowing you to give a personal touch to your work. These will be posted online.
- Looking Outwards
- These consist of finding and examining examples of art and programming in the wider world. You’ll be making blog posts to share your discoveries with the rest of the class
- In the Labs we’ll be going over the material from the lectures, but more importantly they give you a chance to work on your deliverables in an environment where you have access to a TA and your fellow classmates.
- NOTE: in a few labs you’ll be having quizzes, and those will be structured differently based on that fact.
- Autolab and grading
- Some of your coding tasks will be submitted to Autolab, CMU’s online CS course management system. Log in with your CMU account and you should find a links where you can submit your homeworks.
- Your Autolab assignments will be submitted as .zip files. These are made by selecting a folder containing your code, and compressing it.
Questions, Comments and Concerns
For homework help a few great resources are:
- Piazza – Make sure to check your emails for your Piazza sign up link. Piazza is a great place to pose questions to the course staff as well as to your fellow classmates. You should always attempt to make your questions as specific as possible. Questions like “Why doesn’t this work?” are too vague for the staff to effectively answer. Our piazza response times are usually fairly quick during reasonable hours (Usually 12:00pm to 9:00pm) but feel free to post at any time.
- Office Hours – We’ll soon be releasing an official office hours schedule. For those of you not familiar, office hours are a time where you can meet with a Teaching Assistant in person, ask us questions, and get some great small group instruction.
- p5js Reference – Go to http://p5js.org/reference/ for in depth explanations of how functions work, examples, and tutorials. Feel free to use these resources to the fullest extent.
Personnel & Personal
- Course Staff – Feel free to contact the course staff for pressing matters that are impacting your ability to complete assignments.
- Roger Dannenberg (firstname.lastname@example.org)
- Golan Levin (Golan@andrew.cmu.edu)
- Teaching Assistants:
Here’s to a great semester!