[Data Art] 3rd assignment – UNTAKEN

Thanks to Google Street view, we could explore the almost entire world in my own room only if I have a mobile phone. Before I came to NYC, I already experienced the central park’s great lawn. But is it really the central park? A 360 view is enough to seem to be like real but not enough to be real. I can see that place, but don’t feel or experience it. I kind of dislike Google Street View, because it stop us exploring more places physically.

When I played with Google’s Street View API, I found out there’s plenty of location points that are not taken by Google even in the big city like New York. In fact, I was glad to see the screenshot of ‘no result’. At least there’s reason for us to go that place to actually to experience and feel the place.

Screen Shot 2017-04-09 at 10.22.31 PM

Screen Shot 2017-04-09 at 10.25.47 PM

I made a simple tool to find untaken places using Google Street View API conversely. When you pick one city, it will randomly find you one of the place without the street view image within the city. As a prototype, I chose 6 cities from highly developed cities like New York expected not to have any single untaken point, which was not true, to barren or infamous? cities such as Bagdad where we hardly expect for Google to take photo of it.



In order to make it feel like seeing the untaken place from distance before exploring, the zoomed satellite image appears as if pirates uses a telescope. Of course, the satellite image is also digitized one, but at least it triggers some amount of curiosity for us to go there physically.

While exploring the results, I somewhat relieved there’s still lots of places that is not digitized so that it is yet to be defined in single photo with one instant moment.

Screen Shot 2017-04-09 at 10.28.54 PM

Screen Shot 2017-04-09 at 10.29.59 PM

Screen Shot 2017-04-09 at 10.30.23 PM

Screen Shot 2017-04-09 at 10.30.31 PM

Screen Shot 2017-04-09 at 10.31.46 PM

Screen Shot 2017-04-09 at 11.20.12 PM

project website

source code 


2nd assignment : 360 photo as a background

We commonly imagine some kind of vast scenery of nature when it comes to 360 degree photo or video. Even if it’s armed with new technology, we are not shocked that much because we’ve already experienced those kinds our scenes countless times with out entire senses. I rather wanted to capture uncommon scene in life, contrary to the vastness, which is the inner part of superficial manmade objects, such as a microwave, or a refrigerator? Those are too small or awkward to go in, so we never know the feeling of inside them. I expected weird emotion that haven’t felt before from confinedness and distored vision of materials such as plastics and wires.The result? Seized by a little discomfort and strangeness, as if in a spaceship?


[microwave]Screen Shot 2017-04-05 at 10.44.27 PM

Screen Shot 2017-04-05 at 11.08.42 PM



Screen Shot 2017-04-05 at 10.46.02 PM

Screen Shot 2017-04-05 at 11.08.11 PM



Screen Shot 2017-04-05 at 10.47.04 PM Screen Shot 2017-04-05 at 10.47.14 PM


BLE + Arduino 101 demonstration : saving the location with a button

Continuing BLE demonstration with Arduino 101 and as a part of my final project test, I made a simple app to store the current location when clicking the button of Arduino. CurieBLE plugin works mostly fine, but it takes time to catch up the name of BLE after assigning it from Arduino code. So I changed it to match the ID of BLE device instead of name to connect it instantly.


1st assignment : sequelize

A good story creates a sequel, and vice versa. All kinds of data – characters, history, plot, etc – are basis for expansion and possibilities. Fanfiction proves it. There’s a collective process of making narratives. But our imagination somehow is limited. Arbitrary things  would sometimes inspire us to go different direction.

So, here is a bit of silly trial to make a sequel of Star Wars. It could be anyone to be part of this serialization process that each sentence, one by one, is generated by each person. But not entirely from your imagination. Half of it is from yours with proposed keywords, but leave half of it for more possibilities. When you input a keyword, it will search tweets related to the keyword. Carefully looking in each tweet, and if you’re sure it is a hell of perfect phrase for the following sentence, save it to share the story. Then just wait for next lines.

sequelize1sequelize2 sequelize3

project website

source code

BLE + Sensortag demonstration : election

Here comes an unexpected early presidential election in Korea.Time to decision without regrets. We all have to contemplate pretty seriously this time not to make a mistake again. We are all absorbed in inquiring them and looking high and low. Viewing candidates from various angles.

