🧠 Teaching

COD 208 Creative Coding II

14 min read

Notes

  1. Check the Selected Computational Thinking Analysis Papers for how you should or not prepare your analysis about the project.
  2. p5js website
  3. p5JS cheatsheet
  4. Presentations page
  5. RandomSeed IG link
  6. RandomSeed Webpage selected projects

Topics

WebSockets + WebRTC + Arduino (Physical Computing)

Creative Code Syllabus at Devin University

Neural Network Model Training
Golan Levin Example Codes

AI & ML

week 1

week 01 Presentation

  • 👀 Keep your eyes open. Choose a thing. Let’s say your favorite cup at your home, or a specific bird that you hear everyday, or your pet, or a tree at the campus. Review the example tutorial. On the last page of the tutorial, you will see that whenever you run the code, it generates different facial expressions.
  • As we did in the previous semester, break it apart using CT principles. Redraw it using p5JS.
  • Make it parametric. So whenever you run the app, determine its properties randomly.
  • ⏫ Upload the sketch to your openProcessing account.
  • ❗Submit the p5js link.
  • 📖 Read Delusions of Dialogue: Control and Choice in Interactive Art
  • đŸ“ș Watch the videos on the last presentation page.
  • 📖 Read Delusions of Dialogue: Control and Choice in Interactive Art
  • đŸ“ș Watch the videos in the presentation. Read about arrays

Selected Assignments A

Alara Yılmaz, Aylin Bursalıoğlu, Cansu Özbek, Deniz Sönmez, Duru Seyhan, Gizem Çobanoğlu ⭐, Ä°dil Akan, Ä°ris Eryılmaz, Lana Jamal, Naz Ä°pek, Zaman Khan

Selected Assignments B

Abeerah Malik, Aleyna Kabaklar, Azra Sadıkoğlu, Bahar Kızılkaya, Boray ÜnlĂŒ, Duru Seyhan, Duygu Aksöz, Ä°rem Apaydın, Kerem Alp, Kerme YaƟlıçimen, Zeynep Erol

week 2

week 02 Presentation

2025-2026

  1. Finalize the project that you started in class time. You have two options. Choose 1 or 2. It is optional to submit both of them.
    1. Create instances of your object (Class) and distribute them on the canvas using randomness. Example
    2. Create instances of your object (Class) and distribute them on the canvas using tiling. Example
  2. The challenge is whenever we run the code, the formalistic features of your Object (Class) change randomly.
  3. Upload a screenshot of your choice. Review the keyPressed() function in Example to implement into your code.

2024-2025

  • Convert the week 01 assignment to a class. Reference1, Reference2
  • Create instances of your class by initializing it using different parameters.
  • Create at least 10 different objects in different features.
  • Position all of the objects in the same sketch. Do not create different sketches of each instance.
  • ⏫ Upload the sketch to your openProcessing account.
  • ❗Submit the openprocessing link.
  • ❗Submit the sketch source code as zip file as well.

Selected Assignments A

Selected Assignments B

Abeerah Malik, Azra Sadıkoğlu, Boray ÜnlĂŒ, Duru Seyhan, Duygu Aksöz, Kerem YaƟlıçimen, Zeynep Erol

week 3

2025-2026

  • Utilize Arrays to dynamically control multiple objects.
  • Distribute objects on the canvas.
  • Animate them up/down, left/right
  • Creative Coding Fest

2024-2025

  • Write a mini game story.
  • Design the storyboard. Keep the document size at 800 x 800 pixel and resolution to 72 DPI.
  • Design Intro Scene: A background, Clearly explain instructions to play the game shortly. A button to start the game.
  • Design Game Scene: A background, the hero, and enemies.
  • Design Final Scene: A background, the result of the game. SUCCESS or FAIL or CONGRATS depending on your scenario.
  • Export UI elements as PNG files.
  • đŸ“ș Check the videos Former Student Games.

week 4

2025-2026

Showcase of games on itch.io web platform, links
Making a software visual guide, link
Feedback for the games
Assignment
Dear all,
Let me clarify one thing. Those who do not attend classes submit irrelevant assignments. It does not mean that if your code is running, you will get high grades. This is a friendly reminder for you. Please read the LMS submissions carefully or ask your friends in the class before submission. For this game project, I won’t decrease anyone’s grade. But for the upcoming projects, if I receive irrelevant assignments, do not shock when you see your grades đŸ€·â€â™‚ïž. You’re warned!

For the next week, I want all of you to finalize your games. Each game must have 3 different scenes, as discussed in the lecture time. You will be graded according to your game interface design (40 points) and game mechanics (40 points). 

  1. Submit the link to your project. (10 points)
  2. Submit a zip version of your project. (10 points)
  3. Submit screen-capture video of your game play. Keep it under 2 minutes. Convert the screen capture to mp4 video format. Handbrake Software tutorial (10 points)

