Course Projects

AI Use Policy

Students are encouraged to use AI tools to amplify their strengths and enhance their learning. AI can be a valuable resource for:

Learning and research (always fact-checked for accuracy)
Coding assistance and error checking
Brainstorming and world-building
Mood board creation and visual inspiration
Planning and structuring projects
Generative media for multimedia art, cinema, sound, and other creative disciplines

However, in this course, ideas and approaches will begin with you. Much of the creative process will be sketching, planning and working out logic steps for your interactive sites. This is designed to slow the process down and help you develop a clear perspective and direction before you turn to AI tools.

AI should be used as a support for thinking — not a shortcut to bypass it.

Your final submissions must reflect your own style, approach, and aesthetic.
For most projects, I may require documentation of all AI-assisted work — including transcripts of chats, prompts, and outputs used during development.
Transparency is essential to your growth in digital media and in working with generative AI. If AI meaningfully shaped your work, you should note where and how you used it (for example: “I used ChatGPT to debug a function, then rewrote the solution in my own style” or “I generated images to explore a visual style and then used my own sketches to refine and complete the scenes”). This documentation helps track your role in a complex creative process.
Direct, unmodified AI outputs should not be submitted as your own work. This includes copy-pasting code, text, or images without adaptation or acknowledgment.

AI tools — including those for generative media — are powerful learning partners, but they cannot replace the slower, deeper process of design thinking, workshopping, and evolving your own ideas in dialogue with others.

Project AI Documentation

IMPORTANT: For every project, you must:

At the very top of your script (inside the <script> tag, before any code) write a multi-line comment listing the numbered, natural-language logic steps you planned for your program. (ie. what you developed with JS Mentor)
In that same comment, briefly explain how you used an AI code tool (if you did) and provide a link to the ChatGPT or other AI chat where you got help (you can share chats).

This comment block is the most important part of your grading for documentation. Without it, the project is considered incomplete.

Project 1: Interactive Website (5%)

This first assignment brings together syntax, variables, conditionals, arrays, functions, and loops in JavaScript. Start with a simple idea for a website, just the basic elements and their interactions, and describe it in English. Use the Custom JS Mentor app to work out the logic steps based on your description and the line-by-line syntax. The site should be designed with CSS, but the majority of grading will be based on your documentation in GitHub of building a simple but dynamic website with user interaction that changes content on the page.

Suggested Ideas:

Interactive Quiz
Dynamic Media Gallery
To-Do List
Customizable Timer
Generative or Digital Art Work
Branching Narrative

Working with JS Mentor:

Describe your idea and layout for HTML structure.
Detail your JavaScript steps in plain language.
Develop the logic steps.
Start coding with the GPT’s guidance.
Iteratively refine and troubleshoot.

Project 2: Hangman Game (5%)

Design a Hangman game using JavaScript, HTML, and CSS. Start with the class-generated scripts or create a new one using ChatGPT. The goal is to understand the logic steps required for the game, to style your game with CSS and to showcase how JavaScript interacts with HTML elements. Add a visual hangman figure using HTML (no Canvas), and control visibility with JavaScript. Get creative with your style and theme!

Project 3: Generative Language Art (15%)

Create an electronic literature piece using JavaScript to manipulate text. No other media, just text designed on the page with HTML, CSS and Javascript. Include a project statement in HTML comments describing your logic and ChatGPT use.

Development Steps:

Idea Generation
Conceptual Breakdown
Consult with JS Mentor
Script Planning
JavaScript Implementation with JS Mentor
Testing and Refinement
Styling with CSS
Include the Statement
Final Submission

Suggested Ideas:

Interactive Poetry/Story
Generative Language Art
Recombinant Narrative
Text-Based Puzzle

Project 4: Weather App + Canvas Animation (15%)

Build an original weather app using the OpenWeather API and JavaScript fetch(). Your app should let a user search a city/state (or city/country), then translate the JSON weather response into a designed Canvas animation that expresses the current conditions (clouds, rain, wind, temperature, etc.).