As an analogy of it, I mapped values of the accelerometer-different sets of x,y,z- into opacity of images of the current top 3 candidates, creating a vibrant confusion just as the state of ours.

source code


[Data Art] 2nd assignment – ARTicle

Articles in news website is text that we most frequently see in everyday life. It’s primarily regarded as source of objective information, but there’s strong, subjective emotion that comes out very often, especially these days of huge confliction between the media and the government. Articles sometimes seem to go beyond just text, but rather sort of an artwork filled with powerful, complex feelings. ARTicle is an chrome extension that helps emotional appreciation of an article while you are reading a news in NYT.

ARTicle_final.001 ARTicle_final.002 ARTicle_final.003_reARTicle_final.004 ARTicle_final.005

source code

App development : first step of getting place data as the midterm

Screen Shot 2017-03-07 at 5.15.59 AM

Screen Shot 2017-03-07 at 5.16.04 AM

I changed a little bit about the concept, since most of tweet or news data’s geo tag is null. So I need to gather place information first, and then I can have a specific place keyword for searching tweet or news. To get information about places around where you are, I used Google reverse geocoding, place and street view API. For initial setting, clicking ‘somewhere’ button triggers to load everyplace within 100 meter with rating over 4 point and show it descending order with specific address and street view image as a background.

Hacking the browser, week5

I’m planning to create a chrome extension for providing new way of reading a newspaper article. It will deconstruct, analyze and restructure text of the article.

These are steps for final project.

#1 analyze – I will use IBM Watson’s AlchemyLanguage API to analyze text, extracting keyword and sentiment. I need a real-time database to store and exchange text data since Watson API is only run in Node.js. It usually takes a bit of time for Watson to analyze data, so I might build a structure of delay during transmitting and retrieving data.

#2 restructure – I will show the analysis result with key implications and emotion behind it and every word of the article in an abstract way(thinking of mapping emotion into color for background or reinterpreted text). After collecting data, the entire content of the page will be removed, and then the reinterpreted result will be shown on the page again.

#3 deconstruct – I will collect only body text of the article. It’s quite easy to get each body text in the article, as it is usually classified with certain class name. The only tricky part is each news paper website has its own class name, so I might use conditional statement through recognizing the url of the site.

# Chrome APIs & permissions : chrome.tabs (active tabs) to get information of a webpage including url and control browser action.

# Browser action : Clicking the browser action triggers those 3 steps.


Twitter bot W4 – WhatWeDo

What do I do, want and say in twitter? And what do we do? Why do we use ‘we’ instead of ‘I’? Surely there a difference between those terms, because we as collective human being are different from I as individual. WhatWeDo is bot collecting words from tweets related to the word ‘we’ and showing top 3 frequently used verb with ‘we’.


# Using search API, collect tweets including a word ‘we’.

# Split sentences into words and arrange them in order of frequency

# Select only verb out of words and pick top 3 of them.

Screen Shot 2017-02-22 at 12.31.31 AM

Hacking the browser, week4

#1 image & script X-blocker : With webRequest API, it will block everything except texts. (Source code)

#2 Today’s top 5 history : Using history API, I made a extension automatically creating 5 new tabs in the order of most viewed pages on that day. (Source code)

#3 Reverse engineering – Time is money : Time is money is a extension to convert prices online into hours of work.

– Permission : webReqeust, storage and contextMenus.
– Browser action : open the option page to set important value for calculation.
– No certain page action
– background.js : set initial value of input & control in browser action
– content.js : scan a page and convert each price, if there is one, into working hours.
What Chrome APIs does it use?
– API?
chrome.storage API to store user data for extension.
chrome.contextMenus API to make filed for input value.
chrome.runtime API to open other options.js file when browser action is clicked or right after installed.
– How it works? If it detects any price on webpages filtering with regular expression, it calculates every price on pages according to a setting on amount of wage and currency, convert into working hours and display the hour alongside the price.
– unusual in the manifest?
not sure why it needs a permission for webRequest
not sure about this line — run_at : “document_end”

