Senior Design Progress Blog - Final Post

Oh man it's the end! First of all, here's my final presentation video and a link to the hosted website, www.girlsbuilttech.com

Getting the site hosted was it's own ordeal (involving Amazon Web Service being a pain, figuring out how to get the proper port to load since Port 80 wasn't working, figuring out how to end a nohup process in linux, and general internet woes) but its up and running now.

Facebook sharing didn't work out as well as I would've like due to limitations on facebook's end, but I'm going to keep working on it even after submission.

I am very satisfied with the results of my project programmatically speaking. The games work well and could be expanded with relative ease. I feel the look of the site is appealing and I put some effort in to try and make it resizable for different sized viewing screens.

For future work I would obviously love to add more pages to include more women and more mini-games. I have been in touch with the producer and creator of “The Computers”, the documentary about the 6 women who programmed the ENIAC. I would also like the make a mobile-friendly version of the site, although that would take some serious artistic changes. Once I’ve included enough characters, I might also consider creating a login system that saves users’ progress in a database. I would also still like to add the reference page I have been working on, with links to websites such as Girls Who Code and Codecademy.com

I had a great semester working on this project and learned a lot about web programming that I didn't know before!

Senior Design Progress Blog 12

Aaaart!: I started on Hypatia's page layout and interactive features. Here rough layout and final character art are now incorporated into the site. Here's some progress art:

You can see what her page looks like in the context of the website in the screen capture below. (Her page is also resizable like the others but I didn't demonstrate that in the video.

Code!: I created the popup system for the interactive features so now when you click on them you get informational windows about the person! I created a general popup wrapper that takes care of opening and closing functions for all popups, then each character has their own unique style of popup based on their work/what century/decade they were alive during. In my screen capture video below you can see Ada Lovelace and Grace Hopper and how their popups differ. I also added a new interactive feature with Grace Hopper related to COBOL. Right now its a demonstration in how COBOL's similarity to english makes it easier to understand, even if you don't know how to code and demonstrates the importance of readability by showing what compiled machine code looks like.

Branding!: Finally I spent quite a bit of time trying to come up with an official title for the site (and domain name) that captured the tone and audience that I'm aiming towards. I wanted to make it clear from my title that this is a website focused primarily on women in the field of computer science/technology, but I liked the idea of using "Girls" instead of "Women" in the title for three reasons: 1) "Girls" is sounds more fun and less historical, 2) I tried to draw the characters in such a way that they looked a bit like young girls dressed as older women, to make them more relatable role models for young girls, so "Girls" is a more accurate description of the website's content, 3) I like that the title is in direct opposition of the stereotypes  "Girls can't do math" and "Girls can't code"

My two favorites were "Girls Who Built Tech" and "Girls Who Shaped Tech". Right now I'm leaning towards "Girls Who Built Tech" with the domain girlsbuilttech.com. I like the boldness of "Built", it's in your face and direct. My only concern is that "Built Tech" initially sounds like a physical making of machines, rather than the building of an Industry and Field of study. The connecting thread between the women I chose it that they took the work of other engineers and make them interactive and approachable and changed the direction of computer-human interactions. Ada Lovelace didn't built the first computer, but she wrote a program and imagined a way in which we could talk to the machine using symbols and words. I really liked how the word "Shaped" is more abstract and captures this idea of shaping the future of technology rather than physically building the machines, but as a title it isn't bold enough. The url girlsshapedtech also sounds too soft and could be accidentally read as girl-shaped-tech (which my friend thought sounded like weird female robots)

Senior Design Progress Blog 8

I had my Beta review this week! I focusses on creating 3 example pages with interactive element, badges and the system for unlocking these badges, and research into what other mini-games I want to include on my website.

Video demo of interactive pages and badge unlocking system:

For my three example pages I chose Ada Lovelace, Hedy Lamarr, and Grace Hopper. For Ada my three interactive elements (which currently animate on hover, but don't open up any info boxes or fun facts yet) are the Jacquard Loom, a letter from Charles Babbage, and her notes on his Analytical Engine (the first computer program ever). For Hedy, the elements are the piano (which will open the torpedo frequency hopping game) and the star (representing both her induction into the Inventor's hall of fame and the Hollywood walk of fame). For Grace, the elements are the UNIVAC computer, the COBOL manual, and the moth flying into one of the computers. (Both the moth and the cobol book animate based on how much the user has scrolled.)

Initially after log in, all the badges are locked. However once the user selects all the interactive elements on a given page, the badge for that page is unlocked. Next, I'm going to implement sharing features for the badges.

