I was contracted to finish a work that had been started but never completed, a floor and wall tiles in-context visualizer web app. You have a photo, and you can choose among the client’s catalog of tiles to place them in the photo’s walls and floors to see how they would look in a real setting. Although this work was almost finished, the source code had disappeared. Taking this as an opportunity, I revised the interaction design, ending up with a more focused and approachable app than what was originally conceived. I was originally only going to iron out the remaining programming wrinkles, but ended up doing the interaction design as well as a full code-up.
The biggest design challenge was making the app casually usable, since such a utility would see little action if it is not instantly understood and provides results in seconds. The number of choices is quite large, so I had to make these choices seem fewer. I put the user straight into the action by simply randomly choosing a photo for them to work on, with the ability to swap it. The flow of use goes from just selecting a surface to then one or two tiles for it. The tiles are filtered contextually according to the environment and the surface selected, so, for instance, for a bath wall there will only appear tiles that are appropriate to put on a bath’s wall. These tiles are arranged chromatically in a grid, and are all simultaneously visible in their correct relative dimensions, to make it quick to compare and find the desired one without having the need to specify any filtering criteria; however, if needed, several filters are available. When the user’s happy with what they did, they can take that with them in the form of a PDF with the image and information of the selected tiles, or they can share a link with friends (which takes them to the same utility, with the tiles pre-filled).
Technically challenging was figuring out a way to display the tiles in correct perspective according to the (flat) photos. Turned out that the easiest was using the same geometric technique that visual artists use, involving two vanishing points plus the horizon line for a flat surface, together with algorithms for finding segment intersections. I’ve obviously little idea of 3D coding, so this was all new to me, but I got good results! I also experimented with two interesting programming patterns that were new for me, reactive programming and promises, the combination of which made it easier working with the asynchronous loading of images and other data.
Although I am rather happy with my work on the interaction design end, the result does sadly have many shortcomings… […]
I just came back from Japan, after spending six months improving my Japanese there at a language school and generally enjoying being in such a culturally interesting environment. I made tons of friends, Japanese and from countless other countries; it was extremely stimulating.
The place I lived at was a small city called Ueda, located in a valley in the mountainous Nagano prefecture. If you asked someone from one of the bigger cities in Japan, they’d say where I lived was what they call inaka, the countryside. But would you ask the people who had lived there their whole lives, or in one of the surrounding, smaller cities and towns, they would say no, that’s not inaka. Of course, me coming from a pretty large city, the place was small and cozy; refreshingly so. I started using Vine —the short video recording app— during this trip, so here are some of the best ‘moving photos’ I captured from those places.
So yesterday it was the opening of this year’s Design Biennale here in Santiago, which featured that one project I worked on a year and a half ago with Sebastián Skoknic. He was invited to participate, and he chose that one to display. Despite having to endure an insufferable parade of politicians and academic officials speaking nonsensical, trivial formalisms for what must have been at least an hour and a half, the event itself was super high on polish, and featured a great deal of impressive projects from a variety of forms of design. We had the spot number 78. […]
What happens when you combine sports and words? That’s right, the unholy portmanteau of this post’s title. Conceived as a last minute entry into the TIGSource Sports competition, Spwords is a player-versus-computer match that puts your (English) vocabulary, spelling, and typing speed to the test.
Play Spwords (web)
Maybe you didn’t understand the commentator’s quick explanation of the rules. That’s fine, that’s what this paragraph is for. You and computer take turns typing words during rounds, and each round has an assigned letter. Each word played must start with the round’s letter. Also, a word must contain the last played word’s last letter for it to count. In addition to all this, you have a time limit, and words may never be repeated. Win three rounds to win the match. Have a go!
This game was possible thanks to Keith Vertanen’s word lists.
Here’s an HTML5 drawing toy I’ve been working on for a few weeks. It’s been designed to work on touch devices in addition to the plebian mouse, although I only really have my iPad to try it on, so I’m not sure how it will work everywhere else. You can add it to the home screen on any iOS apparatus, and it’ll work more or less like a regular app, offline and all.
Play Flower pattern (web, touch devices)
For your phone or tablet, and for your convenience, I also set up a shorter URL: http://agj.cl/ip/fp . Caveat: based on one report, it doesn’t seem to work properly on older versions of iOS. […]
Prompted by mcc, I’ve compiled a list of whatever weak narrative impetus my games have. I used games as listed in my aggregate, and removed those that are comprised of only surface, i.e. toys, or that are non-interactive. […]
That there is the little sign that was put next to a computer with two of my games, Intervalo lúcido del individuo inconsciente, and Heart, at an exhibition called Game On! in Buenos Aires. Also, here’s a picture of an anonymous person using a personal computer. Both photos thanks to my official Buenos Aires correspondent and fellow game maker, Tembac.
I’m pretty happy that this happened, since it’s the first time my games have been featured in a non-virtual space, although putting them next to other frankly much more exciting and spectacular games, like Tembac’s Consecuencias and Daniel Benmergui’s Storyteller, makes me a bit self-conscious of the fact. Especially since I’m no longer very fond of Heart. Also, I’m sad that the Twitter-sourced bio I submitted wasn’t included there, because it’s awesome: […]
Over at Glorious Trainwrecks, a spambot started an event, and thus we had to comply and make stuff. I didn’t really make a game; it’s a silly visualization of Noyb’s readings of (other) spambot postings.
Read Spoems (web)
The audio may or may not sync with the text for you, depending on your configuration. Try reloading if it doesn’t, and if it still won’t, then I think you’re out of luck.
A shoutout to Kirk Israel for his useful lowLag.js.
This was long overdue: a browser for all of my released games, including the terrible ones, and covering all the range up to the mediocre. I used a binary system for highlighting the ones I consider to be less unremarkable; they use up double the space of the others. There’s also a handy tag there called gamey that marks the games that are more traditional in scope, so you don’t have to bitch to me about how my games are not really games.
I have made this blog look different from how it looked yesterday. It is also used somewhat different. I pressed many keys during several days to make this happen.
The design is a relic from 2010 which I never finished implementing, because back then I didn’t know much PHP. Now I decided to finish it, for the large part eschewing WordPress’s redundant, confusing, ill-documented and inflexible functions, which made me give up that time, and rolling my own code. Also for the first time I’ve tasted what it’s like not pulling so many hairs in the process of getting letters and boxes where you want them to appear on the screen, thanks to Less, an alternative to plain CSS.
Below is a picture of how this blog no longer looks. And here is the whole, long first page.