{"id":2616,"date":"2020-12-12T06:43:55","date_gmt":"2020-12-12T11:43:55","guid":{"rendered":"https:\/\/dems.asc.ohio-state.edu\/?p=2616"},"modified":"2020-12-12T06:43:55","modified_gmt":"2020-12-12T11:43:55","slug":"intractable-motion-tracking-user-interface-prototype","status":"publish","type":"post","link":"https:\/\/dems.asc.ohio-state.edu\/?p=2616","title":{"rendered":"Intractable Motion Tracking User Interface Prototype"},"content":{"rendered":"\n

By Kenneth Olson<\/p>\n\n\n\n

(Iteration Two)<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Inspiration\u00a0<\/strong><\/p>\n\n\n\n

I was inspired by science fiction user interfaces (UI) from movies like: \u201cOblivion\u201d and \u201cMinority Report\u201d and other UI work from the motion designer, Gmunk. I wanted to try and create a real high tech interactable UI system using approachable low tech. This is so others could easily recreate this system. The above Image is the sample inspiration I made inside of Isadora. In the patch, the dots flash on and off, the numbers change, the lines move back and forth, and the circles rotate. Everything in the patch (except for the black grid) was made inIsadora and moved using several \u201cWave Generator Actors\u201d and \u201cShape Actors.\u201d <\/p>\n\n\n\n

Approach<\/strong><\/p>\n\n\n\n

In most of the movies examples of \u201cfuture UI\u201d The actors are interacting with some sort of black or clear display, and are using their hands as an input to alter or affect the objects on the display. To get Isadora to listen\/follow my hands I used the \u201cEyes ++ Actor,\u201d a web camera, black tape, and a white table top. My goal was to keep the overall system approachable and simple to create, and a web camera with black tape seemed to be the simplest tools for the job. <\/p>\n\n\n\n

The system works by: first, wrapping the users index fingers with black tape. Second, set up the web camera in a top down orientation, looking down at the users hands. Third, use a white table top, or a white sheet of paper works great, (this creates a high contracting image for isadora to track). Finally, direct the web camera output into an \u201cEyes ++ Actor\u201d. From here anything is possible. Depending on lighting and other conditions, I found it helpful to add some extra Isadora Actors to make the system run smoother. (as shown below).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Eyes ++ Actor<\/strong><\/p>\n\n\n\n

The \u201cEyes ++ Actor\u201d works great for this system, however, results may vary for other people. I was able to track up to three fingers at a time with relative ease. I should also note the \u201cEyes ++ Actor\u201d works by following the brightest object in the scene, So by using a white table and black taped fingers I needed to turn \u201cinverse\u201d ON in the \u201cEyes ++ Actor\u201d settings. I also assume this system will also function with a black table\/background with white taped fingers. In this scenario you would keep the \u201cinverse\u201d setting to OFF in the \u201cEyes ++ Actor\u201d settings. Because my hands are so white they blended into the white table easter, but for people with significant darker skin than mine, I would suggest using white tape with a darker table.<\/p>\n\n\n\n

Uses and Examples<\/strong><\/p>\n\n\n\n

I used this system three different ways: <\/p>\n\n\n\n

1) piano <\/p>\n\n\n\n

2) connect the dots <\/p>\n\n\n\n

3) multiple sliders.<\/p>\n\n\n\n

Piano<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

In this system, when I moved my finger, with the tap on it, from left to right or right to left the lines on the screen would shrink. Sound could be added within this system, like a piano note when each line is triggered.<\/p>\n\n\n\n

Connect The Dots<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In this system, I used both hands. I have tape on my left and right index finger. The left dot is following my left index finger and the right dot is following my right index finger. The line is being auto generated with the \u201cLines Actor\u201d and will always follow and connect the two dots together.<\/p>\n\n\n\n

Sliders<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In this system I have two different sliders. The slider on the left controls the horizontal position of the small square found in the box on the right. And the Slider on the right controls the vertical position of the small square. When used together the square can move around within the box. An important feature I wanted to create with these sliders was when one slider was in use the other sider would not move. I accomplished this with the use of the \u201cPanner Actor\u201d to select a specific area of the web camera output to watch. As with the other systems the \u201cEye\u2019s ++ Actor\u201d was using the entire web camera output to read and follow my taped finger. However, by using the \u201cPanner Actor” I could scale down what the \u201cEye\u2019s ++ Actor\u201d could see, this focused the web camera output to a specific range. Meaning the \u201cEye\u2019s ++ Actor\u201d could only see my finger within a specific area of the table.<\/p>\n\n\n\n

Assessment<\/strong><\/p>\n\n\n\n

With the time I had I accomplished what I set out to do by creating a hand controlled science fiction user interface. I would have liked to been able to put all of the systems I created for this project together, however, my computer wouldn’t allow such things to happen. For future iterations I would like to play with scale more. Perhaps replace the finger with a human body and have the \u201cEye\u2019s ++ Actor\u201d follow the human form. The \u201cEye\u2019s ++ Actor\u201d did work most of the time, but I did lose the tracking of my finger sometimes causing the visuals in the \u201cProjector Actor\u201d to \u201cglitch out\u201d not sure what was causing this issue weather it was the web camera, the \u201cEye\u2019s ++ Actor\u201d, or maybe the several other actors I used to edit the webcam footage. I would also like to find a way for the user to be touching the objects being affected in Isadora. Meaning, the user could touch the computer screen or a projection screen and the objects being projected would look like they were directly following the users hands on the screen, instead of the objects indirectly following the movement of the hands on the white or black table.<\/p>\n\n\n\n

Isadora Patch:<\/strong><\/p>\n\n\n\n

Isadora patch 2<\/a>Download<\/a><\/div>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

By Kenneth Olson (Iteration Two) Inspiration\u00a0 I was inspired by science fiction user interfaces (UI) from movies like: \u201cOblivion\u201d and \u201cMinority Report\u201d and other UI work from the motion designer, Gmunk. I wanted to try and create a real high tech interactable UI system using approachable low tech. This is so others could easily recreate […]<\/p>\n","protected":false},"author":56,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2616","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=\/wp\/v2\/posts\/2616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2616"}],"version-history":[{"count":1,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=\/wp\/v2\/posts\/2616\/revisions"}],"predecessor-version":[{"id":2624,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=\/wp\/v2\/posts\/2616\/revisions\/2624"}],"wp:attachment":[{"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dems.asc.ohio-state.edu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}