Create and Animate a Robot in GLUT

 

Gif created by converting .mov file to .gif on CloudConvert

This is my first blog post under Jonimations.com so I thought it’d be nifty to post about how I animated a robot created with GLUT for my Intro to Graphics course (this is Assignment #2).

The Robot model consists of 10 RobotParts: torso, head, and upper/lower parts for both legs and arms.

Each RobotPart contains a Position Q(x, y) to act as the joint with respect to the parent component and another Position R(x, y) for the same joint with respect to itself. It has an Angle(x, y, z) to keep track of its current rotated state. It also has a list of parts that is connected to it (For example, the head, legs, and arms are all connected to the torso).

class RobotPart {
  private:
    Position* Q; // position of the joint WRT parent component
    Position* R; // position of the joint WRT self
    Angle* angle;
    std::vector<RobotPart*> parts;
  ...
  };

To diplay and draw each RobotPart, I transformed a cube (with translations and scales) for each component.

I created a helper function called drawRobotPart that drew a RobotPart and recursively drew its parts. The recursion makes it easy to apply a parent’s rotation to its parts by using a MatrixStack.

Why would you want to apply a parent’s rotation to its children parts? Consider the case when the torso is rotated. If I did not rotate it’s children, then all the other parts would remain the same. What I actually want is for all of the parts that are connected to the torso to rotate as well so that it acts as one robot (created via many robot parts).

For the animation itself, I used a cosine interpolation formula based on the elapsed time to update the rotation of the x angle for each robot component

int curTime = glutGet(GLUT_ELAPSED_TIME);
double y1 = 60;

Angle* angle = Robot->upperLeftLeg->angle;
angle->x = ((1 + cos(PI * curTime / (360 - 1))) / 2 * (y1 - -y1) + -y1);

angle = Robot->lowerLeftLeg->angle;
angle->x = (int) ((1 + sin(PI * curTime / (180 - 1))) / 2 * (y1 - y2) + y2);

...
redraw();

My Microsoft Interview Experience (as told via Snapchat)

sfo

My plane from San Luis Obispo to San Francisco fit about 30 passengers. For scale, this plane wouldn’t fit all the people that interviewed at Microsoft the same day as I did.

edith-house

Like this famous Edith Macefield house, I felt a bit out of place. Everyone I met was interviewing for a full time offer; and (surprisingly) I found out that I was as well. My recruiter wasn’t aware that I have another year of school for my Master’s and so I continued to go through the full-time-offer-interview-process but confirmed with my recruiter that I’m looking for an internship.

space-needle

Having 4 interviews in a row is much like riding the elevator all the way to the top of the Space Needle. It’s short, you’re in confined space with other people, and once you’re done, all that is left is to enjoy the view.

Wait—4 hours is short? Yes, in hindsight, the interviews went by really fast. Each interview is about 45 minutes long with 15 minute breaks in between. During the 15 minute breaks, you’re in a room with other interviewees to relax and talk (about anything except for what you’re asking), a 3D printer, Xbox One, and various Microsoft products to explore.

buchon

It was great to see a lot of diversity within the interviewees (and to a smaller extent—the campus): age-wise, sex-wise, personality-wise.

lax

This post glosses over a lot of details on Microsoft’s Interview Process but to sum it all up it was a very reLAXed and enjoyable experience.

 

Repurposing the Cal Poly App

The current Cal Poly app in the Play Store provides a lot of information but I’ve actually never used it. Here’s my first attempt at a quick analysis to increase this app’s usefulness.

User Cases

The primary target audience for this particular repurposing are Students (and possibly Faculty/Staff). With that in mind, here are some use cases that Students might open the app for:

  • Show me all my classes: what time they start, where they are (view on Map), and who teaches them (with more info on the teacher like office location, etc).
  • Show me my Student ID # and my Recreation Center pin
  • Show me how much money, credit, or meals I have left in my campus accounts
  • Keep me up to date on the latest Mustang News, Cal Poly News, Cal Poly Sports News, etc.
  • Keep me up to date on the next Athletic game, the next University Union event, etc.
  • Help me find where a service, dining hall, dorm or other location/building is
  • Let me check if the Library, Printer, or Recreation Center is open
  • Show me all the fitness class schedules
  • Make an appointment at the Health Center

Current App Issues

The current app is missing a lot of these core features; and even for the features it does provide, it takes a few clicks to figure out where the information you want is. Here are some of the main issues the app has:

  • Overuses Web View for simple data that can be either hard coded or downloaded if it needs to be updated
  • It’s hard to navigate or find certain information even within it’s “parent” category.
    • Inconsistant and unclear UI
    • Back button doesn’t work as you would expect
    • Blurry graphics/assets
    • Distracting transitions
  • Provides too much or too little information
    • About: only says who designed and developed the current app
    • Admissions: I don’t see a use case where one would want to look up Admissions on the Cal Poly app versus on the Cal Poly website. My thinking is that potential students would most likely navigate to the Cal Poly website than find and download the entire app and hope that Admission info is in it.
    • Campus Life: Primary example is navigating to “Clubs & Organizations” and all it really says is: “Clubs and Organizations at Cal Poly provide opportunities…” rather than listing, you know, Clubs and Organizations.

 

Navigation Redesign

Home Page

Let’s make content even more accessible by having a ViewPager of 3 pages. The “Home” tab can be a Personal Info screen to provide student info, $ info, and class info; and the news and events pages will show relevant feeds.

cp-new-home

Navigation Drawer Redesign

cp-new-navigation-drawer

Notifications

One more thing that can make this app even more useful for students is using notifications! Get notified:

  • when a new Mustang Daily article is added
  • when an event is coming up
  • when the Bookstore is having a sale or a new deal is added to a Dining restaurant
  • when an incident or emergency occurs

These notifications would be a great new way to get the Mustang Daily and other news / events into the hands of the students.

 

Match 2048

View it on github: https://github.com/jonathanwho/match2048

Think of this game as 2048 + Matching Cards Combined. I thought this would  be a fun app to hack at while trying to learn iOS.
*I don’t have an iOS Developer Account so it’s unfortunately not in the app store.

The goal of the game is to try and create two “1024” tiles so that you can match them to get the “2048” tile.

HOW TO PLAY: Click on any two tiles: If the two tiles match, the first tile will double in value and the other will revert to the base “2”. Game ends when you want it to (winning not implemented :)).

