Go to https://github.com/IDMNYU/DM-GY6063A-Creative-Coding/wiki/Class-notes
NYU Tandon School of Engineering Integrated Digital Media Department of Technology, Culture and Society (TCS)
Instructor Kevin Siwoff
Mon 6:30-9:20p; MAGNET 2MTC 817
To contact Instructor: KSiwoff@nyu.edu
Office hours: Professor office hours by appointment.
Academic calendar: Academic calendar will vary per semester. Please consult your current NYU academic schedule for information regarding holidays.
Students will:
-
Develop conceptual thinking skills to generate ideas and content in order to solve problems or create opportunities in art and design.
-
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.
This class assumes a high degree of computer literacy, but not a high degree of programming ability. We will be learning computer programing 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 necessarily a must.
This course is a graduate-level, introductory creative programming course, appropriate for students with no prior programming experience. Traditionally, introductory programming teaches algorithmic problem-solving, and scalable engineering, where a sequence of instructions describe the steps necessary to achieve a desired result.
In Creative Coding, students are trained to go beyond sequential problem solving and to use the computer as a creative medium for art, games, and graphic design. This course will introduce you to a variety of concepts in programming, and how they can be applied creatively to work in a variety of media, such as 2D graphics, animation, image and video processing. A strong focus will be on creating interactive experiences for the web. By the end of this course, students will be empowered to read and write javascript for creative applications, as well as walk away with a midterm and final project.
The programming environment we will use:
- P5.js: http://p5js.org
Students in this course will:
- Understand the basics of creative coding in Javascript (p5.js).
- Apply their understanding of digital media to software.
- Learn best practices for designing software within an event-driven, object-oriented and functional framework.
- Propose and develop a complete software experience as a final project.
This course will be comprised of 13 weekly classes and 1 final project. Additionally, there will be small weekly homework assignments, which we will go over and build upon in class. Homework assignments will often be supplemented by reading unless otherwise noted.
Course requirements include small weekly projects (studies), a project proposal, and a final project & full critique presented to the class. The grading breakdown is as follows:
-
Attendance and participation (25%). More than three unexcused absences will result in a decreased letter grade.
-
Weekly homework studies (submit 10) (30%).
-
IDM coursework documentation blog on Tumblr (20%). See documentation section for more info on blog requirements.
-
Final project. This project can be an interactive tool, a data visualization/sonification, or any other approved proposal. Your project must use p5.js. All final projects will be collected and put together as an "interactive book" (25%).
Fall 2016 semester: Final projects must be submitted no later than 12/14/16. Submissions after the 14th will not receive credit.
Submit 3 sketches for inclusion in an interactive book. All of the sketches must be created with p5.js, and demonstrate different techniques learned in class including but not limited to generative text, particle systems, and color theory.
Final projects from previous semesters can be found: HERE
-
Learning Processing, by Daniel Shiffman.
-
Make: Getting Started with p5.js: Making Interactive Graphics in JavaScript and Processing, by Lauren McCarthy, Ben Fry, and Casey Reas.
-
The Interaction of Color, by Josef Albers. (available at various NYU Library locations)
- Processing: A Programming Handbook for Visual Designers and Artists- second ed., by Casey Reas and Ben Fry.
This schedule is subject to change depending on the interests and pace of the class, etc. In addition, guest speakers will come in and talk about their work/process with the class. Guest appearance scheduling will be dependent upon his/her availability.
Week 1: Introduction to the class. Download and install required software. Basics of 2D drawing.
- Reading: Getting Started With p5.js, ch.1-3
- Assignment: Sol Lewitt drawing exercise.
Week 2: Variables and data types. Conditionals.
- Reading: Getting Started With p5.js, ch.4
- Assignment: Geometric Abstraction exercise: https://www.google.com/culturalinstitute/u/0/entity/%2Fm%2F05bw0l?projectId=art-project.
Week 3: Looping and repetition.
- Reading: Getting Started With p5.js, ch.11
- Assignment: Study and use beginShape() and endShape() to draw 3 separate sketches. Each sketch must contain vertices ( vertex() ). tools you will need: beginShape(), endShape(), vertex(), for loop
Week 4: Color
- Reading: Getting Started With p5.js, pgs.29-33; The Interaction of Color, "ch.IV A color has many faces- the relativity of color" and “ch XVIII. Free Studies: a challenge to imagination”
- Assignment: Pick two themes from ch. 18 of Josef Albers’ “The Interaction of Color” and recreate them in p5.js.-
Week 5: Functions, and interaction with the keyboard and mouse.
- Reading: Gettings Started With p5.js, ch.9
- Assignment: Create a Create a character (animal, person, etc.) and make a function that draws the character. Your character function must have parameters allowing you to draw or animate certain properties. Some example parameters you might want to create are height, width, positionX, positionY. Also, bring in one example book (either paper or digital) as inspiration for the final project
Week 6: Transformation and translation.
- Reading: Getting Started With p5.js, ch.6
- Assignment: Create a sketch with spiralling shapes. The sketch can either be animated or static. You will need to use a combination of rotate and translate in order to spiral the shape. Once you get the spiraling form, try incorporating an interpolated color pallette using lerpColor();
Week 7: Harmonic motion and animation.
- Reading: Getting Started With p5.js, ch.8
- Assignment: Create a sketch that animates multiple shapes along Lissajous curves. Try animating color and size properties of the shapes using sin() and cos() as well.
Week 8: Arrays and Object Oriented Programming
- Reading: Getting Started With p5.js, ch.10
- Assignment: Create a Particle System using Javascript Objects. Particles can be any size or shape you want.
Week 9: Generative text and typography: An introduction to the RiTa addon for p5.js
- Reading: Concerning the Visual in Poetry
- Assignment: Generative Madlib poetry: Find a prose poetry text from Wikisource and replace all nouns and adjectives with random nouns and adjectives. Try adding a rhymescheme.
Week 10: The Document Object Model (DOM).
- Reading: Getting Started With p5.js, pg206-210
- Assignment: Create a user interface for your canvas sketch using the DOM library. The interface should control parameters in the sketch. Some possible examples of parameters are size, color, animation speed, etc.
Week 11: Data Visualization
-
Reading: Getting Started with p5.js, ch. 12; Judith Donath et al. “Data portraits“. Proceedings of SIGGRAPH 2010, Pages 375-383.
-
Assignment: Inspired by Dear Data, record 5 days of data from your life and visualize the data using p5.js. See class notes for how to structure your data.
Week 12: Image
- Reading: Getting Started With p5.js, ch.7
- Assignment: Work on Final Projects. Choose one of the examples shown in class and elaborate on it by choosing your own image sources and/or using p5.Play to animate images.
Week 13: Video
- Reading: No Reading this week.
- Assignment: Work on Final Projects.
Week 14: All final projects and homework assignments due, 12/14/16
Each student will be judged on the quality, experimentation, and improvement that their work shows.
A. Excellent (90-100)
Performance, participation, and attendance of the student has been of the highest level, showing sustained excellence in meeting course responsibilities. Work clearly differentiates itself from other work, has memorable impact, pursues concepts and techniques above and beyond what is discussed in class. The student thoroughly understands the theory and practice behind visual foundation.
B. Very Good / Good (80-89)
Performance, participation, and attendance of the student has been good, though not of the highest level. Work demonstrates a better than average understanding of visual foundation theory & practice.
C. Satisfactory (70-79)
Performance and attendance of the student has been adequate, satisfactorily meeting the course requirements. Work is average and competent, showing a basic understanding of visual foundation theory & practice.
D. Poor; Below Average (60-69)
Performance and attendance of the student has been less than adequate. Work is lacking in many or most areas that show any understanding of visual foundation. Problems may include lack of interest, procrastination, poor planning and poor craft.
F. Unacceptable (59 & Below)
Performance and attendance of the student has been such that course requirements have not been met. Work shows no overall understanding of the course material on many levels or either a severe lack of interest.
If you are 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
www.nyu.edu/csd. The Moses Center is located at 726 Broadway on the 2nd floor.