Andrew Cotter, Teaching

Appearance

On this page

< Back

Class: Creative Coding | DM-GY 6063 B

Term: Fall 2022

Instructor: Andrew Cotter

Class Time: Mondays, 6:30PM - 9:20PM

Welcome to Creative Coding!

Course Description

This course is an introductory programming class, appropriate for students with no prior programming experience. Traditionally, introductory programming teaches algorithmic problem-solving, where a sequence of instructions describe the steps necessary to achieve a desired result. In this course, students are trained to go beyond this sequential thinking – to think concurrently and modularly. By its end, students are empowered to write and read code for event-driven, object-oriented, graphical user interfaces.

Prerequisites

This class assumes a high degree of computer literacy, but not a high degree of programming ability. We will be learning computer programming in a platform-generic way, however all examples will be demonstrated in Javascript using the library p5.js (p5js.org). Having previous coding experience in Javascript, Java, C++, or Python is a plus, but not a must.

Important Dates

  • First day of classes : Thurs, Sept 1
  • No classes (Labor Day) : Mon, Sept 5
  • Add/Drop ends : Wed, Sept 14
  • Fall break no classes: Mon, Oct 10
  • Classes meet on Monday schedule (no Tuesday classes) : Tues, Oct 11
  • Midterm grades due (undergrads only): Thurs, Nov 3
  • Fall break no classes: Wed, Nov 23 - Fri, Nov 25
  • Last day to withdraw with a ‘W’ : Mon, Dec 5
  • Last day of classes : Wed, Dec 14
  • IDM Showcase : Thurs, Dec 15
  • Final grades due no later than Dec 22

Course Objectives

In this course students will:

  • develop conceptual thinking skills to generate ideas and content in order to solve problems or create opportunities.
  • develop technical skills to realize their ideas.
  • develop critical thinking skills that will allow them to analyze and position their work within cultural, historic, aesthetic, economic, and technological contexts.
  • gain knowledge of professional practices and organizations by developing their verbal, visual, and written communication for documentation and presentation, exhibition and promotion, networking, and career preparation.
  • develop collaboration skills to actively and effectively work in a team or group.

Program Objectives

  1. At a graduate level, students will develop conceptual thinking skills to generate ideas and content in order to solve problems or create opportunities.
    • Students will develop a research and studio practice through inquiry and iteration.
  2. At a graduate level, students will develop technical skills to realize their ideas.
    • Students will understand and utilize tools and technology, while adapting to constantly changing technological paradigms by learning how to learn.
    • Students will be able to integrate/interface different technologies within a technological ecosystem.

Course Structure

Our section of Creative Coding will be meeting in person, once per week. Technical Lectures will be provided. Students will also have access to class slides and whiteboard notes, as well as additional technical video content on specific subjects.

You will have homework and project assignments based on the material covered in class. These assignments will have specific prerequisites, but as the semester goes on will allow for greater and greater flexibility. You will be expected to present your completed work to the class on a weekly basis, demonstrate it’s functionality, and receive critiques of the work. You will also be expected to engage with and provide critique on the work of your classmates.

Required Material

Please be prepared with the following material for the course.

Software

  • A text editor - I recommend VSCode as this is the text editor I will use in class, but any similar application like Atom or Brackets should be acceptable.
  • The Arduino IDE
  • An online account for the p5.js Online Editor

Drawing and Sketching

  • For each of your assignments, you will be expected to sketch ideas, prototypes, and experimental interfaces for your work. You’ll need some type of physical or digital drawing elements (Pencil/Paper, or a Digital Tablet).

Suggested Resources

Readings

There are no required books for class. Readings will be distributed as PDFs. Some relevant titles that you may want to look into include :

Media Feeds

Weekly, you’ll be asked to create a “Looking Outwards” assignment where you review a digital work. Here is a selection of media feeds where you might find an example to review.

Policies

Absences