For more information about the game format, visit the link.

2024-2025

  1. 👀 Implement all of the scenes that you design for your game in P5Js.
  2. You can use the codes in my game and implement to yours. Fork my [game template] to adapt your game scenes. For those who have different game mechanics than my game, do your best. I want to see the implemented design in P5Js. Please ask to me or your friends in class whenever you need help or get stuck!!! I can provide you tutorials and reference code snippets.
  3. ⏫ Upload the sketch to your openProcessing account.
  4. ❗Submit the openprocessing link.
  5. ❗Submit the sketch source code as zip file as well.

week 5

This form, which will be available starting Monday, March 3, consists of two open-ended questions where students can share what they find positive about the courses and the areas they believe could be improved for a better learning experience. The form will remain accessible via SIS throughout the upcoming week.

2025-2026

PLEASE READ CAREFULLY!
You have 3 options. Choose one below.

  1. Art: Create an interactive AR sketch where the fiducial marker displays a unique piece of digital art or animation.
  2. Education: Design an AR-based educational tool that uses fiducial marker to teach a concept (e.g., design, astronomy, biology, geography, or math).
  3. Interactive Poster: Create a poster about a topic of your choice. You can use a material that you did before in your other typography or basic design courses. Attach the marker to the corner of your poster. Whenever, the user points the camera on to the poster display some more information or animation related to the printed design.

You can use a single or multiple markers if you want. Refer to the example sketch In this sketch you need to print the first 6 markers (0wFrame.png, 1wFrame.png, 2wFrame.png, 3wFrame.png, 4wFrame.png, 5wFrame.png) from the following link.

General Submission Guidelines for All Assignments:

  1. Code Submission: Submit the p5.js source code and any additional assets (images, sounds, etc.) used in the project.
  2. Zipped Project Folder: Compress the entire project folder.
  3. Proof of Concept Video: Record a video using a mobile phone to demonstrate the AR application in action. The video should clearly show the fiducial markers being detected and the AR content responding accordingly.

Sign up for a free account on the GitHub web page due to the upcoming class.

Augmented Reality

  • Your games must be finished and finalized. 
  • I don’t want to hear any apologies or last day help requests.
  • Upload your whole sketch folder.
  • Submit the link of your game.

week 6

2025-2026

Watch the following videos in order.

  1. Introduction to Machine Learning
  2. Pose Detection
  3. Hand Pose Detection with ml5.js
  4. Face Mesh with ml5.js
  5. ml5.js 1.0 and Guest Conductor Patt Vira

Assignment 06
Option 1: Choose one of your algorithmic art assignments code from the last semester or create a new algorithmic art sketch. When we run the app, the user can change the properties of your art work by using his/her hand gestures. Use the code Hand Pose Detection with ml5.js as reference. Watch related videos and review the code examples on the page to get inspiration.

Options 2: Create three different masks in Photoshop or Illustrator. Upload the masks to your project. Use the code Face Mesh with ml5.js as reference. Whenever we run the app, make the app chooses randomly one of the masks and display on the user’s face.

Assignment 1: ML

  • You can use face, hand, or body position to move your character. Refer to the example code that I wrote in class time.
  • Upload the link of your sketch
  • Upload The codes as well in zip format.

Assignment 2: Mask

  • You can choose whatever image you want.
  • You can create illustration using simple shapes.
  • We will write the code in class time. 
  • Upload the image you choose. 
  • References : Computational Mask Repo, Generative Masks, Ref3

week 7

2025-2026

You may choose one of the following:

Option 1: Interactive Art Installation
Objective: Create an interactive digital art piece that responds to real-world objects.

Instructions:

  1. Collect and Train: Gather at least 10 distinct objects.
  2. Develop with p5.js:

Integrate the trained model into a p5.js sketch.
Design visual elements that change based on the detected object. For example, displaying different animations or colors corresponding to each object.

Option 2: Educational Game
Objective: Develop a simple game that teaches users about the objects recognized by the classifier.

Instructions:

  1. Collect and Train: Select 10 educational items (e.g., fruits, geometric shapes, tools). Train a model using Teachable Machine to identify each item.
  2. Game Development: Create a p5.js game where users present objects to the camera. Provide feedback or facts about the object upon correct identification.

Option 3: Assistive Tool
Objective: Build a tool that aids individuals with visual impairments by audibly identifying objects.

Instructions:

  1. Collect and Train: Assemble 10 everyday objects. Train an image classifier using Teachable Machine to recognize these items.
  2. Develop with p5.js: Integrate the model into a p5.js sketch.

Implement functionality to speak the name of the detected object using the p5.js sound library.

2024-2025

