The following is a dev log about my first time trying to animate ascii art for the POSIEL Mini Assignment Media Story.

Besides 80s to dot-com era home pages, part of my inspiration for clean, text-based, design comes from clever uses of text-based interfaces such as the rogue-like game A Dark Room. So when prompted to make a blog post with a non-text-language media, it felt natural to create visuals with ASCII characters. With the photography side of my portfolio already quite present, I wanted to try something different, and to keep some semblance of a theme, I decided to make a winter-themed animation centered around coffee. Instead of using ambient audio and telling the story through visuals, I decided to use the visuals to set the theme and add diagetic audio to tell the story. This means I have two goals:

• Create ASCII art and animate these frames.
• Play audio in the background.

Because I haven't made many ASCII scenes before, I brainstormed some aspects I would like to see (snow, trees, coffee) and asked ChatGPT to produce a scene. The result was a pretty generic starting point which quickly took shape as I edited it towards a scene I could project a narrative onto. The result was a simple depiction of a steaming coffee in a mug placed on a counter top shown in Fig. 1. Behind it is a window with some trees and falling snow. I liked this as it creates a consistent framing of two different animations. I felt it could be more lively, so I styled the coffee and steam with elements of the solarized theme to highlight them as the focal point.

       *        .      *        .  *   
   *       *   .  *       . *       *    
          /\         /\        /\  
         /**\       /**\      /**\  
        /****\     /****\    /****\  
       /******\   /******\  /******\  
      /********\ /********\/********\  
     /******************\ /*****************\  
--------------------------------------------  
                      
             --(~~)--  
               \__/  

            

| |      *        . *    *        . | |
| |  *       *   .          . *     | |
| |        /\       /\           '  | |
| |   '   /**\     /**\             | |
| |      /****\   /****\  ' /\      | |
| |     /******\ /******\  /**\     | |
| |    /********\********\/****\    | |
| |   /**********\********\*****\   | |
+-+---------------(-----------------+-+
                (  )               / /
              |(~~)|┐             / /
               \__/─┘            / /
________________________________/ /
________________________________|/
                           | |

Animating is fairly easy. It came down to creating 12 frames where the snowflakes fall in an orderly way (* fall every one to two frames, and can drift; . fall every frame straight down; ' fall every frame and can drift). The website loads JavaScript which cycles through the the frames at a set rate, and re-colours the appropriate characters brown (#9c6b08) or grey (#93a1a1).

On the creative side, I chose to use a simple recording taken from the inside of a window during snowfall as the ambient noise. I cut it down to two minutes and blended the start into the end so it would loop endlessly. For the narrative I chose a few simple segments below:

To add audio in the background we use a common <audio> element using autoplay loop with a <source> that selects the audio file and driver for the browser to use. From some reading I learned that its best to use the audio/mpeg and audio/ogg types for widest browser support. This was fine as I planned to make my own simple track in DaVinci Resolve which I can export in both formats. A summary of modern browser audio support can be found at W3Schools. I recorded ambient noise using a Zoom H2N microphone in stereo, edited sounds to produce a linear narrative, and exported two tracks: one as the ambient and one as the diagetic narrative elements. This way we can keep the ambient noise looping, while going through the story once. For simplicity I edited all the audio in DaVinci resolve together so that I could easily manage the tracks shown in Fig. 2, time the narrative, and adjust the audio levels for a balanced output. The audio was exported individually and can be listened to below.

Ambience 

Narrative

I found the audio could get annoying, so I wanted to give the users an easy way to disable it if desired. Again to avoid text, I chose a simple open license SVG of a speaker which could be toggled between muted and un-muted states. JavaScript is used to toggle the audio and which SVG is shown when clicked. The flow of this page is such that the background audio is always playing, but the narrative plays once, so I added a "replay" icon to allow the user to restart the narrative. I believe this UI could use some work, as without text elements it is left a little ambiguous... but it works! Check it out in the next entry (: