ASCII Town

As an exercise getting us familiar with code editors, we’ll ‘build’ an ASCII Town to commemorate the Spring 2024 UI Design Programming 1 class. Pulling from concrete poetry and typewriter art, the participants will create imaginary dwellings using the ASCII character table.

Adapted from Mindy Seu’s ASCII Town workshop at A-B-Z-TXT 2017

Instructions

Part 1: Outside

Let’s draw the outside of your house.

First, download Sublime Text onto your computer.
Open your text editor.
- Create a file and save it as exterior-yourfirstnamelastname.html.
  Put this file in a safe place on your computer where you will not lose it (maybe your desktop for the time being – more on your file’s location next week)!
- example: exterior-chrishamamoto.html
- ~~no spaces~~
- ~~lowercase~~
- Use this document to create the exterior of your ASCII house.

Each student will have a house in the SNU-TXT village. Create the exterior of your house using the specifications below in the HTML document you just created.

In your text file, draw an image using the characters on your keyboard. Refer to this repository for all ASCII characters
Draw the exterior of your house on a plot of land that is within the range of the specifications below.
- Width: minimum 20 characters, maximum 50 characters
- Height: minimum 10 lines, maximum 20 lines
- Include a sign with your name so your friends know which house belongs to you.

Styles to consider:

typewriter

pixel characters using ░ , █ , ▄ and ▀

shading using symbols with various intensities

lineart

Part 2: Inside

Now that you’ve drawn your house, let’s decorate the inside.

Create a new .html file using the same naming pattern (interior-yourfirstnamelastname.html).
Draw the interior of your house. Some things to consider as a starting point:
- rooms
- paintings
- plants
- framed concrete poetry

There are many elements over which you do not have any control. Use these constraints to your advantage!

Monospaced font
One size (16 pt)
One weight (no bold, italicized, etc)
One color (black)
No links
No mark-up
No motion
There is no width or height restriction for the inside of your house. Use the negative space creatively.
Consider creating movement through scale, placement, and scrolling.

I'd encourage you to think of your ASCII house as both a way to (re)introduce yourself to the class and share your interests and personality with us, as well as (in a low-fi, and literal way) stake claim to space online. However, for this part of the exercise we will be looking at your ASCII houses in your code editor. Next week we will format and upload them so they can be viewed accurately online.

Have fun with the project, and experiment with the text editors artistic potential!

Next week: formatting and uploading for the web...