Drawing In Code

An exploration of artistic observation and computational thinking.

Can you teach a computer how to draw, design animations, interactive stories, and games?

The Basic Cityscape

Learn to draw a basic cityscape programatically. Design functions that allow you to design different buildings for your city.

Get Started

Basic cityscape

Flappy Square

Create a simplified version of the popular "Flappy Bird" mobile game. A "flappy square" that you "fly" through a series of walls.

Learn about animation and user interactions on your way to building a simple HTML5 game.

Get Started

Flappy square

The Animated Cityscape

Learn create an animated cityscape with a gradient sunset and lights within offices flashing on and off.

In Development

Animated skyline

Parallax Cityscape

Parallax allows you to create a sense of depth in a 2d surface. Learn how to create layers of an image that move independently, providing this 3D illusion.

In Development

Parallax cityscape

A Brick Building

Create a much more visually rich and detailed building, complete with detailed bricks, windows, door, and railing.

In Development

Brick building

The Gallery

A gallery of drawings, animations, and games.

Create your own work and let us know about it so we can add it to the gallery!

View The Gallery


Your Drawings, Animations, and Games

The goal of this website is to help you develop the skills necessary for you to create your own drawings, animations, and games.

Take the skills you learn in the lessons below and apply them in a novel way to create something completely new!

Draw Something