Ben Crowder

Blog: #javascript

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

Introducing Cirque

As schoolwork starts to wind down, I’m finally starting to make progress on the creativity tools and HCI explorations I talked about back in September. This week I’ve also realized that graphical tools for art and design are what I want to focus most on. (I do still intend to explore textual interfaces, but they’re on the backburner for now.)

In the spirit of working in public, then, Cirque is a small WIP web app I’m building for making patterns via circle packing:

cirque-01.png
cirque-02.png
cirque-03.png
cirque-04.png

This is very much a rough initial MVP. You can tweak some settings, generate new patterns using a simple circle-packing algorithm, and export SVG (with the turbulence/displacement filters enabled by default), but that’s it. Some of the features I’m planning to build next:

  • Replace the settings text box with, you know, good UI (I’m also excited to explore color picker design here)
  • Add the ability to manually place both circles and anticircles (so artists are able to create intentional negative space)
  • Add a way to programmatically set the circle colors (probably via something like shaders, so you could say all circles smaller than a certain size get one color and the rest get another, or circle color is dependent on position or something else)

I’ve also thought about moving the circle packing code from JavaScript to Rust, to be able to play around with WebAssembly, but it seems overkill, at least at this point. (Instead I think I’ll plan to Rust and WebAssembly on the graphical type design tool I want to build.)


Reply via email or via office hours

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