{"id":21977,"date":"2014-01-13T07:28:55","date_gmt":"2014-01-13T12:28:55","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=21977"},"modified":"2014-01-13T07:28:55","modified_gmt":"2014-01-13T12:28:55","slug":"passage-screensaver","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=21977","title":{"rendered":"Passage Screensaver"},"content":{"rendered":"<p>I&#8217;m feeling the itch to code, but I think I need to let Good Robot alone right now. If you&#8217;ve ever noticed how some people tend to drive faster when they get lost, then you have a good idea of how I feel right now. I feel like there&#8217;s something wrong with my game, and I want to HURRY UP AND FIX IT so I can stop worrying about it. But hasty changes aren&#8217;t any better than hasty driving. I need to wait for some of the feedback and suggestions to sink in, and until then I can twiddle my thumbs doing something else.<\/p>\n<p>So let&#8217;s make a screensaver. <\/p>\n<p>When I was a kid, I was fascinated by infinite tunnels. I used to picture plunging down an infinite circular tunnel as I drifted off to sleep. I&#8217;m not sure where this came from. Dr. Who existed back then, but I&#8217;m pretty sure I hadn&#8217;t seen it yet. Was there some other sci-fi show that used the endless tunnel gag in the opening sequence? Maybe Lost in Space or Twilight Zone? I can&#8217;t remember. <\/p>\n<p>Anyway, I want to make one. <\/p>\n<p><!--more-->So, I open an empty project and use <a href=\"http:\/\/www.cityintherain.com\/howtoscr.html\">this<\/a> example to set up the boilerplate code. Windows screensavers are odd creatures. When written in C or C++, you don&#8217;t have a <code>main ()<\/code>. In non-programmer talk, you don&#8217;t start with the usual first bit of code common to nearly all c++ programs. Instead, that code is packed in this external library. That library handles creating a window and all the other stuff that&#8217;s common to all screensavers. (Like, if there&#8217;s any input, the program exits.) You don&#8217;t have to worry about window resizing, menus, and a bunch of other stuff. This is a good thing, since it saves you from having to write (or more likely, copy &#038; paste) a couple hundred lines of code. This saves you a lot of work, although it also makes your program about as non-portable as possible.<\/p>\n<p>I start by making a simple straight tube of polygons and having the camera fly down it. <\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/passage1.jpg' class='insetimage'   alt='passage1.jpg' title='passage1.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>Of course, a straight tube is pretty boring. You can&#8217;t even tell you&#8217;re moving unless the walls have some texture.  But I&#8217;m not sure I&#8217;m crazy about introducing textures to this. I&#8217;m aiming for something a little more abstract. I mean, if I use a texture then I&#8217;ll be stuck with bricks or metal or whatever texture I pick. And since I&#8217;m doing this for fun I don&#8217;t want to trouble myself with the un-fun task of making an interface where the user can choose textures. Yuck. <\/p>\n<p>Hm. I try just coloring the polygons, but it&#8217;s still kind of boring. I try adding lighting, and it&#8217;s actually even less interesting. The lighting makes the tube look kind of flat and lifeless.<\/p>\n<p><table width='600'  cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/passage2.jpg' class='insetimage' width='600' alt='Not sure what the rectangle is in this shot. I think it&#8217;s a leftover from the example code.' title='Not sure what the rectangle is in this shot. I think it&#8217;s a leftover from the example code.'\/><\/td><\/tr><tr><td class='insetcaption'>Not sure what the rectangle is in this shot. I think it&#8217;s a leftover from the example code.<\/td><\/tr><\/table><\/p>\n<p>The wireframe is kind of interesting, though. Even making the tunnel twist around doesn&#8217;t do much to liven it up. What if I made the wireframe glow? Then I could have the camera flying through glowing rings, which might be kind of fun.<\/p>\n<p>I fiddle with this for a while. I suppose if I was smart I&#8217;d have taken more screenshots of the work in progress, but I wasn&#8217;t and I didn&#8217;t. After about an hour of experimentation and tweaking, I find myself flying through what amounts to a series of glowing hoops. <\/p>\n<p><table width='600'  cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/passage3.jpg' class='insetimage' width='600' alt='At last, a simulation that gives us the view from a croquet ball at a rave.' title='At last, a simulation that gives us the view from a croquet ball at a rave.'\/><\/td><\/tr><tr><td class='insetcaption'>At last, a simulation that gives us the view from a croquet ball at a rave.<\/td><\/tr><\/table><\/p>\n<p>I&#8217;m not sure I can even re-trace the steps of what might very generously be called logic to get from there to here. It was very much a process of doing random crap just to see what it would look like.<\/p>\n<p>But still. Boring. Endless tunnels are boring. What works for a few seconds in the Dr. Who opening is kind of dull when deprived of titles and names and theme music and Tardises. We need more. <\/p>\n<p>Well, variety would help. Lets have the shape of the tunnel deform as we go.<\/p>\n<p><table width='600'  cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/passage4.jpg' class='insetimage' width='600' alt='Whee!' title='Whee!'\/><\/td><\/tr><tr><td class='insetcaption'>Whee!<\/td><\/tr><\/table><\/p>\n<p>I&#8217;m kind of shocked at how dull the thing looks in stillframe. In motion it&#8217;s fast-moving and visually stimulating. Once in a while I catch myself staring during testing, hypnotized by the color and motion. <\/p>\n<p>What we have here is a blend of many, many sine waves. Sine waves govern the lengths of the line segments of the hoops, so sometimes it&#8217;s round and sometimes it&#8217;s more octagonal or hexagonal. Sine waves govern the height and width of the hoops, so sometimes the passage is tight and sometimes it&#8217;s wide but low and sometimes it&#8217;s tall but narrow. Three different overlapping sine waves are used to create the side-to-side curves. <\/p>\n<p>For movement: The camera just moves from the center of one hoop to the next. As you proceed, it takes the hoop behind you and places it at the end of the tunnel to give the &#8220;infinite tunnel&#8221; effect. The camera aims itself at the hoop a few steps ahead, which means it begins turning just slightly before you reach the curve. This seems more natural and less mechanical than just turning in unison with the curves. I&#8217;ve also got it banking very slightly, so when you go around a big bend you kind of lean into it a bit. If the above screenshots look sort of comically empty, I&#8217;ll defend it by saying it feels better than it looks. <\/p>\n<p>Maybe some vertical hills would be nice? Also, maybe I ought to do something about this rainbow puke color scheme?<\/p>\n<p><table width='600'  cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/passage5.jpg' class='insetimage' width='600' alt='Ah. Now we can puke over motion sickness instead of the color scheme.' title='Ah. Now we can puke over motion sickness instead of the color scheme.'\/><\/td><\/tr><tr><td class='insetcaption'>Ah. Now we can puke over motion sickness instead of the color scheme.<\/td><\/tr><\/table><\/p>\n<p>It suddenly feels very roller coaster. So I add some&#8230; numbers? To make it go faster downhill and slow down on the uphill. To call this primitive stuff &#8220;physics&#8221; is like calling a flip-book of Aquaman fan-fiction &#8220;cinema&#8221;, but in practice it feels about right. <\/p>\n<p>In fact, it feels so much like a roller-coaster that I kind of want to&#8230;<\/p>\n<p><table width='600'  cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/passage6.jpg' class='insetimage' width='600' alt='So it&#8217;s a roller coaster. Sue me.' title='So it&#8217;s a roller coaster. Sue me.'\/><\/td><\/tr><tr><td class='insetcaption'>So it&#8217;s a roller coaster. Sue me.<\/td><\/tr><\/table><\/p>\n<p>So we set out to make an infinite tunnel and wound up with a roller coaster made of glowsticks. I guess that&#8217;s okay. I think we&#8217;re done here.<\/p>\n<p>This was just an afternoon project. Sure, there&#8217;s a ton of stuff we could do with it from here, but all of that is boring interface and tweaking and I&#8217;m bored now. So I guess I&#8217;ll just put the source up for others to play with.<\/p>\n<p><a href=\"http:\/\/www.shamusyoung.com\/files\/passage_source.zip\">Passage screensaver source<\/a>.<\/p>\n<p>That&#8217;s the code and project file, which was created using Visual Studio Express 2010. main.cpp is the boilerplate screensaver stuff. gltypes.cpp is my general-purpose toolkit for 3D vector math (the exact same code is in Good Robot) and is ALWAYS under construction. render.cpp is the interesting stuff and if you want to play with the polygons that&#8217;s where you&#8217;ll want to go.<\/p>\n<p>I&#8217;m releasing this under a <a href=\"http:\/\/www.wtfpl.net\/\">wtfpl<\/a> license, which is basically: Do what you like, commercial or free, public or private, educational or stupid. Give credit or don&#8217;t. Sell it or don&#8217;t. Paypal tips (see donate button, right) are always appreciated if you just really, really find code useful, but I&#8217;m not releasing this to get money and I don&#8217;t expect it. <\/p>\n<p>If you&#8217;re not the coding type, you can get the screensaver itself here:<\/p>\n<p><a href=\"http:\/\/www.shamusyoung.com\/files\/passage_binary.zip\">Passage screensaver<\/a>.<\/p>\n<p>Just unzip that sucker and throw it in your windows\/system32 directory and it should appear in your list of screen savers. Windows only. Sorry. If you want a port, maybe you can bug one of your programmer friends to have a go at the source. Trust me. Your programmer friends LOVE random tasks like porting half-assed windows applications. <\/p>\n<p>Well, that was a quick afternoon lark. Hope it was at least mildly amusing for you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m feeling the itch to code, but I think I need to let Good Robot alone right now. If you&#8217;ve ever noticed how some people tend to drive faster when they get lost, then you have a good idea of how I feel right now. I feel like there&#8217;s something wrong with my game, and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[66],"tags":[],"class_list":["post-21977","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/21977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=21977"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/21977\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=21977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=21977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}