Assignment 6

 A6: Quick Draw!


About Quick Draw Data Set

Quick Draw is a representative machine learning & data collection project, it shows an ideal design model for public machine learning and data set projects.  It's simply designed to be engaging and accessible. And such accessibility profligates the data collection progress. It uses the classification model trained with collected data as a feedback to reward participants. 

Although there are several potential problems with the dataset such as latent bias, I still found it very helpful for beginners. Both the doodle and the label are small objects (compared to other visual machine learning projects), therefore are easy and fast to process. It makes ambitious attempts possible for machine learning learners. 

DoodleNet p5 Sketch

https://editor.p5js.org/roger1mjh/sketches/kPVq2Prxl


For this week's homework, I worked on the "two canvases" template. My idea is to visually represent and store the "labels", "confidence value" real-timely on the other canvas. Then, in the draw loop, I used millis() and if conditioner to construct a loop that executes every 0.1 second.
First of all, I gave the first canvas( if we call whichever on the left the first) a name and apply the "clearButton" to function on both canvas. 
To represent, I decided to go for the easier approach: text.
I used console.log to find out which values in "results" I could use, which are label(already named "doodle") and confidence(I named it "conf" on sketch).
My first attempt was using textSize to represent different confidence value. I coded it into the 0.1s loop, It worked fine but looks too dull when the color is only black. And it's hard to differ labels visually.
Then I decided to change the color if the label changed, but it looks weird because some colors were already dominant, yet the confidence value makes the size bigger, overwhelmed all the other labels.
To solve that, I set the alpha(opacity) of the color in negative relation to confidence value. So the bigger texts will be lighter in color.
It's just an abstract visual representation of the process of storing data.  In QuickDraw, they also collect more detail things such as timestamp. I would like to try collecting canvas data using saveCanvas() in the future.

Comments

Post a Comment

Popular posts from this blog

Assigment 4

Image
 Image Transfer on P5 Response to Dr. Fiebrink's Speech: There's one part in this speech that intrigues me the most, which is using Machine Learning in creative works does not need to be smart and delicate. It is OK to be dumb and funny, because that's what an unmatured technology genuinely looks like, and it can still be creative. The Edges to Cat example is so fun to play with that I'm kind of addict to it.  Attempt to do Image Transfer on P5 with Pose Regression I watched the videos posted and was most interested in the pose regression example. But the RGB value shift looks not "machine learningly" enough, because it's possible to make some similar project without neural network. Therefore I tried to make one with image transfer. Firstly, I need to load image in data format in P5. I decided to try pixels first, because they retrieve and store image data directly. Then I console logged the "pixels" object in draw, to test out how much the data ...
Read more

Assignment 2A

Image
2A: Excavating AI, Teachable Machine Project Jianhao Ma Moral Machines The reading "Excavating AI" brings up an idea that the tasks of training AI should not just be making them smarter, but to apply political consideration and moral standard as well, especially when related to people. I would not care about such idea years ago, because I thought that technical breakthroughs is the one and foremost priority in emerging technology industries, why bother? However, when the application of machine learning started entering our lives, I changed my mind. Everyday, there are many information processed/filtered by machine learning tools being fed to us, textual or non textual. They could be the advertisement you watch on social media, the pop-up news on your phone. In other words, many of the lower products of machine learning are mediums. Therefore, they have the inherent nature of being political biased and ideologically influential. The fantasy that "technologies should be un...
Read more

A9 - Draw my Drum Machine

Image
My Box Sequencer and Circle Visualization A Dumb GIF illustration: I just followed the steps we learned in class and stylized the box sequencer a little bit by shrinking the size, add strokes, and changing colors. Those were the easy part. Then I recalled that Luisa encouraged me to try making a circular sequencer with arc(x,y,w,h,start,stop). I felt confident about it because I've used arc several times in P5. However, when I actually coded it, I found it's more complicated than I thought.  The first difficulty assigning orders. At first the bigger arc overlapped the smaller ones and hided them underneath. I fixed that through changing the w and h from adding up to decreasing down.  The second challenge was the mousePressed function. It's doing not simple math with mouseX, mouseY, and w anymore. In order to make it work, I have to create a class of arcs and assign the arcs that represent each drum note to objects of that class. It's too much labor to do ...
Read more