This course is an introduction to the fundamentals of computer programming through the lens of visual culture and networked media. Through in class demonstrations, exercises and assignments, class participants will learn the basics of JavaScript and HTML through the p5.js framework. Weekly readings, in class slide decks and discussions will consider a myriad of artistic disciplines in relationship to emerging interactive media.
- The City College of New York, MFA in Digital & Interdisciplinary Art Practice
- B2050-2080 || Wednesdays 2:00 pm - 4:50pm || Shepard Hall, 408
- rebecca (marks) leopold, email: rleopold@ccny.cuny.edu - Office hours after class or by appointment.
- Course Website
- Course Wiki
- Intro to Course, Class & Instructor
- Student Past Experiences and Expectations
- What is code?
- Setup GitHub, Blog + p5.js Web Editor Accounts
- GitHub, Markdown + the Class Wiki
- Intro to p5.js and Pixel Coordinate Systems, Stroke, Fill + Geometric Primitives
- Week 1 Class Notes
- Watch John Berger - Ways of Seeing
- Read John Berger - Understanding a Photograph
- Find a geometric work from an artist you admire. Recreate the image using the p5.js web editor. Post a link to the class wiki.
- Look at Homework + Reading Discussion
- The Browser as Creative Tool: Animating w/ p5.js
- Intro to Unix, Running a Local Python Server, Text Editors (Atom, Sublime or Brackets) Workflow
- JavaScript in the Chrome Browser Console
- Working w/ p5.js: Download the Library Locally or Link to the p5.js API
- Intro to Unix, Running a Local Python Server, Text Editors (Atom, Sublime or Brackets) Workflow
- setup(), draw(), frameCount + the Animation Loop
- p5.js Structure, Environment Functions + console.log
- mouseX + mouseY
- Local + Global Variables: Numbers + Strings
- Week 2 Class Notes
-
Read:
- Vannevar Bush - As We May Think, 1945
- Clement Greenberg - Modernist Painting, 1960
- Tim Berners-Lee - Long Live the Web, 2010
-
Take last week’s code, and copy it to your local machine. Using the text editor - create .html + .js files that link to the p5.js library. Using the command line to browser workflow - make part of the image move over time. How can you animate the image that reflects or augments the original artwork or artist?
- Look at Homework + Reading Discussion
- Conditionals + Boolean Logic
- random() + noise()
- p5.js Transformation and Event Functions
- Workshop: Setting Up A DreamHost Server Wordpress Blog + SFTP Client and / or work on code assignments.
- Week 3 Notes
- Take last week’s code and make it interactive. Post to the wiki
- Read Taeyoon Choi's Poetic Computation: Reader Chapters 1 + 2
- While + For Loops
- Making Your Own Functions
- Calling vs. defining
- Modularity, Re-usability
- Arguments + parameters
- p5.js Constant and Math Functions
- Make a generative sketch that is different every time the program runs. Use at least one for loop. Try writing + calling your own function.
- Optional Reading: Lev Manovich - Software Takes Command Chapter 1 - Alan Kay’s Universal Media Machine
- Arrays
- Objects
- p5.js Image Functions
-
Create an interactive sketch that keeps track of user action over the course of the sketch's execution. The sketch should allow the user to use clicks, keypresses, etc. to add new elements to the scene (and potentially remove them later). Try loading images or use language to expand the meaning of your program beyond abstract graphics.
-
Optional Reading: Jer Thorp Art + The API
-
Optional Reading: Lev Manovich The Anti-Sublime
-
Optional Reading: Freeman, Wiggins, Starks + Sandler A Concise Taxonomy for Describing Data as an Art Material
- p5.js Dom Library
- HTML + CSS
- Native JavaScript
- Intro 2 Data
- Review + Workshop
- Keep going through tutorials and documentation. Make a new sketch or take existing code and change it. Write comments for each line explaining what is happening. If it is example code from a tutorial, personalize it further. Try out the DOM library.
- Start thinking about what you want to work on for a final project and/or what technical materials you are interested in exploring.
- Optional Reading: Jer Thorp Art + The API
- Optional Reading: Lev Manovich The Anti-Sublime
- Optional Reading: Freeman, Wiggins, Starks + Sandler A Concise Taxonomy for Describing Data as an Art Material
- Working w/ data
- JSON + APIs
- p5.js JSON + String Functions
- Review + Workshop *week 7 notes
- Make a sketch using data. You can create the data set yourself or find an existing source. Try loading the information into your sketch either locally or via the web. Interpret this data visually or interactively.
- Optional Reading: Seymour Papert - Mind-Storms Chapter 7
- Remote local server workflow
- p5.js Touch Interaction - touches(), touchStarted(), touchMoved(), touchEnded()
- p5.js mobile events - deviceMoved(), deviceTurned(), deviceShaken()
- Hammer.js - library for touch interaction
- Workshop
- week 8 notes
- Next class you will be presenting your final project ideas for discussion with the rest of the class. This should include concept sketches, your inspiration (this can include an older body of your own work) or you can make a paper or digital prototype. Have an idea for a title. Please post a link to your presentation on the wiki.
- Optional / Workshop Assignment: Using sample code - create an interactive sketch that is a mobile-specific artwork. Think of how you can transform a viewer's personal interaction with their device and consider mobile as an creative medium. Think of importing images or text to further your concept. We will have time to work on this in class. wiki
- Optional Reading: Alan Turing - Computing Machinery and Intelligence
- Final Project Proposals
- Workshop
- Begin your final project by creating a timeline for its creation. This can include production as well as technical research. Think about creating a q&d prototype.
- Optional Reading: Alexander Galloway - Internet Art
- Final Project Proposals
- Workshop: Work on final projects
Visiting Artist: Allison Parrish
- Workshop: Work on final projects
- Workshop: Work on final projects
Weekly readings + tutorials linked from syllabus
- p5 Reference
- The Coding Rainbow - Dan Shiffman, YouTube
- CODE from Coding Rainbow
- Intro to Programming for the Visual Artist with p5.js - Kadenze
- Code Academy
- Programming Design Systems - Rune Madson
- MDN - Getting Started w/ the Web
- Make: Getting Started with p5.js: Making Interactive Graphics in JavaScript and Processing - Lauren McCarthy, Casey Reas + Been Fry
- Learn Enough to Be Dangerous
- Basic Unix Commands
Students are expected to participate in class: contributing positively to discussions, arriving on time having thoughtfully completed the reading, technical and creative assignments. Although you will need your laptop with you for every class, computers should be closed and mobile devices silent and not glowing during critique, class discussion and technical demonstrations.
Assignments must be completed and posted to the class wiki by 12pm the day of class. Late work loses a letter grade and will not be accepted more than two weeks past the due date. Attendance at each class meeting is mandatory. Arriving more than 15 minutes late will be considered an absence. Three absences will lower your grade by one letter. Four absences will result in failure.
- Participation + effort during weekly discussions + workshops 30%
- Regular Assignments 40%
- Final Critique 30%
You are required to maintain a blog for this class where you will post your homework to link to from the class wiki. Often times when making work with code, something might not be working the day of class. It is important to constantly document your process. If a sketch is not working during critique, the blog post is essential for us to see and comment on your process. There are many free options that will offer you enough storage space for the semester. I suggest Wordpress or Medium but choose whatever platform you prefer.
Your device is required for the course. Make it an instrument for you to use creatively and not a device that directs your attention away from you and your classmates’ time. There is a zero tolerance policy for the mis-use of any hand-held devices including phones, games, media players, tablets, email/txt devices, etc. during class. The mis-use of computational machines while in class will negatively affect your grade.
All students are responsible for understanding and complying with the CCNY policy on academic integrity. The document can be found through the CCNY website by clicking on “Current Students” then “Academic Services” then “Policy on Academic Integrity.” All students must read the details regarding plagiarism and cheating in order to be familiar with the rules of the college. Cases where academic integrity is compromised will be prosecuted according to these rules. In addition, the Policy of Academic Integrity can be found in the Graduate Bulletin.
Students who require special accommodations for disabilities must register with the AccessAbility Center/Student Disability Services and present a letter from the Center to the instructor at the start of the semester. More information is available here
Although email is a useful tool for quick communication, it is not a substitute for conversation. Issues concerning instructor evaluation, student approach to course assignments, unexpected challenges, meeting deadlines, etc. must be conducted in person, either before or after class, or at a mutually agreed upon time. Lengthy emails will be answered with a request for in-person consultation.