Hack-A-Day: Hack-A-Battle

It’s november, and I’ve decided this month that I’m going to do 30 projects in 30 days. It’s an all-month hack-a-thon!

Yesterday’s project was Hack-A-Battle (demo, source). It’s two dueling music visualizers (sound warning!). Red vs blue. As each hits the other with bullets, they lose heath. As a band takes damage, it gets dimmer and quieter. Eventually one band will win out and be the only one playing.

I thought this was a cool idea, but I’m not really happy with the implementation

  • It’s a little laggy, especially when explosions happen.
  • It’s probably a little too fast of a battle.
  • I wanted to the things coming out to actually be linked to a music visualizer, which I almost had time to do.
  • It would have been better if the “bands” took turns playing instead of both going at once, for the poor listener.
  • It requires a fairly big display, and beefy computer/phone. It doesn’t work well on a small screen at all.
  • I wasn’t super pleased with the code. It was so-so
  • I wanted you to be able to upload your own songs and duel a friend
Tagged , , , , , ,

Hack-A-Day: Hack-A-Hang

It’s november, and I’ve decided this month that I’m going to do 30 projects in 30 days. It’s an all-month hack-a-thon!

Today’s project is Hack-A-Hang (demo, source). It’s a place to hang out. It has text chat, video, and audio.

Hack-A-Hang is NOT WORKING.

Unfortunately while everything works great on my machine, there’s a bad problem in production, and I ran out of time on this one. I’ll try to get it fixed before the end of the month if it’s easy.

Hoo boy, this was one of the technically hardest ones so far. WebRTC is no joke. And not hard in a way where you have to think, hard in a way where the debugging tools are terrible. (Drag and drop was another tough one)

Tagged , , , , , ,

Hack-A-Day: Hack-A-Crop

It’s november, and I’ve decided this month that I’m going to do 30 projects in 30 days. It’s an all-month hack-a-thon!

Today’s project is Hack-A-Crop (demo, source). It crops an image to a fixed size.

I got help from several people on the CSS, thanks to instantly sharing my work via ngrok from my laptop. Thanks people! Thanks ngrok!

Today’s project was in anticipation of showing off what I did at the end of the month. I want a small thumbnail for each project.

Tagged , , , ,

Hack-A-Day: Hack-A-Stats

It’s november, and I’ve decided this month that I’m going to do 30 projects in 30 days. It’s an all-month hack-a-thon!

Today’s project is Hack-A-Stats (demo, source). It displays web traffic statistics about Hack-A-Day.

The original point of the project was to show some nice graphs in d3, as an effort to teach myself d3. But halfway through I got unbearably bored by “show a bunch of stats” as a project, so no d3. Whoops! You win some you lose some.

Tagged , , ,

Hack-A-Day: Hack-A-Sound

It’s november, and I’ve decided this month that I’m going to do 30 projects in 30 days. It’s an all-month hack-a-thon!

Today’s project is Hack-A-Sound (demo, source). It’s a small soundboard.

You can:

  • Play 25 built-in samples
  • Record your own samples with your mic
  • Play samples directly, or record them on up to 4 tracks
  • Have tracks play one time only, or loop
  • Adjust the alignment of tracks
  • Use a keyboard or mouse
  • (Mobile not supported)

Have fun. I think this was a pretty good toy.

Tagged , , , , ,

Hack-A-Day: Hack-A-Line

It’s november, and I’ve decided this month that I’m going to do 30 projects in 30 days. It’s an all-month hack-a-thon!

Today’s project is Hack-A-Line (demo, source). Hack-A-Line is a 5-in-a-row game for two players. You play online against each other by sharing a link.

I’m okay with this one, except that there’s one really bad display bug that kind of ruins it. I’m starting to develop a list of projects where I might want to go back and fix something after this month.

I skipped yesterday because I needed a break.

Tagged , , , , ,

Hack-A-Day: Hack-A-Tile

It’s november, and I’ve decided this month that I’m going to do 30 projects in 30 days. It’s an all-month hack-a-thon!

Today’s project is Hack-A-Tile (demo, source). It’s a tile-matching game like dominos.

Hack-A-Tile is based on mathematical Wang tiles. It was very tempting to call it Hack-A-Wang.

If I update it, I would

  • Zoom out as you go. I think that would look cool!
  • Animate shifting over. Right now adding tiles on the top or left is visually confusing.
  • Change the tiles. These are fun mathematically, but not ideal for a game
  • Either add a maximum size, or some constraint to stop you just making one long line.
Tagged , , , , ,