Students are expected to attend all lectures for the course. You must notify me prior to the lecture if you are unable to attend. If you miss a lecture, without notifying me, this will count as an unexcused absence.

Students will be expected to make up any missed work from an excused or unexcused absence.

Tardiness

If you are more than 5 minutes late to a lecture, you will be considered tardy. Every two tardy marks, will equate to one unexcused absence.

Unexcused Absences

Two unexcused absences will result in a drop of one full letter grade. (An “A” becomes a “B”). Three unexcused absences will result in the drop of two full letter grades. (An “A” becomes a “C”). Four or more unexcused absences will result in an automatic failure of the course.

Academic Integrity

Plagiarism

In programming, it is often difficult to strictly define “plagiarism”. In this course, we’ll be using a number of different open source, copyable, editable, code resources created by others. You will be expected to cite all code contributions which you have not written yourself, or are directly inspired by another source. This includes recreations of artworks, digital media completed assignments, and the work of your peers.

It’s extremely important to cite any tutorials, examples, or inspiration that you use for your homework. I am less strict about proper MLA formatting as long as the creator and a link to their work is included. If you choose to use a library, tutorial, or a snippet of code to figure out a specific technical implementation that is a small part of your idea for the assignment and cite that resource in your class blog and in comments in your source code, you should be in the clear. If, however, you are using a tutorial or existing code as the template for your assignment, things can get murky very quickly.

Things to watch out for: It sometimes happens that an artist or developer places the entire source code for their sketch, app, or artwork online, as a resource for others to borrow and learn from. The assignments professors give in new-media arts courses are often similar; you may discover the work of a student in some other class or school, who has posted code for a project which responds to a similar assignment. You should probably avoid this code. At the very least, you should be very, very careful about approaching such code for possible re-use.

If it is necessary to do so, it is best to extract components that solve a specific technical problem, rather than those parts which operate to create a unique experience. Your objective, if and/or when you work with others’ code, is to make it your own. Simply taking an artwork from someone’s page on GitHub, Glitch, OpenProcessing, etc., and just changing the colors would be lazy. Doing so without proper citation would be plagiarism. If you don't know how the code you're reusing works, that can be a red flag to re-consider whether or not to use the code in the first place. If you do know how the code works, it's a healthy exercise to try re-implementing it on your own without copying to try avoiding this grey area.

Collaborations

Collaborations must be approved prior to work being submitted. If you’d like to create work with another individual, you must propose this collaboration prior to starting work on your assignment. You must also describe how both individuals will contribute to the project. Other students can absolutely assist you with your work, but they should not be writing code for you. A good test is if you are writing the code yourself and FULLY understand how the code you are using works.

It is categorically forbidden to copy code from another source without citing it, to “receive help” from another student in the form of copied or directly provided code, or to present a work that you have not created as your own. This includes paying another individual to create work for you.

Ask First

If you have a question as to whether or not the work you are attempting to submit is plagiarism, ask first, do not submit first. I am happy to discuss the nuances in detail.

Logistics

Assignments

You will be expected to create a class blog and create a post for each assignment completed. Assignments will have various expectations, including photo and video documentation of your work, photos of sketches and preparatory materials, and links to functioning projects / code used to create those projects.

Code

Most assignments will be submitted using a combination of the p5.js online editor and Github.

Class Communication

Email

Assignment and lecture updates may be posted by email to your NYU Emails.

Slack

Questions, comments, assignment, and lecture updates may also be posted to a classroom slack channel. Please stay tuned for more details.

Office Hours

Weekly

Each week, I’ll aim to have at least 2 hours of open time where anyone can jump into a video channel and ask questions. This can be used for help with assignments, or review. Attending these office hours with questions is very helpful, but not required. You should ensure that you have reviewed the weeks asynchronous material prior to joining the office hours however so that we can make the most of our time!

By Request

If you are unable to attend the stated office hours, you may request additional help. Send me a message and we’ll work out additional times that work best!