Ideas for Mini-games: For Joan Clarke I want to implement a version of Nonograms, a pattern finding/Sudoku-esque puzzle game. For Grace Hopper I looked into coding examples targeted at younger children and I'm thinking about doing either a fill-in-the-blank-variables COBOL code with if statements, or determining character movements using for loops. I'm also thinking about including a demo of what the translated code looks like in binary to demonstrate why high level programing languages are so important/easier to understand.

Senior Design Progress Blog 5

The past week I've been pretty sick, so I decided to focus a bit more on research and design, rather than code or super detailed artwork. I've started getting a general idea of what I want the different pages to look like and what interactive elements I want on each page. For example, here's some of the layouts I'm working on:

For Ada's page: For the loom I'm currently planning on having information about how it inspired Ada and how loom punch cards work. I found a very cool animation from the Victoria and Albert Museum that demonstrates how loom punch cards work that I'm also planning on linking to. For the letter on her desk I'm going to include some information about her correspondence with Charles Babbage (including one of my personal favorite quotes by Babbage about Lovelace, referring to her as an "Enchantress of Numbers"). The other loose paper's on her desk are going to show information about the first computer program she wrote for Babbage's Analytical Engine for solving Bernoulli Numbers.

For Grace's page: I want to have a moth animation that plays based on how much the user scrolls. When selected it'll show the entry from Grace Hopper's diary about finding the moth and popularizing the phrase "computer bug". Selecting the UNIVAC I will display information about how she helped develop it. Selecting the COBOL book will describe how COBOL works and why it was so important.

For Hedy's page: For the piano I'm planning on creating a mini game that demonstrates how spread spectrum and frequency hopping communication work. I'll have the user choose a key pattern that the computer has to guess (in the time it would take another human to guess) in 30 seconds. It'll start by allowing the user to use only a one-key sequence, which the computer will be able to solve easily within the time limit. However when the user is able to use all the keys in a 10 key sequence, it'll demonstrate how difficult it is to block the frequency. I'll animate a little torpedo traveling towards a little animated submarine for the timer. For the Hollywood Star on the wall I'm going to show information about Hedy Lamarr's induction into the Inventor's Hall of Fame as well as her success in movies, demonstrating you can be interested in the arts and science.

