-
[Flash 10 is required to watch video]
It’s nearly midnight, so that must mean I’m STILL WORKING ON MAKE PIXEL ART.
That’s why we call things like this “passion projects.”
Here’s another progress video, demonstrating all the new isometric drawing modes. It is so much fun causing these to come into existence with your fingers.
-
Software For You!
Hey dudes,
XOXCO’s very first iPhone app was finally released today. SendTab allows you to send and receive links between your phone and your browser. You can use it to send an article to your phone to read on the go, or send a video from your phone to your browser to view on the big screen. It works with normal links, Youtube videos and Google maps.
We use it at our house to control our living room computer - our iPhones are now browser remote controls. We also use it at the office to share links between our team.
You can download SendTab for just $0.99, and in return, we will provide you a lifetime of friendly tab-sending service for free.
For the nerds in the audience, my personal favorite thing about SendTab is that it is completely built in JavaScript - the iPhone app, the browser plugins, and the high performance web service that ties it all together. Amazing.
-
-
I am currently working on optimizing some of the more processor intensive operations in Make Pixel Art, like the fill and zoom tools. While the capabilities of HTML5 and the new canvas element are neat, there are some major headaches lurking in the details.
For example, though methods for quickly scaling canvas elements are provided by Javascript, these methods smooth the image while scaling. There is (currently) no way to turn off this smoothing. So, if I use the built in scaling methods, I turn my pixel art drawings into a blurry mess.
Thus, I have to write my own bitmap scaling routines. Bitmap scaling is not particularly complicated, but it requires a lot of calculations. Even though I am dealing with small images, the pixels add up quickly! 240x160 = 38,400 pixels to scale! And each pixel is actually 4 bytes of data, and if I am scaling the image up to 10x, I have to process 1,536,000 individual data points.
This is all well and good in Chrome, where the Javascript is super fast, and I have all the processor I can eat. But on my iPad, where I am hindered by a variety of factors, not the least of which is that Apple TURNS OFF the Javascript optimizations when running web apps outside of the main browser, I’m having trouble keeping things as responsive as I would like them to be. I have written about 6 different scaling routines at this point, none of which do a reliably good job on complex images.
Of course, the whole point of Make Pixel Art is to make simple, low res images, so this doesn’t even matter 99% of the time. But I am worried about the 1% of people out there who will draw amazing, complex drawings who will have to suffer whenever they try to zoom in and out.
The image above is an explanation of one possible solution to this problem - using some sort of matrix math to process the data, blasting the correct bits out into a vector. My friend Allison, who studies advanced theoretical math, figured out the function necessary to do this. Unfortunately, Javascript doesn’t really support matrix math natively, so I’d have to figure THAT out too.
If anyone out there in Tumblr land has any advice, please contact me!
-
Click on: I made a jQuery plugin!
Last night, I contributed a new plugin to the jQuery project. For my non-hacker readers, jQuery is a very popular javascript library that takes a lot of the suck out of javascript programming. Plugins are little pieces of code that add functionality to jQuery.
My plugin creates a fancy interface for adding and removing tags. It was inspired in great part by the interface in Tumblr’s dashboard, as well as some of Facebook’s widgets. The goal was to create an interface where a user could enter tags, and as each tag is entered, it appears as a colorful balloon. I wanted this to happen automatically - to the programmer, I wanted it to appear as a normal input with data in a straightforward and easy to process format.
It took me a while to figure out how to make this happen, and I think the solution is an interesting one, so I thought I would explain what is going on behind the scenes. I will try to be as non-technical as possible!
- The designer or developer puts a normal input field in their form with a list of existing tags. It might be something like “foo,bar,baz” - a simple list of tags separated by commas.
- When the plugin kicks off, the first thing it does is hide the normal input field. It is ugly and bad and should not be seen by anyone.
- The plugin then creates a big white box that LOOKS like an input, but is actually just a big white box.
- Then, the plugin takes that list of tags separated by commas and… separates them.
- Each tag is turned into a <span> tag of its own, and inserted into the big white box. This creates the bubble like appearance of each tag.
- After all the tags have been inserted, a real input is inserted at the end of the list. It lines up just to the right of the last tag. This input has invisible borders, so it blends into the background of the big white box. It is essentially invisible - except that you can type in it! This creates the illusion that you are typing into a larger input.
- The plugin then tells jQuery that whenever a user hits the ENTER button, or types a comma, a new tag is ready to be added to the list. The tag gets wrapped in a <span> and inserted right before the invisible input. The input is then cleared of its value, and is ready for the user to type another tag.
- In the meantime, the plugin collects all the tags that have been entered, and turns them back into a comma separated string, and stuffs that string into the original hidden input.
Neat, eh? I am really excited about this technique, and excited to have contributed something back to the jQuery community.
Liked on Tumblr
-
I stand corrected. Thank you Ben.
-
I made pixel portraits of a bunch of famous bloggers. Do you recognize your favorite internet personality?
Ben is awesome, even...
-
My boxels came in today! 1 box = 1 pixel .. NOW IT’S ON.
-
Mega Man transformation. I’ve been playing with some pixel art recently.
-
Inspired by Zac Gorman to try some pixel fan art :) First time doing any pixel art since I used Mario Paint in junior high school. Good times.
