NervousText in AR, 25 years later

This is going to be a quick post, with some background history. If you want to get right to the code, just scroll down to the 2nd part.

The Beginning

Almost 25 years ago, when I was a strapping young lad in college, I was put in charge of a small computer lab. The lab housed about half a dozen Sun mainframes and an SGI Indigo. That Silicon Graphics machine was where I first cut my teeth in the world of 3D. I learned about GL (IrisGL, in particular, it’s own version of GL before OpenGL was a thing), vertex orders and how to put a triangle on a screen. All very exciting stuff in the early 90’s and something most people weren’t exposed to.

I was curious about everything. I learned low level Unix programming, building socket-based multicasting applications (hey, I had a whole lab of machines that I had access to), built text chat programs, then voice chat, then a distributed monitoring application that ran on all the machines and displayed server loads in a 3D scene on the SGI machine.

I built most of these applications in C and C++, but my love of languages didn’t stop there. I learned Perl, TCL/TK, Shell scripting and even did some work in CURSES, a terminal based library, and half a dozen others. So when I heard that Sun was working on a new language called Java, I dived right in. I remember downloading a beta of Java 1.0, and started building applets, which are Java applications that ran on the browser, Netscape Navigator (or was it Mosaic?) at the time.

Since I was really into graphics and wanted to build games, the first thing I did was try to figure out how to draw items on the screen and move them around. I built an applet which displayed text and wiggled the text. It worked ok, but there was flickering as it animated. I emailed the Sun Java engineers asking how I could implement double buffering so I could get rid of the flickering. Arthur van Hoff, one of the developers on the Java project, graciously replied, giving me pointers on what to do. I implemented his suggestions and then emailed him back to thank him and show him how well his suggestions had worked.

He replied asking me if I minded if he showed the applet around at Sun, and I said sure, and never gave it another thought. Little did I know what would happen next.

When Java shipped its release version, my NervousText applet was included in the JDK as one of the demo applets, and would continue to do so for the next 23(?) years. It was used as an example in Java books, talked about in Java meetups (user group meetings as they were called back in the day). Heck, it looks like even Mark Zuckerberg used the applet in his own web page! I like to think that my applet inspired him to build Facebook (not really). As far as I can tell, it’s still included in the source code distribution under the demo applets section. I don’t know if any browsers still allow Java applets to run these days.

NervousText in Mark Zuckerberg’s website https://gizmodo.com/5993535/holy-crap-is-this-mark-zuckerbergs-childhood-angelfire-website

Fast forward to today, I continue to learn and experiment with new technologies and frameworks, currently working on some Augmented Reality applications and prototypes.

I showed some of my friends a few of my experiments, and those who were with me in college (Hi Will!) jokingly said I should do an AR version of NervousText, so here we are. Let’s take the spirit of the original applet and take it into the present, and some might say, the future.

If you haven’t yet, check out my latest tutorial on placing text on surfaces. We’re going to use some of the things we learned there as the foundation for what we’re about to do.

The Code

We’re going to take the text creation code from that tutorial, modify it by taking the string being passed in, and breaking it down into individual letters that we can control.

This is the new code. We iterate through each letter of the string, create a node for it, and place it next to the previous letter. We use a static offset for each letter, but ideally, we would use the size of the letter to dictate the spacing. I also added a material since the white color of the text was pretty bland. We want to start getting excited here.

At this point we have the same functionality as before, except that we are now able to control and customize each letter as we wish.

Static, but looking better

Let’s create our jitter function. We want to move the letters up and down randomly, causing the word to seem as if it was jittering. We will move in the X and Y axis, but leave the Z-axis alone, as it has a nicer effect this way.

So we create small offsets in the X and Y directions which we pass to a moveBy action, create a backwards action to reverse the movement, and then a run action to call this method again. We put all these actions into a sequence, and run it on the letter node that is passed in.

We add a call to this inside of our character loop in the createTextNode method, and we’re off to the races.

Things are starting to get jittery

Let’s add a little pizzazz to the letters and have the color change as well. After the moveBy action, let’s add a random element to the text node’s material

Run it again, and lo and behold, we have NervousText, in AR, almost 25 years since the original was created in a computer lab in downtown Brooklyn, NY. Nostalgia, meet the future.

Thanks for taking this journey back in time with me.

Daniel Wyszynski is a developer who’s worked on more platforms and languages than he cares to admit to. He believes in building products that create memorable user experiences. To Dan, the users are first, the platforms are second. Follow Dan on Medium or Twitter to hear more from him. Also check out the s23NYC: Engineering blog, where a lot of great content by Nike’s Digital Innovation team gets posted.

Author’s Note: Views are my own and do not necessarily represent those of my employer

NervousText in AR, 25 years later was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.