Category: Expression

enchant.js | Fundamentals

enchantjs-fundamentals-1

We’ve entered Phase Two of my game programming course, and to help support this phase, I’m putting together enchant.js | Fundamentals.

While currently not as interactive nor as descriptive as what I developed for Phase One, I’m hoping these incremental examples will make it easy for those new to programming to grok some fundamental techniques and concepts.

Again, feedback is appreciated.

Just Enough JavaScript

just-enough-js-1

I got a last-minute opportunity to teach an introduction to game programing course for people with no programming experience. I decided to base it around an open source HTML5 framework*. When I started looking around for a crash course with which to build basic JavaScript programming skills, I found none that were appropriate. Hence, Just Enough Javascript was born.

I’m creating it as a just-in-time resource for the course. There a little bad-but-expedient practice in there, but it’s working quite well for the course so far. Each page is resource-complete in itself—meaning you can download just a single HTML document and later view it without a live Internet connection.

I would love to hear any feedback about it.

* I considered enchant.js, Phaser, and melonJS. There were pros and cons to each, but I ultimately went with enchant.js because I like it’s event-driven nature (better reflects how JS “should” work) and it has a smaller (and therefore less intimidating for beginners) API.

Mozilla Brick and Zepto.js

old-red-brick-wall

Raymond Camden wrote up an instructive example that shows how to use Mozilla’s Brick UI Components with vanilla Javascript. I decided to take that and modify it to use Zepto.js instead. I have no idea whether this is a good idea or not, but it’s done now so there’s no point in crying about it. Here it is:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--
    From http://www.raymondcamden.com/index.cfm/2013/8/23/Brick-by-Mozilla
    Adapted to use Zepto.js by MFK.
    -->
    <title>Brick Card Demo</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/brick-1.0beta8.css"/>
    <script src="js/brick-1.0beta8.js"></script>
    <script src="js/zepto.min.js"></script>
    <style>
      html, body{
        height: 100%;
      }
    </style>
  </head>
  <body>

  <x-layout>
    <x-appbar>
      <div>
        <a href="" id="homeLink" title="Home">=</a>
      </div>
      <header>Brick Card Demo</header>
    </x-appbar>

    <section>
      <x-deck id="mainDeck">

        <x-card>
          <ul>
            <li>
              <a href="1" class="deckLink">Page 1</a>
            </li>
            <li>
              <a href="2" class="deckLink">Page 2</a>
            </li>
            <li>
              <a href="3" class="deckLink">Page 3</a>
            </li>
          </ul>
        </x-card>

        <x-card>
          <h1>Page 1</h1>
        </x-card>

        <x-card>
          <h1>Page 2</h1>
        </x-card>

        <x-card>
          <h1>Page 3</h1>
        </x-card>

      </x-deck>
    </section>

    <footer>
      Based on code
      copyright &copy;  2013 Raymond Camden
    </footer>
  </x-layout>

  <script>
    $(function() {
      console.log('domCom loaded (zepto.js!)');

      var deck = $('#mainDeck')[0];

      $('#homeLink').click(function(e) {
        e.preventDefault();
        deck.shuffleTo(0);
      });

      $('.deckLink').click(function(e) {
        e.preventDefault();
        var target = e.currentTarget.href.split("/").pop();
        deck.shuffleTo(target);
      });
    });
  </script>
</body>
</html>

Goodbye NURBS. Hello Printy.

target-baskets

The photo above was snapped at my local Target store yesterday. It tells me two things:

  • The era of NURBSy design has ended.
  • We have entered the era of printy design.

NURBSy design is what I call the aesthetic that has dominated product design over last couple decades. As soon as CAD tool companies introduced NURBS into their modeling products, we started to see products using NURBS everywhere. Need a handle for a kitchen strainer? Make it interesting by NURBSing it. Need a headlight? Make it interesting by NURBSing it. Etc. The availability of NURBS modeling tools led to its widespread and almost indiscriminate adoption, not the other way around. While this might be understandable, it must also be recognized that this is a fairly arbitrary approach to form.

Now, 3D printing is all the rage, and those engaged in making 3D printed design artifacts seem to be gravitating toward a common “faceted/fractally/spiderwebby” aesthetic. The aesthetic is ostensibly driven by the current limitations of 3D printing technology: the raw materials used in making prints are expensive and not that strong. The limited vocabulary of solutions that is emerging is striking. It’s as though referencing something that references 3D printing is more important than finding a really good or original solution. Or not. The main point here is that there is an emerging 3D printing aesthetic that is very identifiable.

To me, what’s most interesting about the objects in the photo above—and what leads me to think that we are now in the era of printy design—is that they were (as far as I was able to tell) not 3D printed. The form is simply a reference to a new and hip technology. Some might say that it’s a sign of the times.

This “sign of the times” approach to form isn’t exactly new in design. One of the things you should get from Corbu’s Towards a New Architecture is that he was actually much more interested in building a home that evokes the machine than in “building a machine for living in.” In a graduate design seminar a lot of years ago, the insightful Charles Owen referred to this kind of thinking among Modernists as “functionalistic” design. Evoking (and not necessarily signifying) functionality was more important than being functional. The aesthetic is the message. We can see this *-istic approach to form in the mid-century streamlining trend in the USA as well. There’s no compelling reason for a toaster to be streamlined, but many were. Lather, rinse, repeat.

What makes NURBSy and printy design different from functionalistic and streamlinistic design is that they reflect developments in design technology rather than developments from another field. I don’t really know what the significance of this is. The cynic in me has me thinking about isolationism, tribalism, and narcissism; the optimist is mumbling something about design discipline maturity and confidence but is otherwise silent.

In any case, what I am sure of is that all of this underscores the need for more dialog about the meaning of form in design. There is some, but we need a lot more.