This description of COMPFOR 121 is based on the offerings in Fall 2022 and Winter 2023. Future versions will likely differ in some respects.

Any U-M student can succeed in this course. No mathematical background beyond algebra is necessary. We will teach the class assuming students have no prior programming background.

The course is inspired by a studio art class, in the sense of sharing our work often, at multiple stages of development, with all of us reviewing and providing productive feedback. In each section of the course, we will review relevant work of artists (like Arièle Rozowy. and the Quilts of Gee’s Bend) whose work uses computational media or can be an inspiration for computational art. We will demonstrate how to do that kind of art via programming. Students will sketch what they want to make, then share them for comments from peers. Students will learn to create in computational media, using programming tools available from a Web browser. 

COMPFOR 121 counts towards the Creative Expression (CE) and QR/1 LSA Distribution requirements.

Course Goals

At the end of this class students will be able to:

• Create and design software for some kinds of problems.
• Be a “conversational programmer.”
• Express an understanding of how the technology in the world is designed and created.
• Describe the relevance of programming in the context of creating art
• Use programming to generate art with a visual programming language
• Present portfolio-quality projects for review by future instructors and employers
• Be able to recognize and talk about industry/community-standard programming languages like Python and Processing.
• Be able to recognize and explain the contents of webpages.
• Build a chatbot and explain how it works.

Grading

25% – Seven Homework projects in Snap 

10% – Five Reading reflections

15% – Five Ebook chapters. Graded on effort, not correctness.

20% – Six Online quizzes. (Seven total, lowest grade dropped)

15% – Participation. (Peer instruction questions, comments in Harmonize). Typically, 90% attendance gives you 100% of participation points, 80% gives you 90% of participation points, and so on.

15% – Final Project turned in via Canvas during Final Exam Period

Schedule

Each section of the course is similar. We review art by artists who work in that medium or modality. Sometimes, students add to shared whiteboards (Padlet) with examples they’ve found. Students sketch what they might want to build, and share those on Harmonize. We then learn how to make similar art in Snap!. Students complete a homework assignment (mostly in lab sessions) where they make similar art. At five points during the semester, they complete an ebook chapter where they learn how to make similar things in Processing and Python.

Student examples are shared by permission from the students. Click the green flag in the middle to run the project in the Web page.

1. Introduction

After an icebreaker and an overview of the course, we explain the focus on art and artists.  At the end of the first class, everyone creates a Snap account in-class and writes their first program. 

2. Drawing Shapes

We review art by Caroline Kent, Piet Mondrian, and Alexander Calder. Reading: Golan Levin. Ebook: Chapter on Riley Quilts and Piet Mondrian in Processing

Homework: Students create a Snap project that generates shapes.  Students are welcome to use the shape microworld., but are not required to. 

(Click on the green flag to run these. Shift click to run them at high speed.)

3. Making Image Filters

After reviewing art made with image filters (like the Obama Hope poster), we learn to make image filters. First, students work in Pixel Equations which makes introduces pixels and RGB colors. Then we move to Snap. Reading: Aaron Koblin. Ebook: Chapter on Image Processing in Python

Homework: Your goal in this assignment is to create a collage of your images, manipulated with your image filters.  You will likely want to use the Snap Pixels Microworld.  The way this works is that you will (1) MAKE your images in Snap then (2) ASSEMBLE your collage in some other tool. Your collage must have at least TWO original pictures (photographs, drawings, anything that is yours). Each of these pictures should appear at least three times in the collage — once in their “original” form, and two more times with some image effect(s) that you have designed. That is, your collage must contain at least six pictures in it, and you must design at least two image filters. An image filter sets the color of individual pixels by changing red, green, and blue channels.

Collage by Christina Barriente.

4. Aural Scenes from Digital Sound Manipulation

We talk about how artists sample sounds and then manipulate them (e.g., auto-tuning, echoes, chorus, delays, reversing, clipping, splicing). Reading: Aaron Koblin.

Homework: Your goal in this assignment is to create an aural scene — describe a scene with sounds. You will probably want to use the Snap Sound Microworld, but you do not have to.

Some possibilities:

• An idyllic woodland scene, maybe out of Disney’s Enchanted, with flute music, and occasional bird tweets, or bees buzzing.
• A futuristic or alien world, with whooshing, R2D2-like boops and beeps, and maybe laser beams or transporter sounds.
• A spooky haunted house with wind whistling, creaking floorboards, and barely heard chuckling — or moaning.
• You might also create music — any combination of wind, string, and percussive instruments.

Example code: Snap blocks to create an echo from a sound