Grading

Breakdown

Weekly Assignments: 25% Looking Outwards Responses: 10% Midterm Project: 20% Final Project: 35% Class Participation: 10%

Midterm Project

Your midterm project is designed to demonstrate competency in the core programming skills addressed by the course. In this section, you will also be expected to add a personal touch to your midterm project. More details to come towards the middle of the semester.

Final Project

Your final project will be a self directed exploration of creative coding concepts and techniques. You will be expected to design, prototype, and execute a functioning project that deeply explores various new media techniques, demonstrates mastery of several skills, and stands on its own as a compelling work. More details to come toward the end of the semester.

Weekly Assignments

Each week, you’ll be expected to create at least one software sketch that demonstrates core programming concepts and/or creative coding techniques. You’ll be expected to document your work, any problems you encountered, and any questions you have. We will spend time in class reviewing these assignments, and the concepts covered.

Additionally, there may be weekly readings, accompanying videos, and “Looking Outwards” assignments which require you to find work related to the concepts we are discussing on a weekly basis.

Late Work

You must submit your work by the assigned due date. You will lose a letter grade for any work that is submitted up to 1 day after the deadline. Any work submitted after over 24 hours late will receive an automatic failure, unless you have an excused assignment, or assignment extension granted by the professor.

Documentation

Documentation is expected to cover both the work itself, and your process of creating the work. Each assignment will be accompanied by an online blog post showing the final work, in progress sketches, photos, and videos, and commentary on your process. You absolutely should be documententing your work as you go. For interactive projects, you’ll be expected to have a section of your documentation that describes how your project works, and how someone might use it.

Do not save this until the last minute. Document as you go. Some assignments may ask for specific documentation elements. The quality of your documentation will impact your final assignment grade, so make sure that text, photos, and video documentation are of decent quality.

Critique and Review

The work we create weekly will be reviewed and critiqued by your classmates. These critiques should be seen as an opportunity for constructive feedback to be provided and received on all aspects of the work we create. This process may be done both over video chat, and through asynchronous comments on your work, and will contribute to your final class participation score.

Academic Accommodations

If you are a student with a disability who is requesting accommodations, please contact New York University’s Moses Center for Students with Disabilities at 212-998-4980 or mosescsd@nyu.edu. You must be registered with CSD to receive accommodations. Information about the Moses Center can be found at http://www.nyu.edu/csd. The Moses Center is located at 726 Broadway on the 2nd floor.

Semester Schedule

Below you will find a list of weekly topics. Examples and other information will be sent to the class via Slack. Note: This schedule is likely to change as the semester continues.

Week 1 Wednesday Sept. 12th

Content

  • Syllabus Review
  • Class Introductions
  • Lecture / Discussion Topics: What is "Creative Coding"?
    • Pixels on a screen - the coordinate system
    • Setting up a local dev environment p5.js online editor
    • Drawing with p5.js
    • Brief intro to color

Assignments Due: 9/19 by 12PM ET

  • Watch videos on variables and conditionals.
  • Create an online blog for the class and post the link on the class Slack channel.
  • Create a Selfie or a Sol Lewitt project and post a link to it on your blog.
  • Read Delusions of Dialogue: Control and Choice in Interactive Art by Jim Campbell. Access provided online by NYU library. Write a 150 - 200 word response to this on your blog. What do you think of Campbell’s articulation of art in a computer?
  • Read pages 10-41 ‘What is Code’ and ‘From and Computers’ in FORM+CODE available online though NYU Libraries.
  • (Optionally) Read Getting Started With p5.js Chapters 1-3. Online access provided by NYU libraries.

Week 2: September 19th

Content

