🧠 Teaching

COD 207 Creative Coding I

13 min read

Introduction

COD 207 Creative Coding I is a foundational course designed to introduce students to the essential principles of programming within the realm of creative coding. Through hands-on experiences with algorithmic art practices, students will gain a comprehensive understanding of the fundamental concepts that underlie this innovative field.

Course Objectives:

  • Develop Programming Fundamentals: Students will learn the basic syntax and structure of programming languages, focusing on problem-solving skills and logical thinking.
  • Explore Algorithmic Art Practices: Through interactive exercises and projects, students will delve into the world of algorithmic art, understanding how to create visually striking and dynamic visualizations using code.
  • Apply Creative Coding Principles: By applying creative coding principles to real-world scenarios, students will develop a unique perspective on problem-solving and artistic expression.

Office Hours

Refer to the following link. Create a request. I will provide you the details. Booking link

Links

Selected Student Assignments Showcase Under Construction


Selected Student Final Projects

||| Student Works - Creative Coding ||| - YouTube

Course Content:

Week 1: Introduction to Creative Coding

  • Why do I need to learn programming? Interview with Ali Nesin
  • Overview of programming languages (Python, JavaScript, etc.)
  • What is Creative Coding? Present artists

  • Pre-survey ALAP

Things to Discuss

This discussion session aims to present basics of Computational Thinking principles. The practices are chosen in order to align with the undergraduate student major. Since design students are visual learners, the tenets of CT are contextualized to provide visual aids and analogies depending on student’s known practices.

1. Abstraction
Abstraction is crucial in order to reveal the core of the problem. The abstraction process eliminates the unnecessary data and help the designer to focus on the major task to solve the problem.

Procedural Flow
This step is crucial for determining the clean and precise instructions to solve a problem.
Suppose that you instruct your intern about how to use Adobe Photoshop.

Write down step-by-step instructions precisely for the following tasks;

  • How to create a 800 x 800 px sized, 72 DPI resolution canvas using Photoshop on Mac or Windows operating system.
  • How

Week 2: Algorithmic Art Database

When the speech is corrupted so is the mind.

  • Keep mails short and readable
  • Don’t expect answer on weekends and after 5 pm

Week 3: Computational Thinking

  • Artist of the week Char Stiles Keynote speech on Creative Coding Fest.

Week 4: Moire Pattern

Several topics are reviewed during the class work on the creation Moire Pattern study.

  • Why does it matters to gain knowledge? - Ali Nesin (org video, 55:10)
  • Artist of the week. Audiovisual work of Telefon Tel Aviv band is showcased.

Week 5: Algorithmic Art Praxis

Week 6: National Holiday (Republic Day)

Week 7: Media Loading

Week 8: Image Processing

Week 9: Typography

Week 10: Sound & Interactivity

Week 11: ALAP & Autonomous Agents

Final Project Instructions

1. Project Template Document

Your final project document must include the following information. Please complete every section to avoid losing points.

Course: COD 207 Creative Coding I
Student Name/Surname: [Your Name]

Project Title: Provide a title for your work. (You may update this after receiving feedback).

Mood Board: Include your mood board here. If you are using Miro, Notion, or another cloud-based app, please add a screenshot and a public link so I can access it.

Project Type: What is the category of your project? Choose one of the following or propose your own:

  • Generative Art:
    • Abstract digital painting
    • Animated loops (GIFs)
    • Plotter drawings (vector-based designs for print)
  • Computational Design:
    • Generative poster design
    • Generative cover design
    • Generative book covers
    • Algorithmic typography or logo design
  • Interactive Media:
    • Mini-games (Educational, advergame, casual game, puzzle game, etc
)
    • Mouse/Keyboard interactive visual systems
    • Audio-reactive visuals (Music visualizer)
  • Data Visualization:
    • Visualizing personal data (e.g., screen time, steps)
    • Abstract mapping of external datasets
  • Generative Collage:
    • Remixing images and shapes using code
  • Other:
    • If you have a unique idea not listed here, please explain it in detail.

Project Description:
Write a comprehensive description of your project. This section should cover:

  1. Concept: What is the core idea or theme?
  2. Technical Approach: Which coding techniques and tools are you using? Why did you choose them?
  3. Connection: How does the technical approach support your concept and mood board?

Do not write these as separate bullet points; please write them as a cohesive paragraph.

2. Final Project Video Documentation

