How a designer built an ASCII animation tool with GitHub Copilot

By GitHub

Share:

Key Concepts

  • ASI Art: A form of digital art created using ASCII characters to form images.
  • Copilot: An AI pair programmer developed by GitHub and OpenAI, used for code generation and assistance.
  • MVP (Minimum Viable Product): A version of a product with just enough features to be usable by early customers who can then provide feedback for future product development.
  • Asky Motion: A web application created by Cameron Foxley to generate animations from text-based art (ASI art).
  • Animation Timeline: A visual representation of the sequence of frames in an animation, allowing control over duration and playback.

Building Asky Motion: A Copilot-Powered Creative Tool

Cameron Foxley, a brand designer at GitHub, details his experience creating “Asky Motion,” a web application for generating animations from text-based art, specifically ASI art. He emphasizes that he had no prior experience in creating ASI art, animation, or CLI (Command Line Interface) development before embarking on this project. The core driver for the project was the desire to create a welcome banner for the CLI team.

Foxley’s process began with a prompt to Copilot: “build me a web app that lets me input text files and then play them back as animation.” Remarkably, within 30 minutes, Copilot generated a functional MVP of this concept. This initial success demonstrated Copilot’s potential to rapidly prototype ideas, even for someone lacking the necessary technical expertise.

Asky Motion Functionality & Features

Following the MVP, Foxley collaborated with Copilot to refine and expand the application into a fully-fledged tool. Asky Motion allows users to:

  • Direct Canvas Drawing: Create art directly on a canvas using letters and numbers, forming the basis of ASI art.
  • Gradient Application: Apply gradients to the text-based art, adding visual depth and complexity.
  • ASY Typing Support: Utilize “asy typings” – a specific feature suggesting compatibility or integration with the Asymptote vector graphics language, though details on the exact implementation aren’t provided.
  • Animation Timeline Control: A key feature is the animation timeline, which allows users to define the duration of individual frames and control the overall playback speed of the animation. This provides granular control over the animation’s pacing and visual flow.

Copilot as a Skill Multiplier

Foxley highlights the transformative impact of Copilot, stating, “Copilot gives you access to those technical skills in a way that superpowers the creative skills.” He contrasts the time investment typically required to develop technical skills (described as “a whole other lifetime”) with Copilot’s ability to provide immediate access to those skills. This allows creators to focus on the artistic and design aspects of their work, rather than being hindered by technical limitations. He frames Copilot not as a replacement for skill development, but as an accelerator and enabler.

Open Source Contribution & Identity

Foxley identifies himself as both a brand designer at GitHub and now an open-source maintainer, indicating that Asky Motion has been released as an open-source project. This suggests a commitment to community collaboration and further development of the tool.

Synthesis

The creation of Asky Motion exemplifies the power of AI-assisted development. Foxley’s journey, from having no prior experience to building a functional and feature-rich application, underscores Copilot’s ability to democratize software creation. The project demonstrates that complex tasks, previously requiring significant technical expertise, can be tackled by individuals with strong creative vision, leveraging AI as a powerful tool to bridge the skill gap. The release of Asky Motion as open-source further amplifies its potential impact, fostering a community around text-based animation and AI-assisted art creation.

Chat with this Video

AI-Powered

Hi! I can answer questions about this video "How a designer built an ASCII animation tool with GitHub Copilot". What would you like to know?

Chat is based on the transcript of this video and may not be 100% accurate.

Related Videos

Ready to summarize another video?

Summarize YouTube Video