Assignments Due: 9/26 by 12PM ET

  • Watch videos on loops [1] [2] and functions [1] [2].

  • (Optionally) Watch video on translation [1] [2] [3].

  • Create an Animation project.

  • Read p5.js Tutorial on interaction, in particular pay attention to the section on Events. The aspects in the article that describe mouseOver() and mouseOut() are our of scope for our discussion at the moment, so don’t worry if you don’t entirely get what it’s describing.

  • Read The Art of Interactive Design Chapter 1. Online access provided by NYU libraries. Write a response to this on your blog - Crawford defines interaction as something that can happen along a continuum, from a simple switch to a deep and engaging conversation. How do you define interaction? Would you consider a book to be interactive? What about a plant you need to care for? How about a puppy? What about your sketches?

  • (Optionally) Read Getting Started With p5.js Chapters 4-6. Online access provided by NYU libraries.

Week 3: September 26th

Content

  • Discuss The Art of Interactive Design Chapter 1.
  • Review Animation project.
  • Q&A time.
  • Lecture / Discussion Topics:
    • Object Oriented Programming (OOP)

Assignments Due: 10/3 by 12PM ET

  • Watch videos on objects and arrays.
  • Read Objects of Our Affection : How Object Orientation Made Computers a Medium by Casey Alt. Online access provided by NYU libraries. It’s a denser read than the other things we have engaged with so far, so give yourself some extra time. Write a response to Alt’s chapter. He argues that computers became “media” and were no longer just big adding machines when data and interface became rolled into one. With your newfound perspective on what object oriented programming is thanks to the videos above, how do you think this changed computation? What does this provide you? How can you see this being useful?
  • (Optionally) Read Getting Started With p5.js Chapters 10 & 11. Online access provided by NYU libraries.
  • Create a Dance Party with objects.

Week 4: October 3rd

Content

  • Discuss Objects of Our Affection : How Object Orientsation Made Computers a Meduim
  • Review Dance Party project.
  • Q&A time.
  • Lecture / Discussion Topics:
    • Organizing your code into multiple files
    • Pseudocode

Assignments Due: 10/11 by 12PM ET

  • Watch videos on debugging, objects talking with other objects, more about arrays.
  • Read the p5js guide on debugging.
  • Create an Interaction project.

Week 5: October 11th

October 10th, Fall Break - No Classes on Classes meet on Monday schedule (no Tuesday classes) : Tues, Oct 11 Content

  • Reviewing “One Button Interaction”
  • Using Time in Our Sketches ○ day(), hour(), minute(), millis(), month(), second(), year()
  • Javascript Date Object
  • Introduction to Midterm

Assignments Due: 10/17 by 12PM ET

  • Watch this video on working with APIs and JSON
  • Read Birds and The Fine Art of Noticing by Jer Thorp and reflect on how you can use data from an API to tell a story or be persuasive.
  • (Optionally) Read Getting Started With p5.js Chapter 12 on Data. Online access provided by NYU libraries.
  • Create a Data project
  • Write a proposal for your midterm project. This includes a narrative description and a high level pseudocode explainer. Add sketches, gifs, and images as appropriate. Identify where you expect to run into trouble, or where you think you will have a gap in your knowledge.

Week 6: October 17th

Content

  • Review Data project.
  • Q&A time.
  • Lecture / Discussion Topics:
    • Working with libraries
  • Discuss midterm project proposals.

Assignments Due: 10/24 by 12PM ET

  • Watch videos on the DOM and the sound library.
  • (Optionally) Read/watch tutorials on the scribble and/or RiTa libraries.
  • Create a sketch using a JavaScript Library. (here's a bunch that play nice with p5js)
  • Continue to work on your midterm. You should have progressed to a point where you have a skeleton that has some basic functionality. You've fully outlined out as pseudocode/comments what functions, classes and objects you will need and what they will do.

Week 7: October 24th

Content

  • Review JavaScript Library sketch.
  • Q&A time.
  • Midterm workshop.

Assignments Due: 10/31 by 12PM ET

  • Watch video on image manipulation.
  • Read these notes on video and image manipulation.
  • Finish your midterm project. Write a post about your work, describing what you did and why you did it. Take a step back and refelct on what you would have done differently (if anything!) and the challenges you faced/overcame - this could be conceptual, technical, or aesthetic. Explain how you might continue to work on this project if you had the time and motivation to do so. Remember, your project must have the following elements : 1) pseudocode of what you set out to do, 2) well commented code that explains what functions, classes, and objects are doing in your program 3) clear attribution with links to other’s code as appropriate.