#3 Final project idea : Inspired by Ben Rubin’s works below, I want to explore the way of showing texts in browsers. We are exposed by countless texts everyday through browser, but barely remember limited amount of it consciously. How many words are we passing by as scrolling down page by page? I believe it’s meaningful to go through all texts we see online everyday in a different perspective.




  • collecting history of browsing for one day.
  • collecting all texts from them and analyzing it by word count.
  • displaying the only text word by word continuously in the order of frequency on clean background.


Hacking the browser, week3

Homework :

I transformed the previous bookmarklet project into a version of chrome extension. You can find source code here. I developed little bit further, so it’s better working on most of webpages. One problem I encountered is I wasn’t able to select an advertising div.


Interesting chrome extension :

I found ‘Do it‘, which will wake you up whenever you feel like to sleep, and never fail. I was inspired by this app in that it creates seamless experience with video while I surf, and uses entire browser as a canvas.






Twitter bot W3 – Picky news bot

As a test of responding bot, I made a picky news bot. In direct message mode with the bot, it will respond with one of the most popular news of today from NYT API, if you say ‘hi’, or ‘hey’. After that, all it does is being picky. It annoys you with constantly asking you about meaning of one word from your reply. If you can’t stand it anymore, it’s good time to say hi to it again, and you will get another news of today.

Source code

Screen Shot 2017-02-15 at 11.26.01 AM



[Data Art] 1st assignment – U.S. Immigrants data visualization

Staring with a question, ‘how many immigrants are there in U.S?”, I found an interesting figure showing the total immigrant population only accounts for 13.3% of the total population of U.S. I was surprised by the relatively small number than I expected.

immigration_presentation final.001

As I hate bar chart that always distorts reality while compressing data too much to represent it simply, I tried to reinterpret the figure, ‘13.3%’ in a different way. With the methodology below, every group of 10,000 immigrants becomes 1 rectangle with 5px X 5px and is scattered into a grid consisted of almost 31890 cells representing the total number of U.S population. Because we live everywhere.

immigration_presentation final.002

Below is the reinterpreted scattered chart of showing the rate of immigrants in U.S., which is now more plausible to me like the former president said. “We are and will be a nation of immigrants.” Unfortunately, I couldn’t figure out how to prevent each rectangle to be overlapped each other, meaning that it definitely should be even denser than now.

immigration_presentation final.003

The source code 


Twitter bot W2 – MissHimAlready

I miss him already. There are tons of reason, but if I have to picked one thing, it’s his speech. I’ve learned English with Obama’s speeches. Every word he chooses, every phrase he weaves was truly inspiring. Thanks to this sublime speech, I made a bot trying to emulate his speech.

I used Rita.js with the basic of markov chain function. As the source text, I picked four most important addresses, the inauguration speech in 2009, farewell speech in 2017, the speech at the Democratic National Convention in 2004 and the speech on race in 2008.

I’m worried if it would do any harm to its beauty. Hope it would be one of collection of the reminiscences for him and his speeches.


Source code

Screen Shot 2017-02-07 at 9.21.49 PM



Hacking the browser, week2

Home work #1  – an interesting bookmarklet :

Liquid page is a bookmarklet that allows you to rearrange webpages. You can move div elements freely to wherever you want to. The code is based on the jQuery UI ThemeRoller bookmarklet implementation. Below is the source code and footnotes about reverse-engineering.


// add jquery and jquery UI script to the page
window.lqpage || (lqpage = {});
lqpage.trString = “”;
lqpage.s1 = document.createElement(“script”);
lqpage.s2 = document.createElement(“script”);
lqpage.s1.setAttribute(“src”, “https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”);
lqpage.s2.setAttribute(“src”, “https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”);

// when page is completely loaded, it implements draggable() function which is part of jQuery UI making it possible to drag selected elements.

