Week 9 • Generative Coding
To Do This Week
- Work collaboratively on your group 2045 World-Building Website.
- As a group, compile and synthesize all world texts into a cohesive draft written in your chosen presentation style (documentary, journalistic, fictional, or exhibition).
- Each group member must carefully read, review, and edit the draft for flow, voice, and tone—bring back the human touch.
- After human review, run a final AI-assisted edit to clean up and balance the writing style across sections.
- Break the final text into 5–10 sections or pages for your website.
- Decide how group work will be distributed:
- Coding & layout
- Design & color scheme
- Image integration
- Writing & editing
In Class
Sample Prompt to Generative an HTML Template
Prompt: Create a responsive HTML5 webpage with a <header>, <nav>, <main> (with 2–3 columns), and <footer>. Include sample elements: one <h1>, one <h2>, one <h3>, two <p> paragraphs, and one <img>. Use CSS Grid or Flexbox for responsiveness, and add one simple generative or interactive JavaScript feature (for example, change colors or text randomly, or update layout based on screen width).
Project Workflow:
Group Work Session:
- Finalize your group’s text drafts for the website.
- Plan layout and information architecture—how users will move through your site.
- Decide on a style of presentation (documentary, journalistic, fictional, exhibition).
- Establish a color scheme, typography, and visual hierarchy.
Website Development:
- Create a page template with:
- A consistent header and navigation bar
- An
<h1>title for each page - Author names or group name
- An
<h2>subheading for that page’s focus - A footer with course info and links
- Each page must be responsive and apply visual hierarchy through size, spacing, and contrast.
- Use one shared external stylesheet for all pages. Add new styles at the bottom with clear comments.
- Add limited CSS effects or simple JS interactions to enhance the experience.
Submitting/Sharing:
- Each student will host their copy of the site on the DTC server (let me know if you are not in DTC) and submit their own project URL on Canvas.
- Groups share their projects on Slack.
- All copies should contain identical content and structure.
Presentation:
Key Idea: This week focuses on translating your group’s speculative world into a functioning website. You are not just coding—you are designing an experience that conveys the mood, tone, and interconnectedness of your 2045 world.
- Each site must include an About page with a team statement, roles, and a list of AI sources (ChatGPT share URLs).
- Apply clear visual hierarchy—headings, spacing, and color help readers navigate your content.
- Use consistent design across all pages for cohesion.
- Groups have one additional week to refine the project before final submission.
Project 2: The Year 2045 — AI-Entangled Worlds (20 %)
Due: Oct 27
Objective
In groups of 3–4, you will collaboratively design, research, and present a richly imagined world set in the year 2045. Your speculative world should explore how AI has become deeply entangled with science, health, government, education, culture, and everyday life—not as separate “themes,” but as an interconnected system of influences.
The goal is to imagine a plausible future, grounded in current research and trends. Avoid extreme utopias or dystopias. Instead, focus on realistic transformations and tensions: What might daily life look like if AI accelerated biotechnology, health or energy breakthroughs reshape what it means to be human? For instance, what are the cultural and social consequences of a breakthrough that makes energy cheap and abundant, or that dramatically extends human lifespans?
Drawing on cyborg, transhuman, and posthuman frameworks for understanding human–machine entanglement, your team will create a multimodal documentation website—a “world bible” that blends research, narrative, and creative media. Imagine your site as a documentary or museum exhibition about this future world. It should show evidence of deep research, imaginative thinking, and inventive use of generative AI.
Note: This project will lead directly into Project 3, where each student will create an individual multimodal work (slideshow or video) set within this shared world.
Collaborative Process
- Form a group (3–4 people) and discuss your vision of the world and a single technological breakthrough (e.g., clean fusion energy, a cancer cure, universal basic income, AGI assistants).
- Brainstorm and imagine the consequences of this breakthrough—social, ecological, ethical, economic. Then write a 1-paragraph world summary to guide your collaboration.
- In class, each group member chooses two domains from the list below to research and develop in detail. Using the starter description of the world, start a chat that you can probe the AI with questions and what-ifs. Set a context and role for the Chat. The end result should be an output text describing in detail yoir domains.
- Consult real sources—white papers, policy reports, scientific research, or journalism—to ground your speculation, but don't discount your own imagination.
- Have an AI model integrate the group’s texts of chat summaries into a single world description. Review, edit, and iterate together.
- For next week, each student will create AI-generated images that will supplement the text of their two domains. Decide with the group on image style parameters.
- Next class, you will build a group website combining all text, images, and links.
Domains of Exploration
1. Environment & Geography
- What does Earth look like in 2045? Which places are thriving, and which are struggling?
- How have climate change and new technologies affected cities, farming, oceans, and wildlife?
- Are there new kinds of homes or cities—floating, underground, or off-planet? How do people connect with nature and nonhuman intelligences (animals, machines)?
2. Technology & Infrastructure
- What everyday technologies shape people’s lives (AI helpers, robots, biotech, clean energy)?
- How do people work with machines? Are they teammates, bosses, or invisible systems in the background?
- How is energy made and shared? Is it free and renewable, or controlled by big companies?
3. Economy & Work
- What kinds of jobs or creative work exist in 2045?
- Has automation replaced most work, or made space for new types of meaning and innovation?
- How do people earn and trade—money, credits, reputation, or something else?
4. Education & Learning
- What does learning look like in 2045? Are schools still physical spaces or more like global networks?
- How do students learn—with AI tutors, simulations, games, or real-world apprenticeships?
- What skills and values matter most in this world—creativity, empathy, coding, critical thinking?
- Who controls education—governments, communities, AIs, or individuals?
5. Society & Governance
- How are people organized—nations, eco-cities, online communities, or global cooperatives?
- How are decisions made and justice maintained? Is AI involved in keeping things fair?
- How do citizens take part—voting, consensus rituals, social media, or AI-led debates?
6. Culture, Media & Art
- What kinds of art and media are popular in 2045? How do people express themselves?
- Is AI a creative partner, a tool, or a full-on artist?
- What new styles, languages, and hybrid art forms have appeared? Are there cultural revivals or rebellions?
7. Body, Mind & Identity
- How have biotechnology and neural tech changed what it means to be human?
- How do people think about identity, beauty, and gender? Are bodies customizable?
- What new psychological or spiritual challenges come with longer lives or digital minds?
8. Everyday Life
- Describe a normal day for an average person. What do they see, eat, and do?
- What do friendship, love, and family look like?
- How do people relax, find meaning, and stay connected in an always-on world?
9. Key Tensions & Themes
- What gives people hope in this world? What worries or divides them?
- What big moral or philosophical questions shape daily life?
- Where do resistance and rebellion show up? Who has power—and who challenges it?
Deliverables
- Speculative Scenario Narrative (2500–5000 words total): A collectively written overview describing your world’s origins, tensions, and transformations. Address how AI intersects across multiple domains and shapes daily life.The groups desides style and approach: documentary, fictional, journalistic or museum-exhibition.
- AI-Generated Media Assets: 10–20 visuals (concept art, environments, artifacts) with captions and alt text. Make room for audio or video inserts later (ads, “news” clips, micro-scenes).
- Group Website: A functional HTML/CSS/JS site with coherent design and navigation, integrating all narrative and media content. Group decides of presentaion and tone.
- Process Documentation: an About HTML page with shared chat urls, citations, research sources.
- Group Reflection (300–400 words):Also for the About page, a co-written reflection on creativity, research, AI tool use, collaboration, and what your world expresses about hopes and fears of AI futures.
Evaluation Criteria
- World depth & originality: How fully realized, interconnected, and imaginative is your 2045 scenario?
- Integration of research & theory: Evidence of real-world research and critical frameworks.
- Quality & coherence of AI media: Alignment of visuals/audio with your world’s tone and logic.
- Website design & functionality: Aesthetic cohesion and technical reliability.
- Transparency of process: Clear documentation of AI use, citations, and collaboration.
- Collaboration & reflection: Evidence of meaningful teamwork and critical engagement.