Posts Tagged 'HTML'


Notepad (software)

I love doing too many things. My interests cover such a wide gamut that I wonder if I’ll ever settle on a career path. But that’s not why I decided to write this blog post.

I’ve been writing JavaScript for a long time. It all started when a friend of mine showed me how you could make a webpage using nothing but Notepad in the late nineties. I was immediately hooked. But HTML was so limited (especially back then), and I wanted more. It began with copying (stealing) and modifying a simple mouseover script for making an image change when you hovered the mouse over it, and from there it exploded into rewriting Minesweeper (poorly), creating my own “encryption” software (ha ha, “encryption”), writing simple chat bots, making guessing games, and occasionally even making a website for one thing or another (with plenty of mouseover effects).

But I soon learned that programming could be so much more than what I was using it for. After a decade of believing that I could never learn object-oriented programming (the ideas just seemed too advanced for me), as recently as last year I learned that JavaScript handled everything in the code as an object and that it was an object-based (even object-oriented) language.

This opened up worlds of possibilities. I had heard many wonderful things about what one could do in an object-oriented environment. I was excited to dive in and try it.

My favorite hypothetical usage for objects in programming, and something I had never really grasped how to accomplish with JavaScript, was the idea of defining one object with its own behaviors and attributes and setting many of them loose in an environment in which they could interact. I immediately wanted to try something like this, but it proved too difficult for me at first.

So I applied my new knowledge about JavaScript objects in other projects. I was timid and unimaginative about it at first. Looking back at those early projects that incorporated custom objects I can’t help but imagine that I was afraid of these new blocks of code. It felt foreign, and my code was awkward (not that I’m doing much better now). Eventually the idea of objects clicked, and I was ready to try my idea again, but I didn’t realize it right away.

children_raidThen, last weekend, I was sitting on the couch with my family watching Chitty Chitty Bang Bang (written, apparently, by Ian Fleming, with a screenplay co-written, oddly enough, by Roald Dahl), and the idea seized hold of me again. It was the scene where the children raid the castle toward the end. They rushed the adults, and I pictured it from a bird’s eye view as dozens of little dots moving in and attacking other little dots.

Not an hour later I was writing code. I started by defining an Army object, then I wrote the Warrior object constructor. It was complex, with dozens of little stats to track, and several complicated functions for thinking, targeting, moving, attacking, defending, and more (nearly 300 lines of code just for the Warrior object). I wrote code to define the starting position boxes for the armies (bases, essentially), code to draw the objects as stylized DIVs on the page, and I wrote an HTML page with a basic framework to display it all. I’ve been learning to use the CANVAS element for drawing, but I wanted to stay away from it as this was going to be a project I could play around with at work where they still have us using IE8 and the CANVAS element isn’t recognized.

Surprisingly enough, when I first ran it (about five hours after I wrote the first line of code) everything worked (kind of) as expected. I had to rework the rendering code (I was trying to redraw everything each frame, and with hundreds of little HTML objects that initial approach was impractical). After fixing the rendering issue it ran smoothly and most of the behavior was exactly as I had imagined it.

bbsI’ve tweaked several of the systems since then, but the essential framework hasn’t changed. You can try it here if the link doesn’t get overloaded (who am I kidding – I couldn’t possibly generate enough traffic to take down a dropbox link). The one item I re-worked the most was the targeting code. In fact, I’m still not happy with a lot of things in this project, but there are even more things that I love about it.

First, it’s the very first time I’ve made something visual with what I would consider emergent behavior. I wrote a primitive chat bot (I cannot be held responsible for anything Jimmy says) once that had some pretty unpredictable responses (many layers of code analyzing your input and outputting based on more criteria than I could keep track of), but that “emergent” behavior wasn’t always contextually appropriate (Me: “Hi there! How are you?” Him: “You’re not being very nice.”). My little battle simulator behaves very much like a little battle. The winner is determined by a mixture of attributes (leadership scores, strength and number of warriors, amount of supplies available, location of base, etc.) and circumstantial happenings. I’m just as incapable of predicting the winner as anyone else, yet there is very little variation between the armies in the way of random number generation.