You must screen-record your project. The video resolution must be at least 1920x1080 px.

  • Audio/Text: Use subtitles or a voiceover to briefly explain your work.
  • Content:
    • If it is artwork, explain your inspiration and motivation.
    • If it is a design (poster, book cover, etc.), explain the context and usage.
  • Goal: The video must clearly demonstrate how the project works to an audience who has never seen it before.

3. Source Code & Outcomes

  1. Download your source code from p5.js or OpenProcessing.
  2. Rename the downloaded .zip file using your name and surname.
    • Example: sketch-alptugan.zip

4. Submission Instructions

  1. Create a folder on your computer named with the course code, your name, and surname.
    • Example: alptugan_cod207_A
  2. Place your Final Project PDF, Video Documentation, and Source Code (.zip) inside this folder.
  3. Upload the folder to the Google Drive link provided below.
    • DO NOT UPLOAD THE FILES DIRECTLY TO THE LMS.
  4. Once uploaded to Drive, copy the link to your folder and paste it into the LMS submission box.

GRADING POLICY

As stated in the course syllabus, the final project accounts for 30% of your final grade. You will be evaluated based on the following criteria:

DescriptionPoints
Detailed Comments in the Code
(Is the code explained clearly via comments?)		20 PTS
Aesthetics & Design
(Visual balance, composition, and theoretical grounding)		40 PTS
Project Document, Description & Analysis
(Quality of the project document and computational thinking)		20 PTS
Video Documentation
(Clarity, resolution, and explanation)		20 PTS
TOTAL100 PTS

Articles & Tutorials

Decontextualize blog includes several programming concepts from beginner to intermediate levels for novices.

List of colors and their meaning, article

Transformation

-center

Check the following content for case studies!

Labs | Art and Interaction Computing
Creative Coding Projects

Inspiration & Showcases

Pre-computer Era

Generative Art

Datavis

  • Wind Map Showcases wind map in an interactive way in US.
  • Fathom Information Design A company focuses on data visualization.
  • THE PROJECT — Dear Data Each week, and for a year, we collected and measured a particular type of data about our lives, used this data to make a drawing on a postcard-sized sheet of paper, and then dropped the postcard in an English

Crowdsourcing

Installations

Fabrication

Motion Graphics

Projection

Performance

Public Domain & Intervention

  • About | F.A.T. The Free Art and Technology (F.A.T.) Lab is an organization focused on enhancing the public domain by researching and developing technologies and media. They emphasize releasing their work early, frequently, and with rap music.

  • THEORY - Face to Facebook (2012) Social networking platforms like Facebook are inherently addictive, capitalizing on our innate desire for connection and self-positioning by creating an “eternal party” where users constantly update their virtual identities. While these private corporations profit immensely from this “crowdsourced targeting” of user data, especially our public-facing profile pictures, this system also exposes individuals to significant risks like identity theft and re-contextualization of personal data, ultimately revealing the inherent fragility of virtual identities and the unsustainable economic model built upon their exploitation.

  • Graffiti Research Lab (2009) “Art is a tool of empowerment and social change, and I consider myself blessed to be able to create and use my work to promote health reform, bring awareness about ALS and help others.” ~ Tempt One

  • Zoom Escaper Online meeting jammer.

Sound & Music

  • Hatnote Listen to Wikipedia This system provides an interactive audio-visual representation of Wikipedia’s recent changes: bells signal additions, string plucks indicate subtractions, and pitch reflects edit size. Green circles denote unregistered users, purple circles mark bot edits, and a string swell announces new users, who can be welcomed via a clickable blue banner.

  • Sound Affects performance A duo performance. Sound generated via face mimics and heartbeat.

  • Symphonies of the Planets Sound composition according to planet orbits.

  • Sidewalk Orchestra Motion detection on camera images trigger sound samples to create experimental musical composition.

  • Patatap - Artistic & Studio Work of Jono Patatap, real-time audio-visual instrument available on the web and the App Store. On computer click on the screen and then tap any key on your keyboard.

  • TONECRAFT BY DINAHMOE-Transforming silence into unappreciated effort. A 3D sequencer for musical composition by DINAHMOE

  • ÜBERVIZ The studio builds custom real-time audio-reactive music visualizers, using web technologies such as WebGL, Web Audio, and custom GLSL shaders. They also build live concert visuals and interactive installations.

Typography

OpenCv

AI

Hypertext / early net.art

More recent net art

GIFs, animations, glitch, video

Other

History

Company & Studio

Graph View