Alexis Tan of Drakain Academy
  • Welcome
  • Portfolio
  • Art
  • Observations

AI Hack-a-thon

6/16/2019

 
AI Hacks was Southern California’s First All-Female High School Hackathon held on June 15-16, 2019 at 
USC Institute for Creative Technologies. This was my first hackathon. Although I had some previous experience with Python and C++, I really wasn’t sure what to expect. Nevertheless, I was certainly looking forward to spending time and learning new skills with my friends and teammates, Mary and Alyssa. 

In the theater, the presenters explained the goal of the competition: to design and program a website or app that solves a real-world problem. Over the course of the next 28 hours, we would attend several sessions to learn the basics of whatever we would use to code our website or app. Then, at 9:00 the next morning, a panel will judge our submissions, picking 5 winners. First, second, and third place, along with a Social Impact prize and a prize rewarding the best use of AI. Immediately after hearing this, we all began brainstorming ideas with attainable goals.

Throughout the event, successful women in STEM fields and research would talk about their career path, their research, and advice they would suggest for girls interested in STEM. The first woman had fascinating research to refine text to speech programs to understand and listen to human input with higher speed and accuracy. Another presented her program to help reintegrate people with PTSD into a welcoming environment to help them open up about their struggles.

When the talks were finished, we situated ourselves in an open classroom with several other teams to begin our work. We started with a ton of appealing yet somewhat unoriginal ideas, such as donation websites, mental health apps, pet lost-and-found websites, and many more. While these seem intriguing initially, since they do solve real-world problems, they didn’t seem particularly innovative to us. We wanted to create something with interactive graphics that respond to user input. At one point, out of the blue, I jokingly suggested an app where the user could rant through text or voice, and it would grow plants proportional to the user input. Mary and Alyssa thought this was hilarious, so I quickly elaborated on the idea to make it more practical. We quickly realized the merit such an app could have. Alyssa, also an avid creative writer, suggested that the app could help overcome writer's block. The user could start typing and be encouraged with ever-changing visual stimulus.

My personal inspiration for a graphics-based program came from my fascination with the intersection of arts and computer science. A few months ago, I attended a show at UCI by artists, Christa Sommerer and Laurent Mignonneau, who displayed their creations  “interactive computer installations that apply scientific principles to art, such as artificial life, complexity, and generative systems.” In one piece, participants could touch real plants, and a computer connected to these plants would generate graphics of the same plants growing on screen, another where the participant would type on a typewriter and small insects, which could move and procreate, would appear on projected paper, and yet another where after standing in front of a screen, flies would generate a portrait of the participant. I was amazed by these creations and wanted to explore something similar.

Now, we were eager to get started but still lacked the technical know-how. After the app development workshop where we investigated a bit into IOS app and Android app, learning some website development techniques, and fighting an unreliable WiFi. We decided to create a website using HTML and JavaScript for the graphics. Mary and Alyssa made quick work of the text box, Alyssa programming it to count characters, and Mary debugging and making sure it ran properly. They added a feature for the user to input a character goal, then begin typing in the box with a countdown. I dug myself into a rabbit hole of JavaScript graphics. To my frustration, I couldn’t figure out how to animate a line. Instead, I accidentally generated a field of scary black grass. While I was still wrestling with the graphics, the other two programmed a placeholder animated GIF of a flower that steps to the next frame according to milestones. By midnight, Mary and Alyssa were satisfied with their progress, so they unpacked their sleeping bags and got ready for bed, deciding to set an alarm for 8:00 am the next morning.

Since I’m a habitual night-owl anyway, I continued tinkering with my unruly grass code. The JavaScript mixed with HTML boggled my mind. Several hours later, I managed to make each blade of grass a varying shade of green. I also randomized the placement of each blade, the length of the stalks, and the timing at which they grew. In order to simulate a smooth yet organic feel in growing grass, I added a brief but random time delay after each character was typed. To implement the goal-oriented aspect, corresponding with the changing flower GIF, I also added two functions to generate a simplified blooming flower, basically just a colorful circle on a stick. After tweaking some visual-graphical changes to the website layout, I finally went to sleep at 4:30 am, content with my part complete.

When the alarm rang at 8:00 am, everything flooded back. I rushed over to the computer, frantically explaining everything I did and summarizing all that still needed to be fixed. We scrambled to put the finishing touches, making the flowers grow properly according to the goal. We submitted the program, then waited in suspense for the judging to take place in the neighboring building. With several dozen teams, this took quite some time.

We entered the room with 6 judges as they dismissed the previous team, and delivered our prepared presentation, demonstrating how the website works, our goals, and how it could be developed in the future. The judges seemed fascinated and asked some probing questions. With a huge sigh of relief, we were finished.

​Much waiting ensued once more, for all our projects now had to be judged. Finally, the winners were announced. To our astonishment, we won second place overall! Our program might not be saving the world anytime soon but it was fully functional and I guess the judges must have appreciated our creativity. Building a website in a 28-hour period was an intensely rewarding experience. It was so fun working with these girls that we’re planning to meet on a weekly basis to continue brainstorming and learning together.


    Alex Tan

    Daydreaming artist.
    Aspiring computer scientist.
    Lifelong lover of learning.

    Archives

    August 2020
    October 2019
    June 2019
    March 2019
    January 2019
    December 2018
    February 2018
    July 2017

    Categories

    All

Copyright © 2016-2020 Alex Tan. All rights reserved.
  • Welcome
  • Portfolio
  • Art
  • Observations