Currently everything is in black and white because I want to consult with my advisor for color pallets (since I know absolutely nothing about color theory and don't want to ruin everything by choosing awful colors)

Senior Design Progress Blog 4

Some more art: I'm getting closer and closer to finalizing what I want my characters to look like. I spent a lot of time playing around with Hedy Lamarr and Evelyn Boyd-Granville (as well as Ada Lovelace)--what textures I want to use, how stylized their expressions should be, how childish their frames should look. Here are pngs of what I've got currently:

A little code and some general layout: My alpha review is coming up this week so I decided to put some content into my website so it's not just blank pages scrolling by. I started doing a little research into free (& for commercial use) fonts and put in some of my more complete portraits and a general idea of what copy I want to include for each important woman. I also updated my bottom nav and implemented my own top sticky nav as well.

When hovered on, the top nav pops down and becomes more opaque. I've started thinking about resizability and have been using relative spacing for all my elements.

For Evelyn, I'm going to take some of those details about her career move them into interactive features that the user "discovers" when they click on the right spot

I also started working on styling the welcome page a little so it didn't look so bare-bones html anymore. Since I haven't finalized my color scheme/final look/title its pretty basic right now.

Senior Design Progress Blog 2

Code Updates: I've continued working on my Express app. I researched EJS templates and managed to create layout.ejs and header.ejs files such that I can dynamically construct my web pages and make use of modularity and decrease redundancy. I also researched and implemented Express session objects and cookies. I'll now be able to track user information (right now just their name, but in the future, what interactive items they've selected, what awards they've unlocked etc) even if the user navigates between pages or away from the page (without having to store information in the url). To test this I implemented a simple welcome page that will be included in my final project. The welcome page asks for the User's name (there will also be an option for continuing without a name). Once the user selects the "Ready" button, it updates the session object with their user information and renders the home page. If a user attempts to view a url without an existing session object then it renders the welcome page. (Sort of like simplified login functionality)

Art Updates: This week I met with my advisor to discuss my character designs and digital concept sketches. I'd decided that I liked a more simplified, cartoony look. I did the following sketches to show that even with simple features, I could still make my characters look distinct from each other:

The two on the left are both Ada Lovelace with different hair, but I thought I did a good job distinguishing Evelyn Boyd Granville and Grace Hopper

My advisor loved the shape and the style, but she wanted their eyes and lips to be more distinct and expressive. (She especially liked how thoughtful Ada Lovelace looked in this portrait and wanted me to incorporate her expression into her character) So I made the following updates to the character design. I'm very happy with the results and want to keep this look for my final images.

I prefer right Ada's expression, but left Ada's hair style. I'm really happy with Evelyn's features, I just want to make a few subtle changes to make her look more child-like. I'd still like to make some changes to Grace's expression, especially her lips.

For their bodies and poses I've started some simple flour sack type drawings. I want their poses to be indicative of their work and character.

Top (left to right): Hedy Lamarr striking a classic Hollywood glamour pose, Evelyn Boyd Granville, Grace Hoppy at ease (to be in her Naval uniform), and Hypatia in her Roman Chiton

Here are some of the other sketches I worked on while I was still deciding how realistic/Keane-esque to be:

Senior Design Progress Blog 1

This is my first blog post about my Senior Design project! I've made both a tag and a category called "Senior Design" so it'll be easier to track. I've started off on three different aspects of my project:

1. Historical Research. I've begun researching the women that I was planning on including in my project and started to narrow down my list, as well as get an idea of what aspects of their careers I'm going to include in my website. Right now my list includes: Hypatia (of Ancient Alexandria), Ada Lovelace, Hedy Lamarr, Joan Clarke, Grace Hopper, and Evelyn Boyd Granville. I was originally planning on including Sophie Germain, but having begun to research her I've realized that her contributions to mathematics, while significant, were not as relevant to the field of computer science as I would like.

2. Coding. I've started researching expressjs and managed to create a very basic express app that runs locally. I'm currently in the process of incorporating ejs templates so I can have dynamic content in my app. I'm in an ongoing process of making my laptop ready for efficient web development. I ran into some problems with my node version, but I managed to install the correct version using homebrew. 

3. Art. I've begun sketching and storyboarding. Mostly I've been brainstorming and testing out different styles for the characters. I want young girls (my target audience) to be able to relate to the women in my project, so I'm planning on depicting them as children, but dressed as they would be as when they were working on their various academics pursuits. I've been playing around with different levels of realism/stylization and humor. I'm meeting with my advisor tomorrow to get her artistic feedback. Once I choose the aesthetic for my characters, I'm going to use that as inspiration for the environment that they inhabit.

Some Ada Lovelace character sketches. I'm a huge fan of her famous crazy buns, so I'm hoping to keep those in my final design.

Happy Valentine's Day

(Made in about 30 minutes)

Gif from Animation I made as a gift

Back in January for my 6 month anniversary I made my boyfriend a hand drawn letter/animation. I'm not posting it anywhere (for obvious personal reasons), but I figured I would at least mention it because it was a fun experience. I ended up editing the final work to music which is something I hadn't done with animation before. Note to self: deciding to add music in retrospect is a lot harder than just animating to music from the beginning, but in the end it really help with timing. Here's once short gif to give a general sense of what I mean by animated letter (it is Valentine's Day after all):

Final Project for Hand Drawn Animation - Line Art

This is due in a few days, the final stretch! I have the general lineart and I'm happy with most of my motions, but the camera movements won't export for some reason (they're super important for pov shots that help progress the story) and there's still no sounds, backgrounds in some shots, or shading.

Final Project for Hand Drawn Animation - Animatic

Current animatic for final animation. There's some sound, but due to issues with TVPaint I couldn't get all of the clips to work.

Final Project for Hand Drawn Animation - Story board

Final Project for Hand Drawn Animation - Progress so far

For my final project I'm animating the story of my dog Pickles learning how to swim for the first time, by being jealous and insane. I started with some gestural sketches to get an idea of how stylized I wanted the character to be. Then I cleaned up some of the line work to simplify the characters a bit, a played around with different poses and expressions. 

I then did a test animation of Pickles running to see if animating a quadriped would prove to be more difficult than I could handle. I used video footage for the test run. 

After showing my professor the run she recommended animation a movement without the use of video footage before proceeding, so I animated the test jump without a video. We both agreed that the animation I did without a reference had more character, so I decided that I wouldn't animated directly from video for this project. I still plan to use video footage, but I only when my action is from a different angle. This way it'll force me to understand the movement rather than just copy the form.

A to B Animation

For our most recent Hand Drawn animation project we were given the first and last frame of a character animation and had to fill in the inbetweens, any way that we chose to. It was an exercise in creative motion and sticking to a humanoid character model that was provided for us. The animation had to be a minimum of 12 seconds.

Some things that I'd like to go back and improve: 

-His proportions when he's on the ground and his legs are in front of his arms

-Adding more sticky stuff when he lands and generally making it stick around for a few frames longer

Hand Drawn Animation Exercises

This semester I'm taking hand drawn animation and I'm incredibly excited about the class. Here are just some very simple exercises I've completed so far. 

A self portrait or avatar in 2 frames

Transforming one shape into another and back again

For this one I was inspired by the changing seasons. And the fact I wanted to draw a poor little determined snowman.