SCORING: Adds any doubled tiles and subtracts all mismatched tiles.

Any and all advice/criticism is appreciated.

Credit to 2048 by Gabriele Cirulli, 1024 by Veewo Studio and to Threes by Asher Vollmer.

Learning iOS

“I am always doing that which I can not do in order that I may learn how to do it.” – Pablo Picaso

A few weeks ago one of my friends wanted to build an iOS app and I was pretty excited about it because I’ve been wanting to dabble in iOS. To start, I watched the first three lectures of Stanford’s free course on Developing iOS 7 Apps for iPhone and iPad. Unfortunately, school and work kept getting in the way, so we didn’t end up building anything—but it did play a role in inspiring Match 2048.

It’s been a long time coming, but thanks to all the free time I’ve had during Spring Break I’ve finally built my first iOS app!

This time I started off by following the TreeHouse iOS Developmentcourse. I’m currently signed up on the 14 day free trial, and I highly recommend it. My favorite feature is the ability to watch the videos in 2x speed without the speaker’s voice becoming high pitched.

At first Objective-C code looked like a bunch of hieroglyphics, but as with any other language it has it’s own set of semantics. I took my Objective-C notes in my notebook, but I do have my iOS notes in a Google Doc. They’re pretty much useless since I was too busy hacking but you can view them here.

Poké Battle Dex

Yes, I still enjoy playing Pokémon.

There’s a cool website called pokemonshowdown.com that lets you play pokemon against other people. To help me look up all the pokémon abilities, stats, and weaknesses; I thought I’d build an app that lists all these details.

There are tons of websites that have this data, but they generally don’t have a great search option and they often include data that I simply don’t care about (like egg moves, etc). Plus, it’d be a nice little project to work on.

At first, I created a script to scrape Serebii.com and Smogon.com using  Python and Beautiful Soup 4. Once I remembered the beauty of open source, I found that pokémon showdown was open sourced.

Because I wanted to build this fast, I decided touse Python. I created in-memory dictionaries from json files to bypass creating tables in a database. This was especially useful because I could quickly organize and edit any data as I wished. For the backend I used Google App Engine and for the frontend I  used Bootstrap to see if it lived up to its reputation. Implementing both was surprisingly super EASY.

View the Pokébattle dex on appspot: http://pokebattledex.appspot.com
View source code on github: https://github.com/jonathanwho/pokebattledex

Android Design in Action vs HomeSlice Beta

I’ve spent a good part of my morning watching cartoons videos on the Android Design in Action (ADiA) playlist; and in every single video, I learned how HomeSlice Beta can be improved.

