Topics:
apps
css
games
javascript
mobile
node
php
speaking
tehcl
textmate
tools
video
webgl

Topic: javascript

Happy 4th! 3D CSS3 + HTML5 Fireworks

published:
2012.07.04
topics:
css
javascript

Happy 4th of July everybody! It's over 100°F here in Minneapolis today. I made some virtual fireworks sitting in front of my AC trying to stay cool.

Fireworks animated gif.

I've used 3D CSS3 transforms and text-shadow for depth of field blurring, plus some HTML5 audio... cause you gotta have explosion sounds for fireworks. It technically rendered in Firefox, but terribly slow. So, for best results check it out in Chrome or Safari.


Protoboros: Global Game Jam 2012 Entry

published:
2012.01.29
topics:
games
javascript

Protoboros Screenshot.

Protoboros is a local 2-player video game I made in 48 hours for the Global Game Jam 2012 theme of "Ouroboros." You and your friend play as snakes that try to bite each other's tails.

The game uses a custom made JavaScript engine with procedurally drawn HTML5 Canvas graphics. I'm particularly fond of how the game's background / ambient environment responds to the emotion and intensity of the gameplay. Whenever there is a rising level of danger that a player is about to receive damage the game's environment grows more red and the motion speeds up.

I also put a gameplay video on YouTube.


Free/Open SOPA Blackout Protest Template

published:
2012.01.17
topics:
css
javascript
tools

Screenshot of template with spotlight effect. Fork me on GitHub

CISPA Blackout? https://github.com/zachstronaut/cispa-blackout

SOPA and PIPA are terrible bills in the US Congress, and on January 18 the web is going went dark to protest.

Copyright theft is already illegal. Why is Congress wasting our time with this? If passed into law, these bills will lead to censorship without due process of law. They protect the rights of multi-billion-dollar corporations, but they don't protect the rights of the average web publisher. Join the fight!

Why Did I Make This Template?

When I heard about how the web was going dark (including sites like Reddit and Wikipedia!), I felt inspired to make an interactive blackout template that played off the theme of "going dark." It was a way for me to channel my frustration with these bills creatively. Some artists paint. I guess I write code. (I actually repurposed one of my old demos for this.)

I made the code public domain and put it up on Github so people could fork it and improve it. You are welcome to use it, and I require no attribution. [Technical note: Check out this post about 503 HTTP headers.]

And Then What Happened? (Going Viral)

I submitted my template to BoingBoing in the middle of the night on Sat, Jan 14 right after putting it together, and Corey Doctorow wrote me back with some good ideas for adding more information to the design so that people would be better informed about the issue. He posted my template on Sunday. It then got picked up by YCombinator News, showing up in their Twitter feed and front page. It started to pick up some buzz on Twitter. On Tuesday, I talked on the phone with a really kind writer for Fast Company. Mashable wrote about it, too.

I thought the response to my template was totally crazy and unbelievable at this point. I had over 50,000 people come to view it from Sunday to Tuesday. And there is nothing quite like that many people coming to see your downloadable template to make you second guess your code! Sorry if you had any problems! I thought there would be quite a few sites using my template during the black out on Wednesday, but I really had no idea just how much my template would resonate with people...

What Has Been the Impact? (Holy Crap!)

At midnight Tuesday night/Wednesday morning I suddenly realized...


Legend of Equip > Pants

published:
2011.11.01
topics:
games
javascript

Play the full Legend of Equip > Pants Game!

The Legend of Equip Pants: Adventure RPG

Original Post:

I'm very happy to announce my new short adventure/RPG game, The Legend of Equip > Pants: Chapter 1. It's got a spooky vibe. Hopefully you follow me on Twitter and you caught news of my game release on Halloween! I made my deadline goal. I didn't get every last detail in, but I did finish! Hooray!

Game screenshot.

This game is featuring music created by Christopher Winter. He really deserves a lot of major kudos, because he put together music for me in less than a day! (Totally my fault for ignoring music for my game until the last minute!) The game would not be the same without his efforts. Thank you, Chris! Thank you thank you thank you!

Well, this is it for now. I'm interested in doing a proper postmortem, because I learned a lot about my own personal game making process I'd like to share. I also have some thoughts on Akihabara vs. Impact.js. However, this will all have to wait for another blog post on another night, because I'm tired!


Pre-Halloween Spooky Web Demo

published:
2011.10.27
topics:
css
javascript

Boo! Halloween is my favorite holiday, and it is only just around the corner. Here's a spooky web demo I made earlier this month, and I wanted to share it with you. Write your own scary message in #b1000d!

CSS3 and Canvas Bleeding Text Screenshot.

The demo uses HTML5 Canvas to draw the falling streaks of #b1000d. In Safari/Chrome, I'm also able to fill the inside of the letters themselves with a shower of #b1000d. To accomplish this I use an off-screen canvas and the special CSS3 rule background: -webkit-canvas(mycanvas); to set the background behind the text to the canvas animation I'm doing in JavaScript. Then, I use another CSS3 rule -webkit-background-clip: text; to clip the canvas to only show the parts of the canvas that are underneath the text. Finally I make the text see-through with color: transparent; so we can see that clipped background. Go ahead and view source of the demo if you want to see more.

Before you go, I have another announcement, too. I'm working hard trying to complete my new game by Halloween. (I'm both making a game and keeping up with my client work, so wish me luck! heh) It will be a new chapter in the world of Equip > Pants. I hope that you'll like it.