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: E-lit Project (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 ChatGPT
- Script Planning
- JavaScript Implementation
- Testing and Refinement
- Styling with CSS
- Include the Statement
- Final Submission
Suggested Ideas:
- Interactive Poetry
- Generative Language Art
- Recombinant Narrative
- Text-Based Puzzle
Project 4: Map Story (20%)
Use the Mapbox API and JavaScript to create a story with at least 5 locations. Include text, images, and media for each marker. Provide a project statement in code comments.
Development Steps:
- Choose a theme
- Storyboard 5+ locations
- Consult with ChatGPT
- Map and script planning
- Implement Mapbox and JavaScript
- Test and debug
- CSS styling
- Integration statement
- Final submission
Suggested Ideas:
- Travel Story
- Historical Journey
- Literary Pilgrimage
- Environmental Impact
- Cultural Exploration
- Interactive Fiction
Project 5: Canvas Drawing (5%)
Create a drawing using the HTML5 <canvas> element and JavaScript. Draw at least 3 shapes, use 2 colors, and optionally add animation. Focus on experimentation and play.
Project 8: P5js Animation (5%)
Use p5.js to create a generative animation. Your sketch must include randomness (using random() or noise()), animation, and logical steps commented in the code.
Collaborative HTML5 Canvas Game: 25%
DUE: December 3rd
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.htmlin a folder namedgameand 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.htmlin folder namedgame