Kaylee Dyer’s Haunted House aural scene: (Click on the green flag to execute it.)

Jaden Bogart’s subway aural scene:(Click on the green flag to execute it.)

5. Interactivity – Making Novel Drawing Programs

Students learn how to read the keyboard, mouse (position and buttons), microphone and camera, and to write programs that respond to user input. We brainstorm what makes drawing programs interesting. We introduce HSV as a new color model. We introduce the concept of a computational object with inheritance. Ebook: Turtle graphics in Python and Processing. Reading: Data artists.

Homework: Make a program that draws in response to user input.  You can decide what is drawn (lines? shapes?) and how often (as the mouse is moved, or continuously?). The critical part is that you muse sense the user and change the drawing in response to the user. You must use the mouse or keyboard, because those are the most common input devices, and you should learn how to read those. You muse also use something novel involving either the video or the microphone, or both.

6. Side-Scroller Video Games

We brainstorm our favorite side-scroller video games and what makes them interesting. We start from a simple side-scroller video game, then dissect it — explaining how it works, and how it draws on all the sound, graphics, and interactivity learned in the first five projects. We extend it, e.g., creating platforms to jump onto. We have a mini-lecture between lab days for videogames on randomness and generativity where we introduce different kinds of randomness (uniform vs normally distributed) and L-systems.

Example: Koch curve expressed as an L-system

Homework:  Build a side-scroller video game of your design.  Some of the required characteristics of your video game:

• The player controls one character with the keyboard (5 points), and the character must change its costume while moving (5 points).
• There must be at least two other characters that move in the game and interact with the character, e.g., chasing, following, pursuing (e.g., player needs to catch/touch them). (10 points)
• There must be a designed background. (5 points)
• There must be at least two other elements of the background that move or change over time, not necessarily with respect to the player. (10 points)

7. Make a Chatbot

We start out review chatbot-based art by Darius Kazemi, Allison Parrish, and Carrie Sijia Wang. We do simple sentence recognition and generation using a teaspoon language.

The history of chatbots starts with Alan Turing and the Turing Test for machine intelligence, and then moves to Joseph Weizenbaum and Eliza — and Weizenbaum’s concerns about how easily humans were duped into believing Eliza was real. We talk about the relative power of different computational models for chatbots. We build Eliza in Snap, and then students build their own chatbots. Reading: Generative art. Ebook: Basic text processing in Python.

Homework:  Build a chatbot in Snap.  You can use any of blocks that we have discussed in class to make your chatbot. Your chatbot should represent a particular character.  The character may come from fiction or non-fiction, or could be an invention of your own. The responses of your chatbot should be consistent with that character. There should be a random element for how your chatbot interacts, but it should not be completely random. You don’t have to pass the Turing test, but make your chatbot realistic.

8. Make a Web page with style and Snap

Brief history of the Internet and the Web. Introduces HTML and CSS. We talk through the elements of HTML using Snap blocks, and then introduce a set of blocks for creating CSS style rules. Ebook: Snap and Processing Basics.

Example: Anchors and images with blocks.

Example: Adding style rules, and emphasizing the concepts of hierarchy and encapsulation in a Web page.

Homework: Using the Web blocks introduced in class, build a Web page.  The content can be anything you want, but there are several elements that must be present:

• (10 points) The page should feel designed and purposeful.  Text, images, and Snap project should all make sense. The CSS style should make the page look better, not more random.
• (5 points) There must be at least three headings.
• (5 points) There must be a static image.
• (5 points) There must be at least three links to other sites.
• (15 points) You must have your own CSS style rules — at least three different changes. (5 points for each.)
• (10 points) You must embed one of your Snap projects.  If you don’t have a relevant project, create one that fits within the theme of the page.

Reading Reflection Examples

There are four reading reflections. Students review the art of Golan Levin and Aaron Koblin (by reviewing videos by them), and look at general categories of Data Artists and Generative Art. Students write essays that answer questions like:

• What was the most intriguing idea in the talk? And why?
• If you could extend one of the examples, which one would it be and how would you make it better or more interesting?
• What is one thing that you might like to make or try, based on the video?

Final Project

Your final project combines a side-scroller video game with a chatbot. It is due at the time for our final exam.

The requirements are:

• Have a player that is controlled with mouse or keyboard.
• Part 1: The player must achieve some goal via a challenge — progress through a maze, or avoid some pursuers, or touch/catch something.
• Part 2: When the goal is met, the player must meet an avatar who interacts as a chatbot.  Your chatbot should be trying to get the player to say/type something specific (a name, a catchphrase, a code). 
• Part 3: When the player does type the right response, have a final screen showing success.  Use a big graphic and a triumphant sound.

