-
I just drew the entire team here at XOXCO for the Make Pixel Art “about” popup.
-
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!
-
More iPhone pixel wallpaper! This pattern is made up of the name of my company - XOXCO - spelled out in the barest minimum number of pixels, then arranged into undulating waves of pixelized color. Thanks to BJ for the inspiration.
-
This afternoon, I started working on a tutorial and help system for Make Pixel Art. I am pretty excited about the direction it is headed!
-
Today was the first day I really officially worked on Make Pixel Art AT WORK. And as a result, I got a lot of work done!
One big improvement I made today was to the “sticker book” feature that lets you paste bits and pieces of old drawings into new drawings. Previously, I think I was the only person who understood how to make it work because you had to press multiple times on the same button while also dragging the sticker around. Now, thanks to help and advice from XOXCO teammate Sebastian, the stickers can be dragged and dropped around the drawing and added to permanently with a tap, no buttons needed! They are just like real stickers now!!
-
XOXCO Tools for Hackers
There are new versions of XOXCO’s popular developer tools available today!
PeoplePods 0.9 is out, featuring a brand new HTML5 theme, improved JSON api, expanded plugin capabilities, and an improved install and configuration process. Download PeoplePods to create your own social application or community site. It takes only minutes to get up and running with a fully functional social network, and adding custom functionality and features is as easy as creating a few PHP files. Download the latest version from PeoplePods.net, or from our brand new GitHub repository. You can take a look at all of the features that that PeoplePods offers at the demo site.
jQuery Tags Input 1.2.3 is out as well, featuring a few handy new options, as well as a fix for the most reported bug (pertaining to duplicate tags being added when using the autocomplete option). Many thanks to our new friends on GitHub, devbrothers and erlend for their contributions. Download the latest version from GitHub.
-
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.
-
Click on: Announcing SendTab
In addition to kicking ass for our clients, we’ve been hard at work for the last couple of weeks on a new tool that we are launching today. I am very proud of this launch because this is the first thing XOXCO has done with our new intern Damien, and in our new office space.
Of course, we’re getting kicked out of our new office space today too, but that’s another story.
The new product is called SendTab. It’s for people like us who have a dedicated entertainment computer attached to their TV. In short, it lets you beam links from your laptop or phone or ipad to the big screen. No more searching for the wireless keyboard, no more screen sharing. Just tap SendTab and BOOM, it’s there.
Learn more and download SendTab here, or read our official announcement here, or check out Katie’s awesome photo of me using SendTab to send Sendtab from my ipad to my TV.
-
I just launched some pretty new stuff for Helsinki Design Lab: Dossiers. These are flexible, version-able collections of information about specific questions that HDL has posed. As data is added, new “crystalizations” of the collection are published. You can then scroll back and forth between versions to see how the project has evolved.
Behind the scenes, these are powered by a crazy drag-and-drop layout tool that allows Bryan to build these beasts. I am going to shoot a screencast this week, because I am super duper proud of my work on it.
It’s going to be really interesting to watch these dossiers grow and evolve as the work on these projects continues. I wish I had someone to track information about all the stuff I do so I could watch it evolve into a LEGO rainbow of data!
- Next »
Liked on Tumblr
-
Here’s a few pictures from the test build for the app. Just messin around with it.
-
“I am Adam. Prince of Eternia”
One frame closer…
-
Heres 4 more backgrounds I made for PixelPix. I guess I’ll explain what it is since I didn’t in my last post. It’s a camera application that lets...
-
The Morning GIF: Poor Will Riker, Forever Number 2. http://awe.sm/5f6Mr
-
I drew a frogge
