Turning Hand-Drawn Art into AR: An Animation Project Powered by 2026 Technology
This is my second time participating in this event. During the project, I shifted focus to bringing a child's hand-drawn gift to life through AR animation. By leveraging ChatGPT for image generation and Codex for Web AR development, I completed the implementation in just ten minutes. Comparing this to my research in 2012, the evolution to browser-based, high-efficiency development by 2026 is truly striking. It was a deeply satisfying experience to create this small-scale AR project.
Today marks my second time participating in 「Ship It Saturdays」. My original plan was to combine animation with a Landing Page, but an unexpected and delightful turn of events occurred: a sweet child gave me a hand-drawn picture, which truly made me happy.
While working on the project, I hit a mental block, so I decided to pivot and attempt to transform this hand-drawn picture into an AR (Augmented Reality) animation, effectively bringing the static artwork to life.
Creation Process and Technical Practice
To realize this idea, I followed these steps:
- Asset Preparation: First, I scanned the hand-drawn sketch into my computer.
- AI Image Generation: I experimented with various AI tools, such as Seedance, Wan, and Klin, but ultimately found that ChatGPT's image generation feature yielded the best results.
- Animation Production: I used the original hand-drawn sketch as the "first frame" and the AI-generated artwork as the "last frame." By linking them using specific techniques, I finally crafted the best-looking animation using the web version of Gemini.
The Impact and Evolution of AR Development
Reflecting on AR development, I am deeply moved by the technological leaps over the years:
- Technology Comparison: My journey with AR began back in 2012 during my graduate studies. Back then, AR development relied entirely on dedicated apps, and the process of building models and images was incredibly tedious.
- The 2026 Breakthrough: It is astounding that by 2026, all of this can be achieved purely through a mobile web browser (Web AR).
- Efficient Development: I used Codex to build the web-based AR application. My requirement was simple: when the program recognizes a specific image, it should play an animation at that location. To my surprise, Codex completed the development in just about 10 minutes.
Although this is just a small demo, I feel incredibly happy to have created this AR project myself, and the child loved it as well. This creative experience allowed me to once again experience the charm of technological development in 2026.
Project Info
> Demo Page: https://demovibecodingjapan.web.app/fantasyarforlittlegirldream.html
> Demo Page QR:
> AR Image:
> Github: https://github.com/perfact-tang/fantasyarforlittlegirldream