Below are some general and in-depth mental notes that I plan on sharing with the rest of the HomeSlice team.

Onboarding Experience

Creating New Home Screen

Problem: Creating a new home has requires seven fields and joining a new home has six. Many of these fields are redundant eg) Password AND Confirm Password, Home Password AND Confirm Home Password.

Solutions: The onboarding experience should be streamlined. Since we now ask users for their email; it’s pretty safe for us to remove both the usernames and the confirmation fields.

  1. Remove the password field entirely! (Or leave the password optional)
    • How does this work? The underlying theory is that the user wants to get into the app as fast as possible. To achieve this, we generate a password and send it to the user. If they decide to change their password, they can easily do so in the app.
  2. We can create a list of emails for the user to choose from for the email field based on the accounts on the device.
  3. Allow users to sign in with their Facebook, Google Plus, or Twitter accounts (though they will still have to enter a Home Name and Home Password)

With these solutions, we only need at most 3 things: email, home name, and a home password. Simple, right?

Problem: We show our “HomeSlice Help” tutorial after a new user creates or joins a home. In general, ADiA advises against it as it adds another obstacle from getting into the app.

Solution: Our app screenshots in the Play Store and the App Store both demo the app well. If the user wants to see our tutorial, we have it available through the initial screen and in the settings. Upon reflection, removing the tutorial after registration makes sense.

Navigation Anti-Patterns

HomeSlice Navigation Drawer

Problems:

  1. The navigation drawer should be focused on app navigation but we use it to house “Settings” and an option to “Log Out”
  2. Since we are still in Beta, we wanted our Feedback button to be prominent to the user. We ended up creating a button on our Whiteboard for users to “Send Feedback” via their email.

Solutions: 

  1. Move Settings and Log Out to the action bar. It’s still accessible from every screen, but this time it’s in an Android-standard location.
  2. Move Send Feedback to the action bar. Now users can send feedback from any screen.

Improvements:

  • Open the navigation drawer the first time the app makes it past registration (to make it clear that it’s there). We can do this using a system preference flag.
  • Show a progress bar (circle) in place of the refresh icon when refreshing content.
  • Screens that are accessible through the navigation drawer should be highlighted if we are on one of said screens.
  • Move “Invite Roommates” to the Navigation Drawer

Collections

Empty Collection

Problems:

  1. We show an empty whiteboard when there are no posts for the home.
  2. We hack the way we filter items in the Whiteboard collection (we use two arraylists)
  3. We have a load more button when we know there is nothing more to load

Solutions:

  1. Make use of ListView’s empty view. eg) We can have an ImageButton that says “Add New Comment” to have an empty listview no more
  2. Implement Filterable in our Adapter
  3. Remove the load more button if there is nothing more to load

Statement of Purpose

I’ve been accepted into Cal Poly’s blended degree program where I will graduate with both my bachelors and masters degrees at the same time. Here is the Statement of Purpose I submitted in my application.

My first “Hello World” program was written here at Cal Poly. I was not a young programmer who started coding in middle school, there were no AP Computer Science classes offered at my high school, and I have yet to put my finger on what about Computer Science interested me. But, I believe that to be part of the reason. CPE 123: Introduction to Mobile Development, my first programming course, proved me right. Even after completing two years as undergraduate, two internships, and many extra curricular projects; my wish to learn more continues to grow.

Whilst learning the fundamentals of CSC, I have been on both the Dean’s List and the President’s List. I have received multiple scholarships including one for the Advancement of Science and Technology at Cal Poly. I began applying my skills towards web development at my first internship at a local web design company. Soon after, I realized that I wanted to tackle projects like the LZW compression algorithm I wrote for Systems Programming. To shoot for the stars, I applied to the Google Engineering Practicum program—and got in!

To apply what I learned in school to build software at Google was more than fulfilling. I worked with incredible, talented and passionate people who inspired and motivated me to pursue graduate school. I look forward to the rest of my CSC undergraduate courses, but I yearn to gain deeper insight into more fields of Computer Science.

My academic standing and experience in the field have enlightened me to continue my education beyond a bachelors degree. I believe that Cal Poly’s Blended BS + MS program for Computer Science is the best opportunity for me to gain a better feel for the breadth and depth of computer science. And I am confident that, if admitted, I will continue to strive for success and excellence.

From 100 to 5000+ new HomeSlice users in less than 72 Hours