If you do check out the link, I apologize in advance for some of the Leader names. The idea of giving each army a leader is credited to my co-workers, but the names for those leaders were also their ideas. I made some slight modifications to a couple of the names, but one of them I left in a fairly inappropriate state simply because changing it would have taken away from the effect. Some of the names are not child friendly, just so you know.

The thing I’m least happy about with this is the targeting code. It’s limited, inefficient, and doesn’t accomplish all the goals I had for it. I realized yesterday that what I really wanted was a collision detecting framework. I imagined a centralized process being aware of everyone’s location and allowing any one of the Warrior objects to perform a simple query to get his nearest neighbors. I was unfamiliar with actual collision detection methods for software, and was pleased to learn that what I had devised wasn’t too far off from reality.

In my current system each individual on the screen has to scan every other army’s soldiers and rule out targets that are outside of his visual range. This takes a lot of processor time, and whenever anyone was selecting a target there was an awful performance drop (especially at the very beginning of the battle when nobody had selected a target yet). I did a couple of things to mitigate this: any time around half of the soldiers in the army’s array are dead it clears out the dead from the array, shortening the amount of time it takes enemies to scan for a new target (since they no longer have to process dead people); and I spread the search function out over several frames rather than attempting to do it all in one rendering cycle (I also learned how to make recursive or pseudo-recursive functions this year).

Obviously, with each and every dot doing his own collision detection and targeting it’s still pretty inefficient. I need a centralized collision detection system.

But now I have to learn how to implement something like that. I might implement it in my current project, but I think starting a new project would be better. I want to redo a lot more than the targeting. Perhaps version 2.0 will be rendered in the CANVAS element with animated graphics, explosions, terrains, etc. I wanted to incorporate tanks and other vehicles, other soldier types (archers?), goal oriented behavior (capture the flag), stealing supplies from enemies, communicating with each other when in proximity (“hey, watch your back”), and other behaviors that would require something like “sight” to be implemented. But most of all I want their movement and behavior to feel just a little more deliberate. As it is they inexplicably fail to engage each other sometimes, their movement isn’t very confident looking or smooth, and there are a lot of undesired artifacts that come from the fact that I’m still not all that great at writing code that does what I want it to.

rvwOne final, and related, note. A good friend of mine shared a post on Google+ recently (yes, some people actually use that – though I almost never use anything but Notepad++ lately) and she reminded me of one of the primary reasons I love programming. I used to want nothing more than to program robots. You can see the video from her post here.

In the video they mention a piece of software they created called Robot Virtual Worlds. It looks like something that should have been made twenty or thirty years ago for me! The other link from the conversation at right is for a website where you can register for their Robotics Summer of Learning. In conjunction with the Robotics Summer of Learning, it appears as though you get a limited (Summer only, I think) license for Robot Virtual Worlds when you buy(?) ROBOTC. I’m not going to pretend to know which version of ROBOTC you need (poking around on the site for a minute didn’t give any answers, but I plan to return on May 20th as they suggest on the website to find out more), but even just playing around with Robot Virtual Worlds for one summer could be super fun. I’d have to learn C, but how hard could that be? Right?

Family Good

The purpose of this post is to provide our family and friends with an update, but first I have a technical gripe to get off my chest. In advance, thanks for listening.

Sometimes the lessons I was taught as a youngster conflict with the situations life throws at me as an adult. This is, in all actuality, one of the lessons I learned from my parents. Life is one giant school, and you have to be willing to learn new tricks all the time.

Take, for instance, a formatting rule I was taught while writing papers for school. Between words you place a single space, but sentences get two spaces between them. As I grew older, I learned about all of the different styles of formatting that govern such things and found that the rules change dramatically between styles.

These days most of my writing is published here on WordPress, where HTML is the technical language behind the formatting. Remember, HTML stands for HyperText Markup Language and it governs how things appear on web sites. In true HTML formatting, spaces do not aggregate. In other words, if I were to write out a word in a web page and put five spaces after it before the next word, the HTML rendering engine process those five spaces as one space. The only way to force more spaces to be drawn is to write out a special character code for the additional spaces. The character code is called a “non-breaking space” and is written like this:  

The “non-breaking space” does two things. First, it demands to be rendered in the text. Two NBSP characters next to each other actually render as two spaces, not just one. As the name suggests though, the “non-breaking space” also maintains line integrity with the following non-breaking character (normal spaces are breaking characters, groups of letters are not). You could say that a non-breaking character is any character that sticks to the character after it no matter what (like the letters of a word).

