August 31

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

We’ll be using p5js, a version of Processing, an arts-centered programming language. p5js runs in Javascript which allows us to create creative applications which run directly in any web browser. This will make it really easy to design and exhibit your creations to the largest audience in the world… The Internet!  

P5js can be downloaded here! For the quickest setup experience go to the download page and download the p5js editor for your respective Operating System.

Within the IDE, as well as on the p5js website you can find a number of examples to help you get more familiar with p5 and Javascript. To find these examples in the editor, go to File -> Examples.

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!

Programming languages work with a set of predefined rules and have a strict syntax. This is much different than what many of you may be used to within your artistic practices. We quickly explored a few formal elements of javascript in class.


  • 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.
  • sketch.js – .js files are the Javascript program files which we are manipulating. Be careful: you can rename sketch.js, but if you do you also have to change the reference in index.html.

Javascript is great because it’s very easy to share over the web. You’ll be posting things on the class website and allow others to see them online in real time!

  • The class website (
    • 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.
  • As you become more proficient at coding, you may want to try and use a separate text editor other than the p5.js IDE. It’s a little more complicated, but some great ones to use that are free, open source, or have free trials are:
    • Bluefish
    • Komodo Edit
    • Vi
    • emacs
    • Sublime
  • You can create a new p5.js sketch, and open the “sketch.js” file in the Text Editor of your choice. You can then open your index.html file in the browser of your choosing in order to run the sketch.
  • For more info, check out the p5.js website’s guide:

  • 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:
      • ellipse()
      • rect()
      • triangle()
      • point()
      • line()
    • You can change the color of objects on screen using functions like fill(), background() and stroke(). Try them out!
    • Check the reference for more:
    • Every week you’ll be receiving a few deliverables which consist of a few different types of tasks:
      • Assignments
        • 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.
      • Projects
        • 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
    • Labs
      • 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 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.

    Here’s to a great semester!