Ebook

The Ebook for this class is available here: https://runestone.academy/ns/books/published/comp-expression/index.html. The ebook shows Snap code we have used in class, then the Processing, Python, or HTML code that does the same thing. Students answer multiple choice questions about the textual code, to support transferring knowledge from the block-based language to the mainstream textual languages.

How the Class is Taught

Peer Mentors: We have Peer Tutors and Mentors (undergraduate students with experience in computing in these classes) available for helping you with questions on homework, anything else in our courses, or just about their experiences in computing and classes here at Michigan.

Collaboration

You are encouraged to work together on homework, projects, and transfer assignments. Use all the online resources that you can find. Talk about your work, even show one another your programs. Quizzes are open book, open note, and on-line, but are required to be done individually without discussion with anyone else.

Attendance

You are required to come to class. We use peer instruction in class – sometimes called “clicker questions” where students answer questions in lecture and talk with their peers to improve their answers. We have used iClicker successfully in-class and we use Harmonize for supporting students sharing their sketches of projects and their stages of development. Research evidence suggests dramatically improves student learning with peer instruction. Participation thus forms a significant portion of your learning and your grade. Excused absences are a different story, though those who must miss class must speak to one of us in advance. If there is a scheduling conflict with a religious holiday that you participate in, please let the course staff know in advance. 

Cell phone policy – Technology use during class

Hearing phones ring during class is extremely disruptive. You will likely want to have a Web browser available during class, and while you can use a cell phone, you may want to bring a tablet or laptop.

Late assignments

Your assignments will be submitted online, through the Assignments module of this course’s Canvas site.

Everyone has five free days (total, for the whole semester) that can be added to the deadline for any assignment EXCEPT THE FINAL PROJECT.  Send email to the instructor to inform me that you’re using your free days. Assignments submitted after the deadline, after your free days, will be 10% grade deduction 15 minutes after the deadline up to 24 hours late, 20% after 24 hours and before 48 hours late, and not accepted after that.

Accommodations for Students with Disabilities

If you think you need an accommodation for a disability, please let us know at your earliest convenience.  We work with the Services for Students with Disabilities (SSD) office to help determine appropriate academic accommodations.  SSD typically recommends accommodations through a Verified Individualized Services and Accommodations (VISA) form. Please present this VISA form to us at the beginning of the term, or at least two weeks prior to the need for any accommodation (test, project, etc.).  You can call SSD at 734-763-3000; or go to http://ssd.umich.edu  Any information you provide SSD is private and confidential. 

Student Mental Health and Wellbeing

The University of Michigan is committed to advancing the mental health and wellbeing of its students. If you or someone you know is feeling overwhelmed, depressed, and/or in need of support, services are available. For help, contact Counseling and Psychological Services (CAPS)

at (734) 764-8312 and http://caps.umich.edu during and after hours, on weekends and holidays, or through its counselors physically located in schools on both North and Central Campus. You may also consult University Health Service (UHS) at (734) 764-8320 and https://www.uhs.umich.edu/mentalhealthsvcs , or for alcohol or drug concerns, see www.uhs.umich.edu/aodresources .   For a listing of other mental health resources available on and off campus, visit http://umich.edu/~mhealth/  .

Classroom Climate

The goal is for the course to be an open, collaborative, creative space for learning, where we encourage discussion and questioning. Some questions may lead to a climate that feels closed down or threatening. Many computer science classes have a “defensive climate” where students ask questions more to demonstrate their own knowledge than to encourage inquiry and exploration. You may ask any questions you want. The instructor may suggest that you ask the question after class or in office hours, for the sake of classroom climate.

Student Sexual Misconduct Policy

U-M, LSA, and this department are all committed to fostering a safe, productive learning environment. Title IX and our school policy prohibit discrimination on the basis of sex, which regards sexual misconduct — including harassment, domestic and dating violence, sexual assault, and stalking. We understand that sexual violence can undermine students’ academic success and we encourage students who have experienced some form of sexual misconduct to talk to someone about their experience, so they can get the support they need.  Confidential support and academic advocacy can be found with the Sexual Assault Prevention and Awareness Center (SAPAC) on their 24-hour crisis line, 734-936-3333, and at http://sapac.umich.edu/ (Links to an external site.). Alleged violations can be non-confidentially reported to the Office for Institutional Equity (OIE) at [email protected]. Reports to law enforcement can be made to University of Michigan Police Department at 734-763-3434.

Advice from Former Students