lqpage.s1.onload = function() {
lqpage.s2.onload = function() {
confirm(“LIQUID PAGE: Remove all overflow:hidden styles?\n\nThis will allow you to move everything on this page everywhere \nbut some elements may break due to overflowing text.”) && $(“div”).css(“overflow”, “visible”);

// preventDefault function prevents each link to be accidentally clicked while dragging elements.

$(“a”).click(function(a) {
alert(“LIQUID PAGE: You can now move all DIVs and ULs around!\n\nFirst click an element and then click and drag it. \nLinks are disabled! Reload the page to get back to the original.”)



Home work #2  – make a bookmarklet :

Bye Bye (you can drag this link) is a bookmarklet that makes you feel empty and peaceful. Have you ever felt you are overwhelmed with tones of information in browser? Want to click to just let them go away? With Bye Bye, when you click any element in a webpage, it will be disappear with saying ‘bye’.There’s nothing but div! Enjoy the momentary emptiness.

Below is the original source code before being transformed, which looks bit redundant, but I couldn’t find more condensed way.


$(‘a’).click(function(a) {
$(this).text(‘bye link’);
$(this).hide(3000, “linear”);

$(‘header’).click(function() {
$(this).text(‘bye header’);
$(this).hide(3000, “linear”);

$(‘h1’).click(function() {
$(this).text(‘bye h1’);
$(this).hide(3000, “linear”);

$(‘h2’).click(function() {
$(this).text(‘bye h2’);
$(this).hide(3000, “linear”);

$(‘h3’).click(function() {
$(this).text(‘bye h3’);
$(this).hide(3000, “linear”);

$(‘h4’).click(function() {
$(this).text(‘bye h4’);
$(this).hide(3000, “linear”);
$(‘h5’).click(function() {
$(this).text(‘bye h5’);
$(this).hide(3000, “linear”);

$(‘h6’).click(function() {
$(this).text(‘bye h6’);
$(this).hide(3000, “linear”);

$(‘p’).click(function() {
$(this).text(‘bye p’);
$(this).hide(3000, “linear”);
$(‘img’).click(function() {
$(this).text(‘bye img’);
$(this).hide(3000, “linear”);

$(‘fieldset’).click(function() {
$(this).text(‘bye field’);
$(this).hide(3000, “linear”);

$(‘form’).click(function() {
$(this).text(‘bye form’);
$(this).hide(3000, “linear”);

$(‘span’).click(function() {
$(this).text(‘bye span’);
$(this).hide(3000, “linear”);



Initial App idea : Randomize Here

Have you ever felt you belong to nowhere iterating mindlessly same things with your mobile phone? When I keep staring at my mobile phone, I forget where I am and I’m continuously exposed by something that is already familiar with because I limited my realm by choosing limited sources along with friends’ SNS or favorite websites. What if I would get punched with unexpected information related to certain location where I am now? It will broaden my view for worlds, and each place I belong to has certain context in my daily life.I would like to make an app to suggest you location based random SNS contents. 



An app that impresses me : Detour

Detour is an app for tourists, beautifully produced GPS audio walks that take you beneath the surface of cities around the world. I used it first when I was here several month ago. Above all things, I love the fact that it is designed to make you free from looking at your mobile phone while you are traveling a some place new. The almost perfectly synced GPS audio walks function matched my pace of tour, so that I don’t need to go back to my mobile phone to press some other button of it. Instead of being stolen my sight to “see” phone to find some information about the place, it allows me to stay on the sight more. The sad thing is there’s not enough contents about NY yet.

Screen Shot 2017-02-06 at 5.39.57 PM



Hacking the browser, week 1

A simple responsive website :

I wanted give certain context related to current issues to the size of browser. I can’t help thinking of the ban, and I believe here is the place of freedom with cherishing generosity and solidarity. The more it closes it’s door (smaller browser), the more we lose freedom. (smaller font size, bigger letter spacing, lower oppacity of the letter, ‘freedom’)

link to codepen 

Screen Shot 2017-02-01 at 1.16.03 AM
Screen Shot 2017-02-01 at 1.16.12 AM
Screen Shot 2017-02-01 at 1.16.24 AM
Screen Shot 2017-02-01 at 1.16.34 AM


A boundary-pushing website :

I chose typetodesign.com, because it used different approach from latest trend of scrolling down interface when turning over pages like mobile phone. Interestingly the core role of interaction is granted to keyboard. Filling in types with keyboard on empty canvas using instagram images of each character reminds me the fact that originally a browser is supposed to be empty.

Screen Shot 2017-02-01 at 2.43.10 AM