Week 8: October 31st

Content

  • Midterm presentations:
    • Everyone will have 5 minutes to present their work. Show what you did, share the link in the chat, and describe your process. What did you learn from this exercise?

Assignments Due: 11/7 by 12PM ET

Week 9: November 7th

Content

  • Review switches.
  • Q&A time.
  • Lecture / Discussion Topics:
    • Using a multimeter
    • Switches

Assignments Due: 11/14 by 12PM ET

Week 10: November 14th

Content

  • Review feedback systems.
  • Q&A time.

Assignments Due: 11/21 by 12PM ET

Week 11: November 21st

Content

  • Review love machines.
  • Q&A time.
  • Discuss Final Project
  • Lecture / Discussion Topics:
    • Serial communication

Assignments Due: 11/28 by 12PM ET

  • Watch the video on serial communication.
  • (Optionally) Watch the video on Bluetooth communication.
  • Build a sketch with a physical interface.
  • Write a proposal for your final project. This includes a narrative description and a high level pseudocode explainer. Add sketches, gifs, and images as appropriate. Identify where you expect to run into trouble, or where you think you will have a gap in your knowledge.

Week 12: November 28th

Content

  • Review sketch with a physical interface.
  • Q&A time.
  • Review final project proposals.

Assignments Due: 12/5 by 12PM ET

  • Start working on your final project. Write up a block diagram or pseudocode of your project. Think about all the materials, libraries or code you will need. Start the implementation of your projects!

Week 13: December 5th

Content

  • Final Project workshop.

Assignments Due: 12/12 by 12PM ET

  • Keep working on your final project. Make sure to do user testing as you keep prototyping.

Week 14: December 12th

Content

  • Final project presentations

Assignments

Due: 12/15 by 12PM ET

  • Finalize your final project based on feedback.
  • On your blog, document your final project. This sould include sketches, links to code or the project itself, video, images, etc. Write a description of the process you took to make it. What influenced you? What were you trying to convey with your work? Did you rely on the work of others? be sure to link to those resources and describe how you used them. What would you have done differently if you knew then what you know now? What woudl you do if you had more time to to work on this?

Projects

Week 1: Selfie or Sol

Create one of the following and post a link to the sketch on your website:

Selfie - Using primitives like arcs, rectangles, and ellipses create a self portrait and post a link to it on your class blog

Sol Lewitt drawing exercise. As precisely as possible, follow the instructions of one Sol Lewitt wall drawing text and translate it into p5.js code to produce the drawing. Look at Solving Sol as a reference and for inspiration. Choose one wall drawing text from the following list, write the code and post a link to the project on your class blog:

Wall Drawing #65 (1971): Lines not short, not straight, crossing and touching, drawn at random, using four colors, uniformly dispersed with maximum density, covering the entire surface of the wall.

Wall Drawing #396 (1983): A black five-pointed star, a yellow six-pointed star, a red seven- pointed star, and a blue eight-pointed star, drawn in color and India ink washes.

Wall Drawing #915 (1999): Arcs, circle, and irregular bands.

Week 2: Animation

Create one of the following and post a link to the sketch on your website:

  • Make a clock with p5js. Functions like second(), hour() and minute() are useful here! The clock can be analogous to a real-world clock or it could be an abstract way of telling time
  • Using your mouse and a simple shape (rect, ellipse, arc, triangle, line, polygon), create an interaction that causes the shape to demonstrate an emotion. It could be fear, attraction, desire, exhaustion. Your choice. Obviously mouseX and mouseY are helpful. Examples like this easing function might be inspirational, as would notes from the 12 principles of animation

