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 11

Mini-Games: I started incorporating my mini-games into the storybook pages and onto the home screen so they're not routed separately anymore. Now when a game is open it covers the page with a slightly opaque color. If the user clicks off the game, the game closes and the game state is lost. (Originally the game state was maintained but I changed it. I might change it back, I haven't decided yet) I continued working on the games, working on bugfixes and refactoring to make the levels more modular/easy to construct, as well as make it easier to add new minigames.

Senior Design Progress Blog 10

Code code code: This week I worked on finishing the Nonogram gameplay functionality for the Joan Clarke mini-game. I created a nonogram solution checker (as well as a constructor for 5x5 nonograms) so the game is now fully functional and playable.

In order to check if the player has successfully filled out the puzzle, I check if the solution is valid programmatically rather than having one hard-coded, as sometimes these puzzles can have multiple solutions. (I also don't want any older users clever enough to check the source code to be able to cheat) My game state contains two arrays that keep track of whether each row and column are valid. Every time the player selects or deselects a box, the game state updates that row and column in their respective arrays. Once both of these array are entirely true, then the game is won.

For checking the contents of each row and column I had to convert DOM elements into a string and then fiddle around with a few different array functions. I ended up using both the split function, to make sure that the boxes are parsed in groups based on whitespace, and my own filter method to remove blank values in the resulting array.

Video of gameplay

Senior Design Progress Blog 9

Code: This week I was sick with strep throat and then had to travel with my family for Easter, so I'm submitting a little late. I focussed primarily on the mini-games and their implementation. I added the second level of AI to the torpedo frequency hopping mini game. Now when the user inputs the 10 key combination, the screen displays the user's 10 key combo as well as the AI's guesses. It also displays a different color if the guess and the answer match up, but the game doesn't end, it simply delays the torpedo. The torpedo still inevitably hits the other sub, since the frequency then immediately changes again.

Nonograms: I started implementing the Joan Clarke cryptography game, a variation of nono-grams. Right now I just have a board that where the user can select the various squares and the rows and columns display the pattern that needs to be matched. Next I'm going to implement a solution checker to see if the user has solved the puzzle.

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 7

Page Layouts and Interactive Animation: This week I started putting together one of my interactive pages so I could get a handle on the skrollr animation library. I decided to use Grace Hopper for my demo since I have a pretty good handle on what I wanted her animations to be. I ended up experimenting a lot with skrollr's relative anchors (so the animations are based on how much the user's scrolled in the viewport and not exact pixel values) and JQuery animation functions (such as fadeIn). I've been continuously rewriting my code to make it as modular as possible so if I make changes to the page sizes my website still looks good. I've also been making an effort to make my page elements relative to each other so the website is reasonably resizable. I want all my interactive elements to glow a bit when hovered on, as demonstrated by the COBOL book. The moth is going to be an gif animation so it looks like its flying, and when it hits the machine its going to get cartoonishly electrocuted.

Torpedo Game AI progress: For my torpedo game, I started implementing the AI that the user will be playing against. Using javascript Timers, the computer guesses keys at a reasonable 'human' rate, each keys lighting up to show the current guess. If the computer guesses within the time limit, the torpedo is blocked and the user 'loses'. I use a second timer to check if the computer has guessed correctly.

Senior Design Progress Blog 6

Code & Art: This week I decided to start working the mini-game for Hedy Lamarr's page. Hedy Lamarr focussed her inventing efforts on spread spectrum and frequency hopping communications used for countering torpedo attacks during WWII. She utilized a piano-playing mechanism to change frequencies to make it more difficult to block the outgoing frequencies of American torpedoes. On level 1, the user gets to only select one frequency, which the computer then tries to guess to intercept the incoming torpedo. (Something that'll happen before the torpedo hits since it only has to guess each key once) On level 2, the user gets to select a 10 key combination, which the computer has much less of a chance of guessing. I took a screen capture of what the current functionality looks like. (including art for the American submarine, torpedo, and German U Boat)

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 3

This week was all about the code code code:

I've started implementing the navigation functionality of my website. I found an awesome scrolling library for parallax scrolling & animation called skrollr that looks really cool and is going to be really useful for some of the animation/interactive storytelling ideas that I have. (I want animations to play as the user scrolls, not just when the user is finished scrolling, and this library will help me achieve this) I also did a TON of research into continuous page scrolling with a nav bar that allowed the user to jump between pages. I incorporated onepage-scroll, sectionMenu, and fullPage.js, but was unsatisfied with all three, so I decided to just implement the whole thing myself. I did a little research about sticky nav bar implementations and jQuery's animate function and I'm very happy with my preliminary results. I'm also able to keep track of what page (specifically what node class has the class "active") the user is currently in without changing the url. I made a little screengrab video to show what it looks like right now. (The change in background color represents a different page)

Just demonstrating some scrolling animation, nav bar, and pseudo login functionality. Ada Lovelace's face is just a placeholder image to show what node is currently active.

I also did a whole lot of research on webpack to try to use require modules for my app, since they aren't working with express on the client side and I'm still trying to figure it out. I'm using closure in the mean time, which is working fine.

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.