Ben Crowder

Blog: #javascript

12 posts :: tag feed :: about the blog :: archive

Links #17


Reply via email or via office hours

Links #6


Reply via email or via office hours

Alphabet app

Our toddler loves looking at letters and saying their names. A while ago we printed the alphabet out onto cardstock and have been using that with her, which is great, but I’ve also wanted to write a small web app that does the same thing — mostly for when we’re in another room, but also to make the randomization a little better. And because I can’t seem to stop writing little apps.

So this morning I threw together Alphabet:

Super simple. Click, tap, or hit a key to move to the next letter. It works on phones and tablets as well.


Reply via email or via office hours

Botswana 2.0

Two years ago my friend Chad and I released Botswana, a browser-based arena game with programmable bots written in JavaScript.

But the original was kind of boring. So we tweaked the game mechanics a bit and made a number of other modifications (multiple bots per team, extensible rulesets, etc.). And now we present Botswana 2.0, a culmination of rampant nerdiness.

The thing that interests me most about the game now is the customizable rulesets. For example, it took all of ten minutes to change the game so it’s played on a series of conveyor belts that move the bots up and down:

It likewise took less than half an hour to make the bots orbit the Death Star instead:

Since the drawing code is part of the ruleset, it’s fairly easy to get a radically different look:

Switching between the rulesets is just a matter of changing the URL in the ruleset box and starting a new tournament.

Anyway, as before, the release is on GitHub, with a README that explains how to write bots and customize rulesets and stuff.


Reply via email or via office hours

Javascript name box

In genealogy web apps, I kind of like consolidating name fields into a single textbox. Simpler is better. But then you run into the problem of distinguishing the surname from the rest of the name — because of surnames like “Gutierrez Sanchez,” you can’t just assume the surname is the last word in the string.

I’ve been thinking for a while about a clean way to deal with this (as well as giving a nice visual indication of the surname instead of just slashes), and here’s what I’ve got so far, which I’m dubbing (rather unimaginatively) the Javascript name box:

When you click on the name, it becomes editable:

How it works

Basically, you give it an input.namebox element and it creates a corresponding div tag for displaying the highlighted surname. It then flips back and forth between the input and the div, parsing the name field and changing the highlight appropriately.

Live demo

Javascript name box


Reply via email or via office hours

Erasure

When I was a kid, my mom used to have us memorize poems. She’d write the poem out on a whiteboard and we’d recite it a few times, then she’d start erasing a few words, have us recite it again, erase a few more, and so on. And it worked.

Turns out it’s super easy to do the same kind of thing in a web app. Here’s Erasure:

If you click on an erased word, it’ll briefly become visible again. (But of course you only want to do that if you’re really stuck.)

As usual, the code is on Github.


Reply via email or via office hours

Botswana

As previewed a little while ago, I’d like to introduce Botswana:

A couple weeks ago at work I was talking with two of my coworkers and Core War came up somehow. I got excited about the idea of writing AI bots to compete with each other. Conferring with my friend Chad, we decided to make it web-based and use Javascript as the scripting language for both the bots and the game engine. A couple days later, we had a working engine, and we’ve been fine-tuning it since then.

Each turn, the engine sends the current state of the world to each bot. The bot can then give the engine its command — to move forward, move backward, turn left, turn right, or fire. Last bot standing wins. We’ve gone with an intentionally simple rule system for now, but we’ve got some fun plans for future improvements.

The code’s open source and is on Github.


Reply via email or via office hours

Botswana sneak preview

Here’s a quick sneak preview of my current project:


Reply via email or via office hours

L-system animation tests

I’ve been playing around some more with the L-system code and modified it to animate the angle property and output each frame to a file. I also added some color and started using blending modes for the brushes. Once I clean up the code, I’ll post it to GitHub.

Anyway, here are some of the animation tests (I used Blender to put the frames together into an animation):

And the first one I did, which is a little too long and a little too fast:


Reply via email or via office hours

L-system sketches

I’ve been getting into procedural drawing and generative art some more, and last week I decided to try out L-systems. I ported some Processing code to Javascript and Canvas, then modified it and added controls so I could tweak the values and try things out. I also wrote a handful of additional brushes to get more interesting renders out of it (since plain lines can be kind of boring).

The algorithm isn’t entirely accurate — at least based off of the axioms and rulesets I plugged in from the Algorithmic Beauty of Plants book — but I like what I’m getting. I’ll do a second app sometime later with the correct algorithm.

Anyway, the code (which is kind of messy at the moment) is on GitHub. Sometime later I plan to add color selectors and more brushes. You can see the rest of these images in my sketches set on Flickr.


Reply via email or via office hours