Week 3: Dance Party

Watch the video for Around the World by Daft Punk. While you’re enjoying the music, think about how each of the different dancers/monsters in the video are like an object. They are similar, but have their own behaviors. Create a sketch that has a dance party. Use multiple instances of a class, or create multiple classes and many objects thsat have their own dance party. Your idea of a dance party may not have actual bodies, that’s ok. Explore different kinds of ways of creating objects with unique behaviors. Post this on your class site.

Week 4: Interaction

Create a sketch that adds objects based on interaction (mouse press, keystroke, etc) that interact with each other (collision, repulsion, etc.) or create a sketch that makes faces which have multiple dimensions of variability (skin color, eyes, ears, mouth, hair, age, etc). A new face should be created every time you click the mouse. For either example, write the sketch as pseudo-code first, then fill in your code afterwards.

Week 5: Data

Create a sketch that calls an API, processes the data, and visualizes it somehow. A non-exhaistive list of publicly available APIs can be found here

Week 6: Library

Create a small sketch that uses a library to enhance a sketch. For example, use the DOM to create sliders or buttons for interfaces, use peasycam to navigate a 3D space, use p5.scribble to mimic hand drawn images, etc etc etc.

Midterm

Your midterm assignment is designed to demonstrate competency in the fundamentals of object oriented programming. We will discuss the specifics of this a few weeks before it is due. You will make your own interactive, screen based artwork. Your sketch needs to contain at least 2 objects (they can be from the same class) that behave independently from one another. Taking into consideration responsiveness, accessibility, and aesthetics there should be some form of interaction for your audience. This could be through keypresses, mouse movements, GUI objects, etc. You should feel free to use APIs libraries or any other thing we ave discussed in class to date. Your code must be clearly and thoroughly commented throughout - indicating what is your original contribution and what you have gotten from elsewhere.

Week 8: Switch

Build a circuit with a switch you make on your own that can be operated without using your hands. Think about what you have that is conductive. Aluminum foil works well. Be careful you do not cause a short! Always unplug your Arduino before changing anything in your circuit, and check to make sure there are no loose wires.

Week 9: Feedback

With the switch you built last week (or a different one if you want to experiment) use the Arduino to provide some meaningful feedback on what the action you engage in means. For example — if you are trying to notify someone that their posture is good or bad, could you make a switch that was based on how they stood, and notify them if they are not straight? What about gettting someone to smile for a camera? Using the digital input and output provide feedback to your user that is meaningful in context. Labeling LEDs with text, or using different colored lights to indicate things is helpful, try diffusing the light with paper or a ping pong ball, how does that change the quality of the light?

Week 10: Love Compatibility Machine

Make a love compatibility machine. Using analog input and/or analog output, make a love compatibility machine. This could be 2 photocells that have an LED as an output, or a pair of buttons that engage a servo motor, or one photocell that people need to clasp hands over, or anything else that demonstrates how to display how compatible people are.

Week 11: Sketch with Physical Interface

Build a sketch with a physical interface - take one of your early p5 sketches and make it controllable with a switch, pot or photocell using serial or Bluetooth communication. Alternatively, create a new p5 sketch that reacts to some sort of input. How does this change in control transform the experience of using the sketch?

Final

Your final project is wide open. This is your opportunity to create work that leverages the various tools, techniques and ideas we have explored throughout the semester. This includes interaction, data, design, computer vision, interfaces, games, or any number of alternative forms of expression. You should create work that is engaging and compelling for your audience. Use this as an excuse to ask a question using computation, or to scratch an itch you’ve always wanted to explore. We will spend several weeks at the end of the semester working through your ideas on these projects.

The sooner you start to think about and articulate your ideas for projects, the easier it will be for us to do any necessary course correction in the second half of the semester to address your interests.

Copyright © 2018-present Andrew Cotter