Campus Comic Creator

Ground projects in time and space and find localized reference images!

Comment

Inspiration

Instead of AI generating William & Mary, why not choose from real images?

I needed some comic background art. Many webcomic creators use 3d models to generate different perspectives of the same scene easily. Initially I wanted to figure out how to make stylized background of campus for a comic, but it was pretty hard to just find images.

I noticed that a lot of people have their own images, it's not easy as an artist to track down and get permission to use images. Especially ones provided by the college are all copyrighted and or not accessible in a decent resolution.

That difficulty leads a lot of people making one off edits, memes and poster art to simply use an AI generated image. Why go through the trouble of using real images when a diffusion model produces something instantly?

For an artist, it's important to have tools to help make art. Sometimes it feels like AI trends are stacked against those making art, but I don't think imagination itself is limited, but the tools that artists rely on haven't kept up.

I discovered that most wikimedia commons images and flickr images can be filtered by geographic location and a lot of them are creative commons licensed. This project aims to extend those viewers into a path plotter and citation creator, all in one with a fun visual novel demonstration pipeline.

Using real images from a real time and place is especially important today, as grounding art in reality is a great way to distinguish it from imaginary AI hallucinations. William & Mary's campus is really beautiful and has great backdrops that can be used for an educational visual novel.

Geospatial data also has additional benefits for artists. Having spatial awareness, knowing where you've been and worldbuilding as a pathway is a technique used by animators and game designers very effectively. Further extensions can help find shadows and color theory for the time of day in a specific place efficiently, giving artists more tools to ground their work in reality.

What it does

Campus Comic Creator is an interactive map of William & Mary campus, displaying a timeline of historical imagery. A year slider filters which photos are available at each stop, so the same walk can look different depending on when you take it. Click two or more photos to plot a walking path between them. An OpenStreetMap pedestrian-routing api provides the paths. Once you have a path, the comic creator procedurally styles the photos into comic-ready backgrounds live in the browser. Choose character art or start export backgrounds to continue making art. The live demo is a visual novel concept, shareable and interactive.

Civics focused

People should be making content about themselves and their local area! Being aware of history and sharing content driven by local history encourages civic leadership and responsibility, bridging generational gaps and different perspectives. Grounding media in real areas that people recognize helps cultivate trust and the common good, stewardship of local history and reinterpretation of everyday things. AI helps here to understand and engage with media that is not easily discoverable. Instead of being sharing AI art, why not share something you made, with the help of AI, that is actually based in real images that real people cared enough to share. Turning knowledge into action is what you add by creating a fun interactive comic. Political cartoons and local media are key parts of civic memory and community problem solving and this is just one creative approach that might facilitate greater human interaction in the age of information.

How we built it

  • Map & routing: Leaflet.js for the interactive map, OSRM's public pedestrian-routing API for multi-waypoint path plotting, OpenStreetMap building footprints pulled via the Overpass API.
  • Data sourcing: downloaded Wikimedia Commons' official geosearch API directly for openly-licensed historical campus photos.
  • Procedural stylization: CSS-based halftone or palette-aware ordered dithering — all running client-side.
  • Narrative: written in Ink (Inkle's branching-narrative scripting language) and run in-browser via inkjs. Just a demo
  • AI Can be integrated with Gemini or elevenlabs, but chose not to with time constraints. Used AI to generate code.
  • Hosting: a single static site, no backend or database — everything is precomputed once and shipped as static files. Served as Github pages static site.

Built With

Share this project:

Updates

Submission history