Please READ💱
No Late Submissions❗❗❗If you don’t understand ask me, or your friend, or to an AI chatbot.  
  • Use Decomposition, Flow, Translation, and Algorithm Design steps for your mask generation. I want to see how you implement your ideas. Upload text, diagram or any kind of material that you include your programming activity. Create a pdf for your design process as I show you in the presentation. You don’t need to include material for the Algorithm Desin section since your codes on openProcessing is the last step actually. (40 points) Tutorial
  • Write down the mask code. (20 points)
  • Apply ML5 library to enable head tracking on camera. (20 points) 
  • Skim the attached document (Form+Code Book, Repetetion pg. 42-65)
  • Choose an image that includes repetition in the artwork from the follwing link.
  • ❗Submit the openprocessing link.
  • ❗Submit the sketch source code as zip file as well.

week 8

2025 - 2026

Personal Portfolio Inspiration

The only web design inspiration sites you need:
Build, Share, and Explore Developer Portfolios → Portfolio creation guides
http://curated.design → My personal fav
http://land-book.com → Large selection
http://landing.gallery → All niches
http://saaslandingpage.com → SaaS
http://admiretheweb.com → Unique
http://supahero.io
Would add http://mobbin.com to this!
unicorn.studio — No-code WebGL Tool
Some other list of inspirational projects to check.
Built At Lightspeed - 4000+ Themes, Templates & UI KitsThe world’s largest marketplace of themes, templates and UI kits for the modern stack.

Hand pose Examples

p5.js Web Editor | Hand Pose Thumbs Up or Down

Pose Net

Object Detection and Speech Synthesis

Teachable Machine

2024 - 2025

  • Finalize the code and submit the source code and openprocessing link.
  • Choose the most appropriate options for the artworks included in each survey. You can choose multiple choices.

week 9

Holiday

week 10

2025-2026

Load a CSV dataset and create a static data visualization that reveals interesting patterns, comparisons, or distributions. Your visualization should be visually engaging and thoughtfully designed. Do not forget to include a legend in your design.

Inspiration: Look at Information is Beautiful for creative static visualizations!

Suggested Datasets (or find your own):
Submission Guidelines:
  • Submit p5JS link
  • Submit source code as a zip file.
Moodboard & Final Project Proposal Submission Guideline:
  • Submit your mood board as a separate JPG file.
  • If you have already had a specific idea about the final project, you must prepare a document, diagram, illustration, or anything that visualizes your project to help us understand the details.

week 11

Project Proposal Submission

API Calls

Check the following page (List of Free Rest APIs) to access more API-related content resources in the free version.

Machine Learning

Daniel Schiffman

1: Introduction (9/5)

2: Transfer Learning (9/12)

3: Pre-trained models 1: Body (9/19)

4: Pre-trained models 2: Face and Hand (9/26)

5: Training a Neural Network 1 (10/3)

6: Training a Neural Network 2 (10/10)

7: ml5.js project presentations (10/17)

8: Introduction to Transformers.js (10/24)

9: Language Models (10/31)

10: Image Generation Models (11/7)

11: Final Project Proposals + Fine-Tuning (11/14)

12: Final Project Proposals + TBD (11/21)

13: Final Project Play Testing (12/05)

14: Final Project Presentations (12/12)

Final Project Instructions

✍ If you think that your project is ready, fill out the submission form also. Click the link to download Project Template

GRADING Policy

As it is declared in the course syllabus, your final project has 30% weight on your final grade. You will be graded according to the following criteria;

DescriptionPoints
Detailed Comments in the Code20 PTS
Use of Variables20 PTS
Aesthetics, Design Balance, Context20 PTS
Project Document20 PTS
Presentation20 PTS
TOTAL100 PTS

🧠 You are free to propose any project idea as long as it includes programming. 

If you need a topic or theme, you can utilize one of the following concepts;

  1. A project including machine learning ideas using → ml5 library 
  2. A project including interactive platform games. Check previous students’ works → 1, 3, 4, 5, 6, 7, 8
  3. Interactive educational applications and games. Check previous students’ works → 1
  4. Puzzle games → 1
  5. Sound interactive games and applications → 1, 2
  6. Interactive applications about a specific theme → Travel Guide, Cancel Culture
  7. Interactive illustration stories → 1
  8. Audiovisual VJ apps → ASCII-art, Drum Performance Visualizer, Op-art, The Story of Nothing
  9. Skeuomorphic conceptual applications → 1
  10. Generative Art (Recursion, Fractals) → 1
  11. Generative Art (Image Processing) → 1
  12. Generative Art (Abstracted formalism) → Fish, Generative Logo
  13. A project including Algorithmic Art Praxis. Choose multiple categories from the cheat sheet that I distributed to you in class and create series of artworks according to a theme and print them to fine papers. Check the existing artworks to get inspired → link. You can view specific category items using ALAP website.

Graph View