Tuesday, March 25, 2014

The Input Garden

I've been reworking a JavaScript program I wrote a year ago that functioned as a key listener; I basically wanted to teach myself game mechanics and one of the products of this became the new home page for my /projects directory that I use for testing, which I now call The Input Garden. I had been thinking not so much about creating a game, rather creating a website that worked like a game, and having to play through the game in order to view the website.

I was inspired to create the character animation after playing Advanced Dungeons & Dragons for the Intellivison. I wanted a character moving up/down/left/right in a flat world, without the problems created by an overhead display. I had written something about Web 2.0 websites being as creative as the Men's room at Applebees, so the Men's room character seemed like a perfect fit.

I get sick of visiting Web 2.0 websites. Everything is designed super slick but they are boring when it comes down to the design. I think this is due to the proliferation of apps like WordPress, Blogger, Wix, 1and1 and other instant website convenience/production tools (and of course I'm guilty as anyone, this built in Blogger, my comic built in WP). Convenience rules unfortunately, and that is all that anyone wants so most people choose slick over originality and creativity. The end product is a set of expected interactions: no Twitter feed? No tool to "Like" me on Facebook? Pare down these frivolous extras and you get down to the meat of a website. What if you took away all of that extra noise? Would your website still hold up?

I miss Web 1.0; the proliferation of websites before popularized convenience tools were used. I recently found A Guide to the Orders of Trilobites, a fantastic site, absolutely filled with graphics, animations background images and page after page crammed with fascinating information on these cool creatures. This website is a work of love, and I would hate to see it destroyed by Facebook Twitter and Google.

Anyway, enough ranting about web design; stay tuned to The Input Garden. It's designed to work for mouse, key and touch inputs but it is not without it's bugs; I can't seem to get it to work on an iPad in Safari at this very moment but I'm working on it.

Tuesday, March 4, 2014

Should my child learn how to code?

Somebody at work asked me this question today and wanted my opinion on it. I've seen this subject published on news sites and tech sites and somehow people have it in their head that teaching small children to code will give them skills they will need in the future. I know that a number of elementary school classrooms around the country have implemented basic programming into their curricula. I've worked as both a programmer and a college professor and here are a few points I'd make:
  1. Programming is definitely not for everyone. Most people that I know when exposed to programming languages for the first time find it very frustrating and dry. Learning "Hello World" is great, but really learning how a computer works takes a lot of time.
  2. Learning programming does not give children social skills; time focused on a computer or an electronic device does the opposite. Using computers and the internet and social networking tools does not make us more social; it does the exact opposite and it promotes antisocial behavior in children at an age when developing social skills is critical.
  3. Children have enough problems under abusive presidential policies like Race To The Top and No Child Left Behind. These policies drain all of the creativity out of learning, and successful programmers are creative people. Politicians don't talk with teachers; they talk with corporations like Pearson that can make it through their doors with huge donations to their election campaigns. Pearson wants to turn our classrooms into computer programs that they can profit from (see #2 above). Ask any teacher what they think of Race To The Top and the Common Core; these policies force children to learn with blinders on and remove critical and creative thinking from learning entirely.
  4. The best programmers that I know are creative people and Art, Music, Phys-Ed, Language; any of the non-STEM classes are all being minimized in schools today. These classes provide a diversity of learning for students and can work hand-in-hand with STEM classes, but unfortunately school administrators do not understand this (see #3 above). Becoming a good programmer does not necessitate learning programming directly, but communication and creative thinking skills are extremely important; certainly more important that code itself.
I am certain that some children may successfully learn from early programming curricula, but I have serious doubt as to whether or not learning this would be any less effective than more creative learning methods.

Want your child to have applicable skills in the tech industry? Pick up a musical instrument. This teaches math, language skills and creative thinking. Hands down, the best programmers that I know are also musicians.

Saturday, January 18, 2014

Hammurabi's Code, Beer Defender and Mundane Games

Most of my prior experience in programming has been out of necessity, form, file and database interaction. After creating IT Freakout, I became interested in game mechanics, so I created another quick game utilizing keyed input for user interaction. Similarly, I wasn't so much interested in commercial viability for this game, rather I was looking at it as a way to study code and create a time-waster, so I created Hammurabi's Code. Hammurabi's Code seems more like a joke on the user than a game (and to the curious, no there is no trick; the game always ends the same...)

My next objective was creating a game that recognized space, time and basic collisions, so I started Beer Defender. Beer Defender is more complex than the other two, and because of this I've been having some memory issues due to it's complexity. What you're seeing here is a working version, missing an animation with the boot dropping instead of just disappearing. So Beer Defender is still in the works; I'm going to add multiple levels and increase game speed and difficulty as the game progresses. As it is right now, it's just a sort of study, but I will update it soon.

As they are, these games work for desktops (traditional mouse or trackpad input). The next stage is to get them working properly for tablet (touch input) as well.

Initially I was fascinated with those wonky Windows 8 icons. I started using them because it seemed like there was practically an icon for everything. There is something very mundane about boiling down anything into an image that is supposed to universally represent it, so I've started calling these experiments Mundane Games, due to the fact that all of them are easy time-wasting entities and they all use this same visual language. I've been creating all of them at a standard 600x400 size, and they are peppered with Comic Sans, (if for no other reason than to piss off my designer friends...). There will be more Mundane Games to come so stay tuned.

Thursday, January 9, 2014

Fate Browser 1.0

I've finally (sort-of) finished my tarot web application, Fate Browser 1.0. It features a Past/Present/Future reading, a preview of the entire Rider-Waite tarot deck, and a random card shuffler. I noticed that very few of the tarot card applications out there had bothered to figure out the feature of the inverse card; the upside-down card which of course, has a separate set of Divinatory Meanings. Fate Browser has this very basic feature.

I think that most of the tarot web apps and Android apps I have seen were just a means to collect contact information. Two of the Android apps were infested with adware and one of them had managed to take over my OS and send out spam on behalf of my phone!

First off, Fate Browser doesn't capture ANY user information. Fate Browser is basically JavaScript, jQuery and clever use of CSS, reading from a JSON database of the deck of cards. I've been tweaking fades and transitions to make it feel more 'ominous' or creepy and less like a clunky set of web pages.

I've got plans for expanding Fate Browser, first being the inclusion of the Celtic Cross-style reading and possibly including the artwork from other card decks, like the Marseilles deck, so stay tuned, and when you wake in the morning, let your day be a Fate Browser day!

Monday, January 6, 2014

Tarot Card Browser

I've always been a huge fan of the tarot and of the Rider-Waite deck in particular. Years ago my sister gave me a deck of cards and I was fascinated by them. I used to carry a deck around with me and I wanted to recreate the feeling of having a deck in hand without having one in hand, obviously. The goal is for this project to be simply all about the cards. Most of the sites and apps that I've looked at only reproduce the card images, without attention to what the actual card itself looks like (the image versus the object). This one is all about the object of the card, and the deck itself.

I've recently been working on a web app for this; first for web, then later I'll make one for Android. I've encountered a few bumps, but most of them haven't been programming issues; they've been around attempting to work my way around A.E. Waite's weird-ass descriptions of the Major Arcana from his booklet, A Pictorial Key to the Tarot, published 1911. Waite uses some very arcane, very flowery, and also very obscure references within his descriptions. The descriptions of the Minor Arcana are fine, which leads me to believe that someone else may have written it.

Tuesday, December 10, 2013

jQuery UI

Having used jQuery for years, I've been meaning to teach myself jQuery UI for a long while but for whatever reason I've either never had the time or I made excuses.
One excuse I've used was my natural wariness of adding on more and more JavaScript to my web apps, having seen plenty of cases where overly-ambitious client-side JavaScript cripples a web application, simply for the various effects of sliding menus and trendy user interface elements (and I mean you, Hotmail...). I'm a huge fan of Less Is More, so slick interaction that slows down a web page is BS. Superficial User Interface features can be cool, but like in anything the difference between superficial and useful is all in the application of it.

Flexible and powerful

All that aside, I finally found the excuse and dove right in. jQuery UI has scads of handy functions for things like dragging and dropping elements, creating quick widgets like tabs and tooltips, date-picking calendars, progress bars and modal windows. Of course it's just an extension of jQuery so it's usually nothing you can't write up in longhand JavaScript, either but if you're using this stuff extensively jQuery UI can be vey useful.
I created this demo web app, IT Freakout which randomly spreads out elements which have to be dragged to their respective spaces, using the new draggable() and droppable() functions. Like anything in jQuery, it can all be coded in longhand JavaScript but if it's something you're going to be using a lot of, it's helpful and much quicker to code.

But be sure to cut out the fat

The extra payload of JavaScript is still considerable, but in that respect, jQuery UI is especially helpful in being separated into different functions; you use what you need and dump the ones you don't need to save the browsing payload. One other complaint I guess I'd have is the use of CSS, loading multiple separated stylesheets, but a careful coder can dive in and remove the fat here as well.

Saturday, November 9, 2013

Cursor Tracking is Nothing New

I read today: Facebook Tests Software to Track Your Cursor on Screen. So Facebook has terrifying new software to let them know where your mouse moves...

This isn't anything new; it's actually just rudimentary JavaScript involving the DOM Event Model. Here's one method tracking X and Y variables using the pageX and pageY events. Move your cursor over the orange box below to see it in action:

Cursor X:
Cursor Y:

<div onMouseMove="trackCursor(window.event);">

<tr><td>Cursor X:</td><td id="crsx"></td></tr>
<tr><td>Cursor Y:</td><td id="crsy"></td></tr>

<SCRIPT LANGUAGE="javascript">
function trackCursor(n){
  document.getElementById("crsx").innerHTML = n.pageX;
  document.getElementById("crsy").innerHTML = n.pageY;


From there it's simply a matter of keeping track of the X and the Y of all of your page elements; easily be done through smart CSS, and then pushing the location-mapped identities to the database every (n) number of times a second. Here's another method tracking by using the onMouseOver event on an ad:


You like Doritos.

<div id="doritos">Doritos</div>

You like Doritos. <div id="crsz"></div>

<SCRIPT LANGUAGE="javascript">
doritos.onMouseOver = mouseOver;
var count = 0;

function mouseOver(){
  document.getElementById("crsz").innerHTML = count+" Times";

I'm actually surprised they haven't tried this sooner; it's creepy but it's easy to do. These examples are in regular JavaScript, but with libraries like jQuery available, owners can track even more user behaviors. Although I love jQuery, I find it cumbersome to use an entire library just to save a couple lines of code.

Companies like Facebook and Google started out with such positive energies; remember Google's Don't be Evil corporate motto? Today these companies are finding themselves no longer happy to just exist and make the world a better place, but they need revenue to stay as huge as they are, and that means finding ways to use all of that data that users create.