Your finished project must include: (1) a search form, (2) a readable weather display for weather outputs, and (3) at least 5 canvas-based animations that responds to real weather data. Include as comments in the script a short project statement, logic steps and JS Mentor chat URLS.

Development Steps:

Choose a concept (mood, style, theme, metaphor, visual language).
Pick your data: decide which JSON fields you will use to display an info-card integrated in an interface along with Canvas animation based on data: temp, humidity, wind, clouds, precipitation, time of day.
Sketch the UI: layout for search + results.
Build the fetch workflow: input → request URL → JSON → update the page.
Design the Canvas system: plan how each variable changes motion, density, color, scale, or behavior.
Animate with requestAnimationFrame().
Handle errors: invalid city, network failure, missing data, empty input.
Style and polish: readable typography, spacing, responsive layout, and a cohesive “weather mood.”
Test + debug with at least 5-10 different cities and conditions.

Minimum Requirements Checklist:

Uses OpenWeather API with fetch() (not a prebuilt weather library).
User can search (at least by city/state names) and see updated results.
Displays at least 4 data points (example: temp, feels_like, humidity, wind speed, cloud %).
At least 5 different Canvas animations based on live data .
Includes loading + error messages.
Includes a project statement, logic steps and chat urls in JS comments.

Project 5: Collaborative HTML5 Canvas Game: (25%)

In teams of three, create an interactive HTML5 Canvas game that demonstrates your combined skills in design, programming, and creative collaboration. This project is an opportunity to experience a small web development workflow using GitHub for version control and to practice communicating logic, problem-solving, and design ideas as a group.

Each team will work with the Custom GPT created for this class to help plan, refine, and debug their game. Use it to translate your ideas and logic into human-readable steps before writing code. Each student will submit their AI chat transcript as part of the documentation of their contribution and learning process.

Your Steps:

Team Brainstorm: Develop a shared game concept and visual style. Decide on your core mechanic, objective, and general mood or theme.
Design and Roles: Identify areas of strength among your team—coding, sound design, animation, art direction, or logic planning—and distribute tasks so that everyone contributes meaningfully.
Logic Steps: Use the Custom GPT to describe your game’s setup, gameplay loop, and scoring in plain language before coding. Save these chats as documentation.
Collaborative Coding: Build your game using ES6 JavaScript, committing regularly to GitHub. Use branches and merges to manage contributions.
Testing and Debugging: Playtest your game as a team and refine responsiveness, balance, and performance.
Visual and Audio Design: Style the interface with CSS, and integrate sound effects, sprites, or other media to enhance the experience. You may generate assets or ideas with AI tools.
Integration Statement: In your JavaScript file, include a brief commented section summarizing your game logic (as a list), description of team process and roles,how you used AI and links to essential chat URLs and to Github Repo.
Final Submission: Upload your game as index.html in a folder named game and ensure all assets and scripts function properly online.

Suggested Game Ideas:

Platformer with Dynamic Environments: Procedurally generate levels or enemies for replayability.
Adventure Game with Expressive Characters: Use sprite animation and dialogue for storytelling.
Physics-Based Puzzle or Destruction Game: Experiment with motion, collisions, and gravity.
Dodging or Collection Game: Navigate a chaotic field of moving objects to survive or collect items.
Escape or Maze Game: Design a spatial challenge requiring exploration and problem-solving.
Educational Game: Make learning interactive through gameplay mechanics.

Grading Criteria:

Collaboration and Process: Evidence of teamwork, GitHub participation, and AI-assisted planning.
JavaScript Logic and Implementation: Effective and clear application of ES6 syntax and structure.
Creative Design and Usability: Quality of interaction, visuals, sound, and overall play experience.
Documentation and Reflection: Clarity and completeness of your logic statement and AI chat records.

Project Requirements:

Title screen with game name and team member credits
Well-commented, functional ES6 code
Integration statement and AI chat documentation
GitHub repository link included in submission
Final build uploaded as index.html in folder named game