Snip!t from collection of Alan Dix

<div id="watch-headline-container"><div id="watch-headline" class="watch-headline"><div id="watch-headline-user-info"><a id="watch-username" class="inline-block" rel="author" href="/user/wasbuxton"><strong>wasbuxton</strong></a> <span id="watch-video-count" class="watch-expander yt-uix-expander yt-uix-expander-collapsed" data-expander-action="yt.www.watch.watch5.handleToggleMoreFromUser"> <span class="watch-expander-head yt-uix-expander-head yt-rounded"> <button class="yt-uix-expander-arrow" onclick="return false;"></button> 59 videos </span> </span> <span class="subscription-container" data-subscription-expandable-id="subscription-button-module-menu" data-subscription-value="wasbuxton" data-subscription-menu-type="expander" data-subscription-xsrf="" data-subscription-feature="" data-subscription-type="user"> <button type="button" class="subscribe-button yt-uix-button yt-uix-tooltip" onclick=";return false;" title="Click to be notified of new videos from this channel" data-loaded="true" data-button-action="yt.www.subscriptions.button.toggleMenu" role="button" aria-pressed="false"><span class="yt-uix-button-content">Subscribe</span></button> <span class="subscription-subscribed-container hid"><span class="subscription-options-button subscription-expander yt-uix-expander yt-uix-expander-collapsed" data-expander-action="yt.www.subscriptions.button.toggleMenu"><span class="yt-uix-expander-head yt-rounded"><button class="yt-uix-expander-arrow" onclick="return false;"></button><span class="yt-alert yt-alert-success yt-alert-small yt-alert-naked yt-rounded"><img src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" class="icon" alt="Alert icon"><span class="yt-alert-content">Subscribed</span></span></span></span></span> </span> </div> <div id="subscription-button-module-menu" class="hid subscription-menu-expandable subscription-menu"> <div class="subscription-menu-not-logged-in"> <strong><a href="https://www.google.com/accounts/ServiceLogin?uilel=3&amp;service=youtube&amp;passive=true&amp;continue=http%3A%2F%2Fwww.youtube.com%2Fsignin%3Faction_handle_signin%3Dtrue%26nomobiletemp%3D1%26hl%3Den_US%26next%3Dhttp%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253DGYIPKLxoTcQ&amp;hl=en_US&amp;ltmpl=sso">Sign In</a> or <a href="/signup?next=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DGYIPKLxoTcQ">Sign Up</a> now! </strong> </div> </div> <div id="watch-more-from-user" class="collapsed"> <div id="watch-channel-discoverbox" class="yt-rounded"> <span id="watch-channel-loading">Loading...</span> </div> </div> </div> </div> <!-- end watch-headline-container --> <div id="watch-video-container"> <div id="watch-video"> <script> if (window.yt.timing) { yt.timing.tick('bf'); } </script> <div id="watch-player" class="flash-player"> <div role="button" tabindex="0" srcattribute="http://s.ytimg.com/yt/swfbin/watch_as3-vflpHt5Gk.swf" title="http://s.ytimg.com/yt/swfbin/watch_as3-vflpHt5Gk.swf" style="background: url(&quot;chrome://flashblock/content/flash.png&quot;) no-repeat scroll center center transparent ! important; min-width: 32px ! important; min-height: 32px ! important; width: 640px; height: 390px; border: 1px solid rgb(223, 223, 223); cursor: pointer; overflow: hidden; display: block; visibility: visible ! important; -moz-box-sizing: border-box; margin-right: auto; margin-left: auto;" bgactive="url(chrome://flashblock/content/flashplay.png) no-repeat center" bginactive="url(chrome://flashblock/content/flash.png) no-repeat center"></div> <noembed>&lt;div class="yt-alert yt-alert-error yt-alert-player yt-rounded "&gt;&lt;img src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" class="icon master-sprite" alt="Alert icon"&gt;&lt;div class="yt-alert-content"&gt; You need Adobe Flash Player to watch this video. &lt;br&gt; &lt;a href="http://get.adobe.com/flashplayer/"&gt;Download it from Adobe.&lt;/a&gt; &lt;/div&gt;&lt;/div&gt;</noembed> </div> <!-- begin watch-video-extra --> <div id="watch-video-extra"> </div> <!-- end watch-video-extra --> </div> </div> <!-- begin watch-main-container --> <div id="watch-main-container"> <div id="watch-main"> <div id="watch-panel"> <div id="flash10-promo-div" style="display: none;" class="yt-alert yt-alert-warn yt-rounded "><img src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" class="icon master-sprite" alt="Alert icon"><div class="yt-alert-content"> Upgrade to Flash Player 10 for improved playback performance. <a href="http://www.adobe.com/go/getflashplayer/" onmousedown="urchinTracker('/Events/VideoWatch/GetFlashUpgrade');">Upgrade Now</a> or <a href="http://help.youtube.com/support/youtube/bin/answer.py?answer=95402">More Info</a>. </div><button type="button" onclick="_hidediv(this.parentNode);" class="close master-sprite">close</button></div> <div id="watch-actions"> <div id="watch-actions-right"> <span class="watch-view-count"> <strong>175</strong> views </span> <button onclick=";return false;" title="Show video statistics" type="button" id="watch-insight-button" class="yt-uix-tooltip yt-uix-tooltip-reverse yt-uix-button yt-uix-tooltip yt-uix-button-empty" data-button-action="yt.www.watch.actions.stats" role="button" aria-pressed="false"><img class="yt-uix-button-icon yt-uix-button-icon-watch-insight" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""></button> </div> <span id="watch-like-unlike" class="yt-uix-button-group"><button onclick=";return false;" title="I like this" type="button" class="start yt-uix-tooltip-reverse yt-uix-button yt-uix-tooltip" id="watch-like" data-button-action="yt.www.watch.actions.like" role="button" aria-pressed="false"><img class="yt-uix-button-icon yt-uix-button-icon-watch-like" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""><span class="yt-uix-button-content">Like</span></button><button onclick=";return false;" title="I dislike this" type="button" class="end yt-uix-tooltip-reverse yt-uix-button yt-uix-tooltip yt-uix-button-empty" id="watch-unlike" data-button-action="yt.www.watch.actions.unlike" role="button" aria-pressed="false"><img class="yt-uix-button-icon yt-uix-button-icon-watch-unlike" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""></button></span> <span id="watch-addto-button" dir="ltr" class="addto-container watch show-label " data-video-ids="GYIPKLxoTcQ" data-feature="watch"><button type="button" class="yt-uix-tooltip-reverse yt-uix-button yt-uix-tooltip" onclick=";return false;" title="Add to favorites or playlist" data-button-menu-id="some-nonexistent-id" data-button-action="yt.www.watch.actions.showSigninOrCreateChannelWarning" role="button" aria-pressed="false"><img class="yt-uix-button-icon yt-uix-button-icon-addto" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""><span class="yt-uix-button-content"><span class="addto-label">Add to</span></span><img class="yt-uix-button-arrow" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""></button></span> <button onclick=";return false;" title="Share or embed this video" type="button" class="yt-uix-tooltip-reverse yt-uix-button yt-uix-tooltip" id="watch-share" data-button-action="yt.www.watch.actions.share" role="button" aria-pressed="false"><span class="yt-uix-button-content">Share</span></button> <button onclick=";return false;" title="Flag as inappropriate" type="button" class="yt-uix-tooltip-reverse yt-uix-button yt-uix-tooltip yt-uix-button-empty" id="watch-flag" data-button-action="yt.www.watch.actions.flag" role="button" aria-pressed="false"><img class="yt-uix-button-icon yt-uix-button-icon-watch-flag" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""></button> </div> <div id="watch-actions-area-container" class="hid"> <div id="watch-actions-area" class="yt-rounded"> <div id="watch-actions-loading" class="watch-actions-panel hid"> Loading... </div> <div id="watch-actions-logged-out" class="watch-actions-panel hid"> <div class="yt-alert yt-alert-warn yt-alert-small yt-alert-naked yt-rounded "><img src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" class="icon master-sprite" alt="Alert icon"><div class="yt-alert-content"> <strong><a href="https://www.google.com/accounts/ServiceLogin?uilel=3&amp;service=youtube&amp;passive=true&amp;continue=http%3A%2F%2Fwww.youtube.com%2Fsignin%3Faction_handle_signin%3Dtrue%26nomobiletemp%3D1%26hl%3Den_US%26next%3Dhttp%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253DGYIPKLxoTcQ&amp;hl=en_US&amp;ltmpl=sso">Sign In</a> or <a href="/signup?next=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DGYIPKLxoTcQ">Sign Up</a> now! </strong> </div></div> </div> <div id="watch-actions-error" class="watch-actions-panel hid"> <div class="yt-alert yt-alert-error yt-alert-small yt-alert-naked yt-rounded "><img src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" class="icon master-sprite" alt="Alert icon"><div id="watch-error-string" class="yt-alert-content"></div></div> </div> <div id="watch-actions-share" class="watch-actions-panel hid"></div> <div id="watch-actions-ajax" class="watch-actions-panel hid"></div> <div class="close"> <img src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" class="close-button" onclick="yt.www.watch.actions.hide();"> </div> </div> </div> <div id="watch-info" class="yt-rounded"> <div id="watch-description" class="watch-expander yt-uix-expander" data-expander-action="yt.www.watch.watch5.handleToggleDescription"> <div id="watch-description-clip"> <p id="watch-uploader-info"> Uploaded by <a class="author" rel="author" href="/user/wasbuxton">wasbuxton</a> on <span id="eow-date" class="watch-video-date">Aug 22, 2011</span> </p> <div id="watch-description-text"> <p id="eow-description">This is a digital copy of a <a href="#" onclick="yt.www.watch.player.seekTo(15*60+42);return false;">15:42</a> minute 16mm film made in 1970. It presents a demonstration of one of the pioneering interactive systems that would enable artists, with no previous computer training, to do animation. The system is called GENESYS, and it was built by Ron Baecker as part of his 1969 PhD thesis.<br><br>This system is, IMHO, phenomenal for all kinds of reasons. It mainly used the Rand Tablet, the grandparent of today's graphics tablets, for input. Hence, animators, who were skilled in drawing, were presented with a familiar tool - a stylus - with which to interact with the computer, and be able to do so using already established drawing skills.<br><br>This was one of the first systems ever to practice user-centred design, where the intended user was someone who not only was not computer literate, but came from a field - animation - that was about as far away from engineering as one could be. It is significant that the full demonstration is done by Lynn Smith, such an animator, and not by Ron or one of his colleagues from MIT. My challenge to anyone who is not impressed by this is the following: find any other demo of a highly interactive computer system from 1970 or earlier that does this.<br><br>But this system is not just interesting because it did a lot of stuff a long time ago that we take for granted today. It goes beyond this. It introduces concepts in pen-based computing (and not just animation) that have high relevance today, and yet are still not possible, even on most pen-based systems (animation or otherwise). In particular, the key notion of GENESYS is that of "picture-driven-animation." That is, a picture could either be a visible object, or a motion path for some graphical object. And furthermore, not only could an object follow a hand-drawn motion path, it could do so with the same dynamics as the line was drawn.<br><br>I love this work. It has a huge impact on my own, and I am really glad to finally have a high-quality digital copy that is generally available so that this work can get the attention that it deserves.<br><br>This work was done at MIT's Lincoln Lab, and is just one example of the spectacular work that was done there on the TX-2 computer.<br><br>For more information on GENESYS, see:<br>Baecker, Ronald M. (1969). Interactive Computer-Mediated Animation. PhD Thesis, MIT.<br><a href="http://www.lcs.mit.edu/publications/pubs/pdf/MIT-LCS-TR-061.pdf" target="_blank" title="http://www.lcs.mit.edu/publications/pubs/pdf/MIT-LCS-TR-061.pdf" rel="nofollow" dir="ltr" class="yt-uix-redirect-link">http://www.lcs.mit.edu/publications/pubs/pdf/MIT-LCS-TR-061.pdf</a><br><br>Baecker, R.M. (1969). Picture-Driven Animation. Proceedings of the AFIPS Spring Joint Computer Conference, 273-288.<br><br>For more information on the pioneering work at Lincoln Lab, including GENESYS, see:<br>Buxton, William (2005). Interaction at Lincoln Laboratory in the 1960's: Looking Forward -- Looking Back. Panel Introduction. Proceedings of the 2005 ACM Conference on Human Factors in Computing Systems, CHI'05, April 3-7, 2005, 1163-1167.<br><a href="http://billbuxton.com/LincolnLab.pdf" target="_blank" title="http://billbuxton.com/LincolnLab.pdf" rel="nofollow" dir="ltr" class="yt-uix-redirect-link">http://billbuxton.com/LincolnLab.pdf</a><br><br>For related historical work in interactive computer animation, see also:<br>NRC(1971). Keyframe Animation. 7 minute 45 second 16 mm film produced by the National Research Council of Canada.<br><a href="http://www.youtube.com/watch?v=EPIE_h8jf6E" target="_blank" title="http://www.youtube.com/watch?v=EPIE_h8jf6E" rel="nofollow" dir="ltr" class="yt-uix-redirect-link">http://www.youtube.com/watch?v=EPIE_h8jf6E</a><br><br>Buxton, W. (2008). My Vision Isn't My Vision: Making a Career Out<br>of Getting Back to Where I Started. In Thomas Erickson &amp; David<br>McDonald (Eds.). HCI Remixed: Reflections on Works That Have<br>Influenced the HCI Community. Cambridge, MA: MIT Press, 7 - 12.</p></div></div></div></div></div></div></div>