While browsing through some of my posts you may notice a very small detail that bothers me. Sometimes, if the conditions are just right (the end of a sentence in the middle of a paragraph happens to fall at the end of the line and the new sentence begins on a new line) you will see a space that slightly indents new lines in the middle of a paragraph. The reason? When I put a double space between sentences in the WordPress word processor, the only way it knows how to maintain the multiple spaces in HTML is to make one of them a non-breaking space. So the first space is normal, allowing a break, but the next space is a special character that sticks to the next line causing the strange indent.

This is not acceptable to my picky eyes, and after months of agonizing over what to do about the situation, I have come up with a simple solution. It is better to abandon the double space rule than to continue producing strangely formatted text on WordPress. So despite my good upbringing, I am now placing single spaces between sentence.

Let me tell you, in all of the above paragraphs, I have placed double spaces after every single sentence with only a couple of exceptions. Double spacing is a tough habit to break.

OK, I got that out of the way, now to talk about our family.

Sophie has been having a rough time lately. She’s been teething, and after at least two months of pain and suffering she has nothing to show for it. She had been demanding a lot of late night comfort feedings that were beginning to really eat away at our sleep time, so we recently decided to put an end to it. The transition has been rough for all of us, but there has been progress and we expect her to be sleeping through the night soon.

Unfortunately, she has been extra clingy today since we “abandoned” her yesterday. Abandoned is the word she would choose to describe our actions, but in reality we got a trusted babysitter and went out on a date. We went to a formal ball (family and close friends interested in seeing our outfits can e-mail me a request) with a good steak and chicken dinner, a wise speaker and a dance afterward. We had fun, the kids were fine for the sitter, and we came home before ten.

Sophie was traumatized. She tends to be a little dramatic about things anyhow (every time she bumps her head or falls down she would have us believe she is paralyzed from the neck down), but she has carried the drama through to today and it is getting old.

Her speech has developed into some very interesting babbling though. She now distinguishes almost perfectly between “mom” (or “mama”) and “dad” (or “dadadada”), and she uses other definite sounds to ask for things or alert us to her needs, though this behavior is a little inconsistent still. She tends to put an “a” before things that aren’t mom or dad. Example: “a-gi-gi” (the “g” is gargled) = a general word meaning “hungry,” “sleepy” or “stinky,” all of which follow the vowel sounds of her phrase very closely.

For a while her favorite sound was “ba” and she started substituting more familiar sounds with “ba” just for fun. For example, I became “da-ba” and mom became “ma-ba.” Play time sounded like this: “ba, ba ba ba, ba-ba.”

If we say “boom boom,” she starts whacking things. If we say “cookie” she looks around expectantly for cookies. If we say “come here” she crawls to us very quickly, unless she is busy playing.

She gets around very well, and it looks like she’ll be walking before the end of the year. She is very stable on her feet, and can balance in place with no support for almost a second. With one hand grabbing something for support, she can stand and walk around just fine.

Finally, Sophie has been playing a lot more intensely. She will now take two toys and make them interact, give them individual sounds, and make them scream when they are in distress or attacking. This morning, I watched her playing with a guitar toy, a green duck and a koosh ball. The koosh ball and the guitar talked for a while until the green duck came sliding in from the side for an attack, screaming a shrill war cry.

Sophie is really the most interesting person in the whole house right now, the rest of us aren’t doing much of anything at all. Micah has been out of school for the last week and will be off this week as well. I have the day off tomorrow, so we’ll all get to spend one more day together before I go back to work.

I can’t think of anything else to write about, and my wife needs a break from the clingy baby. Don’t forget to write your thoughts and comments, and if you’re related or a friend, write us an e-mail!

Subscribe to Me

What I’m Reading

When I Post

January 2021

RSS My Favorite Quotes

  • Quote #60
    "The greatest minds are capable of the greatest vices as well as the greatest virtues." - Rene Descartes
  • Quote #59
    "There is nothing noble in being superior to your fellow man; true nobility is being superior to your former self." - Ernest Hemingway
  • Quote #58
    "The fool doth think he is wise, but the wise man knows himself to be a fool." - William Shakespeare

I have had:

  • 52,504 page views (so far)