Stories with Quick Draw

Haneen Fathy
3 min readOct 18, 2020

How can visualization help diagnose “data for inclusion” and “identify concrete ways that anyone can improve the variety of data, as well as check for potential biases.”?

Visualization makes data a million times more accessible. There is often a lot of gatekeeping in tech communities that stops people from meaningfully engaging with AI. In a sense, visualization levels the playing field my allowing people to reflect themselves in their data and as a result their backgrounds. The article outlines several ways that people can contribute more to the data and help check for bias. A major one was the subgrouping of data and increasing the metadata of each drawing so we can draw more conclusions and identify more patterns, even though that poses some privacy issues.

The thing I enjoyed the most about the quick draw dataset is that as I am playing I am aware that my drawings are contributing to a more inclusive dataset unlike all of my other data that is being constantly mined without my knowledge.

In addition, tools like Facet that visualize patterns can help in making use of the data. In the article it mentioned that based on the data for some countries, the research team can draw conclusions on how to alter the UI. It got me thinking about how tools like facet and other visualization tools can go both ways. It can support artists and people in their creative pursuits and can also be used to hyper market products to consumers. Even though inclusion is an admirable goal, it is what you make of that inclusion that really counts.

Code Exercise:

In this week’s code, I had several ideas that all amounted to nothing because I had trouble using the quick draw dataset.

  1. Human vs. AI guessing game
  2. Filling a doodle with other doodles, for example a doodle of a cat filled in with other cat doodles.
  3. Doing something with the country of origin of the doodle.

I finally decided that I would build a program that takes a story as an input (paragraph, sentence, etc..) and that animates that story using doodles from quick draw by drawing each part after the other.

The way this works is the program takes the input and parses it into an array of every word. It then compares every word to a list of the categories in quick draw that I downloaded from their github. If a match exists, the values will be saved to an array and then the animated on the screen after each other.

Sentence: I took a picture of a butterfly with my camera in the sun

My first problem was that even if there was a match it did not recognize it.

This took me a lot of time and debugging only to realize I had the iterating variables (i,j) switched. (I deserve it for working at 2am)

I tried different methods to animate by putting a loop inside the newChar function but that didn’t seem to work so I resolved to making a global counter variable so draw knows when to stop looping.

My most consistent error however was this:

Since there is no split in line 57 this one was pretty hard to figure out and stopped the last character in the story from looping. The only other split function I had was in setup which ran once and fine.

I managed to get all the characters to loop but I still could not get rid of the error.

Interestingly, this error always appears after the third character no matter the total number.

Improvements:
1. Making the program recognize propositions so the characters can be animated in different positions. (I actually wasn’t able to draw the objects next each other so they wouldn’t overlap if I removed the background)

p5 editor: https://editor.p5js.org/haneenfathy/sketches/LZw4NAyXw

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

No responses yet

Write a response