According to Google Analytics, there have been 4724 new Android users that have installed and launched HomeSlice Beta within three days! Before this, we only had about 100 users on the Android app and most of them were Cal Poly students.

So… how did we get these users? It all began with a reddit post for the iOS app. My roommate (the other Android developer) brought up that an Android subreddit existed; but he wasn’t sure if the app was ready for a post since we were still in Beta.

We didn’t expect much from the Android post. The meeting ended and my roommate and I headed home. A few (minutes? hours?) moments later, our post ended up at the #1 spot. Eventually we started trending on the Google Play store.. and the result? Thousands of new users.

Feedback started pouring in (some in the form of bug crash reports), and the entire team was hyped up from all the motivation and encouragement. Most people gave great constructive criticism and we focused on them the most.

I didn’t think we’d get the love and support that we did; but all I can say is that I’m so excited to be part of the HomeSlice team right now.

Imagine if we didn’t put ourselves out there. We would probably still be around 100 users.

Quick Reads Challenge (Great Books Under 200 pages)

With work and school, it’s hard to give big books the time of day.

I tried reading the first Game of Thrones book, but I found myself losing interest because I couldn’t keep up with all the little details in such a short amount of time.

And while I’m not as big of a book worm as I used to be,  I still try my best to read for at least 20 minutes before I go to bed (usually I do this while in my bed).

I came across a great infographic that lists 55 great books (thanks reddit) and I thought I’d try reading them all. The great thing about these books is that they’re all under 200 pages so they’re super manageable!

I’ve read a few of these books already, but as with all great books, they all warrant multiple reads. Here’s the list of books:

  1. Of Mice and Men by John Steinbeck
  2. Siddhartha by Herman Hesse
  3. The Ocean at the End of the Lane by Neil Gaiman
  4. The Old Man and the Sea by Ernest Hemingway
  5. The Great Gatsby by F. Scott Fitzgerald
  6. The Pearl by John Steinbeck
  7. Help Thanks Wow by Anne Lamott
  8. The Hitchhiker’s Guide to the Galaxy by Douglas Adams (not the Complete Guide)
  9. The Sense of an Ending by Julian Barnes
  10. Beasts by Joyce Carol Oates
  11. The Neon Bible by John Toole
  12. Consider the Oyster by M.F.K. Fisher
  13. The Bridge of San Luis Rey by Thornton Wilder
  14. Chronicle of Death Foretold by Gabriel Garciá Márquez
  15. The Stranger by Albert Camus
  16. A Christmas Carol by Charles Dickens
  17. The Bad Beginning by Lemony Snicket
  18. Where the Sidewalk Ends by Shel Silverstein
  19. Cannery Row by John Steinbeck
  20. Being There by Jerzy Kosinki
  21. The Red Pony by John Steinbeck
  22. Charlotte’s Web by E.B. White
  23. The Awakening by Kate Chopin
  24. A Man Without a Country by Kurt Vonnegut
  25. Last Night at the Lobster by Stewart O’Nan
  26. Mezzanine by Nicholson Baker
  27. Black Orchids by Rex Stout
  28. The Time Machine by H.G. Wells
  29. Animal Farm by George Orwell
  30. The Importance of Being Ernest by Oscar Wilde
  31. The Outsiders by S.E. Hinton
  32. A Study in Scarlet by Sir Arthur Conan Doyle
  33. Heartburn by Nora Ephron
  34. The Most Dangerous Game by Richard Connell
  35. Strange Pilgrims by Gabriel Garciá Márquez
  36. Grendel by John Gardner
  37. Breakfast at Tiffany’s by Truman Capote
  38. Flatland by Edwin Abbot
  39. Kitchen by Banana Yoshimoto
  40. Shopgirl by Steve Martin
  41. The Alchemist by Paulo Coehlo
  42. Who Goes There? by John W. Campbell Jr.
  43. The Girl on the Fridge by Edgar Keret
  44. Love is Letting Go of Fear by Gerald G. Jampolsky
  45. I And Thou by Martin Buber
  46. Perelandra by C.S. Lewis
  47. Pafko at the Wall by Don Delilo
  48. A Little Princess by Frances Hodgson Burnett
  49. My Side of the Mountain by Jean Craighead George
  50. At the Gates of the Animal Kingdom by Amy Hempel
  51. Lord of the Flies by William Golding
  52. The Passion by Jeanette Winterson
  53. The Quiet American by Graham Greene
  54. Tuck Everlasting by Natalie Babbitt
  55. Rape: A Love Story by Joyce Carol Oates.