QR Code hacks: modifying and altering for artistic fun

QR Codes are a quick way to get information with a camera. (Think modern evolution of a UPC Bar Code). Smart phones will scan them for you to quickly get information into your phone, such as a URL to browse, a business card, etc.

I was inspired by the BBC QR Code that intentionally distorts the image to insert the letters "BBC" in the middle. QR Codes have redundant information to offer error correction, and I am amused at the different ways you can abuse this.

First, this is what a QR Code for "http://beautifulpixels.blogspot.com/" looks like unmodified:

"Pure" QR Code:

Now, the experiments:

Simple pixelated distortion in the center (similar to BBC code):

Any image could have just been overlaid, just like plopping a sticker in the middle, but doing it in the pixel grid feels nice.

The idea I like most is using a collage of images that form the QR Code. Where the collage gets the pattern right, there's no need for error correction. But there's slack for the collage to be off a bit. It's very tedious to do, so I only have this partial version, but I'm certain with patience a fully collaged version could be made:

Collage:

The collage might be automated too. Do an image search and then paste in images "fit" to the QR Code target.

There are several ways to play with color, as the scanners will just care about the luminance.

Pixel grid colorization:

Gradient:

High resolution image colorization:

There are several ways to play with the QR Code as conceptually just "dots".

Dots:

Dots merging:

Dots as images:

And on we go, a few more ideas: 

Rounded corners:

Perspective:

I wasn't able to change the perspective to something as extreme as I thought, this was about as far as I could get it.

I also didn't have the patience to create several "natural media" QR Codes. But I thought sand art, pebbles, leaves, etc, done with real world materials would be great. Here's a synthetic Go board (the gaps maintain a valid game state, ;):

Go Board:

And I should show failures too. I had high hopes for a pen sketch, but it doesn't scan. :( I'm convinced it could work, though I think a more even contrast would need to be used.

Ink Sketch:

Except for the last, all of these scanned correctly for me using the ZXing Barcode Scanner 3.3 on my Android phone. Collage clip art included elements from flicker users greekadman, bombardier. 

[Edit:] A Link from the comments that shows a good 'natural media' example:

http://www.youtube.com/watch?v=M5lAT3gVzFc

Games for Infants

Games for infants. A noble cause. But they're tricky customers. And in the end, so easy to please.

Once upon a time I thought, "I shall make a game for infants, it shall be easy and quick." So, I thought to myself, what do infants like to do? Whap their grasping tentacles at things. Yes, such as keyboards. And they like it when things do things, but they're not very sophisticated.. so simple reactions should be just fine.

So, I sat down and made a simple program to change the color on the screen when keys were pressed.

Fail.

First, infants seem to like all buttons, especially the windows key, Alt key, etc. All sorts of ways to make an application loose focus. Second, they like to mash buttons. To grind them down. As if pinning the machine and asserting, "I AM YOUR MASTER!"

So, let's see.. easy things first. Holding buttons down can change the color of the screen too. How about a key press causes a flash in green that fades away quickly, and the intensity of blue ramps up the longer you hold keys. Ok, working well, let's try it out. Ah, it works, but again, infant seems rather determined to exit the app, launch new applications, all sorts of not intended things.

Most of a Saturday later, I've learned about windows hooks. How thoughtful of Microsoft to give me a way to catch and handle the key presses before Windows interprets them. I'd like to do this from C# and XNA, so that was a bit of searching and tinkering, but Bnoerj.Winshoked seems to work. Yeah, that works fairly well, gimme your kid again, lemme try.

Fail.

Yup, infants are dutiful testers, seems to reliably mess things up. How much time do I really want to spend on this? Let's try searching the Internet again... nope, nothing really good out there. Hmm, except...

Ah-HA!

Windows log-in screen should do nicely. If anything in windows can stand up to button mashing it'll be the log-in screen. Whap keys, see dots show up, hear beeping noises as the length limit is hit, that should entertain the kiddo. Give that a shot.

Blue screen.

Really? Had to have been a fluke. Try again. See, it works, happy kid. Blue screen.

Hmm.

Well, I've learned something. Why build a game when an infant can be entertained with just the log-in screen. And, how disconcerting is it that sustained mashing of keyboard keys can cause a blue screen?

HTML Canvas Lines Toy

Karl Hillesland and I toyed around with the Canvas HTML/Javascript API this weekend. We remade an old program I noodled around with in highschool. The heart of it is just drawing lines between curves made with trig functions (the "offset" constants are continuously changing every frame via their own sin waves):

 var x1 = Math.sin(2*Math.PI*(t+offsetInner1)*periods1x+offsetOuter1);
 var y1 = Math.cos(2*Math.PI*(t+offsetInner2)*periods1y+offsetOuter2);
 var x2 = Math.sin(2*Math.PI*(t+offsetInner3)*periods2x+offsetOuter3);
 var y2 = Math.cos(2*Math.PI*(t+offsetInner4)*periods2y+offsetOuter4);

 // line from (x1,y1) to (x2,y2)
If you're using a browser that supports Canvas, you'll see it above. Internet Explorer doesn't support it as I'm writing this - so use Chrome or Firefox or ... wait for Microsoft to catch up.

It's not exactly "done", but who knows if we'll clean it up. ;) If you'd like to experiment with it, here's a version with debug mode sliders you can drag around:

lines-07.html

• Changing the periods (last 4 options) results in very different effects.
• Use Chrome for slider input support - sliders are nice. Firefox just displays input boxes ;(.
• Resize your browser's width for the desired aspect ratio -- that page auto-letterboxes.

For sad people with no capable browser, here's a still image:

GDC 2010: Conference Report

Game Developers Conference 2010

Real-world UV Texture Mapping of a Car. Found on the side of a building just outside GDC.

Themes

• Social Games
• High growth area, many publishers and developers looking to take advantage of social games. Investors looking to... invest. Designers considering how to make their games more social.
  Note: Social had a spectrum of meaning to people, from viral marketing games with little multiplayer, to games played with friends, or random strangers. 
• Indie Games
• Indie games have established a significant movement now. They are becoming more influential, with significant number of sessions devoted to them, and references to them from non-indie.
• Digital Distribution
• Major impact to publisher/developer relationships; enabling indie movement; changing design and productization strategies. Also requiring different marketing strategies. Also tied to social games and viral games.
• Design, Psychology, Achievements
• Achievements discussed often (disliked). Common theme that designers need to understand psychology well to build successful games.
• Mobile / Android
• Google distributed phones with 12 month service - Lots of buzz about this.
• Unity announced Android support.
• iPhone discussed in many sessions, but Apple wasn't courting developers.
• Little to no mention of Microsoft.
• Cloud based Games
• OnLive, Gaikai, and OToy are products announced to enter cloud serving of games (and apps) via compressed video to clients. They were news in 2009, in 2010 we will see some of these services ship (OnLive has a June 17 date).
• Uncharted 2 drake's fortune (ps3 game)
• Several sessions from Naughty Dog, well attended, represented the quality bar developers are after.
• Gamification
• Companies are seeking to add “gameplay” to their products to succeed with the increasing adoption of games in culture. E.g. adding game aspects to taxes, health-care, or training.

Android
Handing out hundreds of phones got Google attention. Developers felt that Android needs better games, that they’re a “killer-app”, and that iPhone’s successf is tightly linked with the app market and games.



iPhone sessions were well attended. Unity is a middleware engine offering iPhone support and is apparently quite successful by counting licenses sold. Unreal has been ported to iPhone.

Microsoft win 7 phones will run XNA games and silverlight, popular technologies among “small” game developers.


Social & Facebook
Facebook and Zynga received much attention.


Facebook exposes the social graph to app developers for fun and profit -- to great commercial success for some of those developers. Much of this success is tied to the spamming / viral marketing done by these games. And most seemed to have you play with strangers, not friends. Facebook has changed the permissions for apps, which will reduce the previous spam methods, interesting to see how this affects games.



Asian markets have years of experience in monetizing virtual goods and building social games. These methods are of high interest now in western games. 2009 Asian market had $7 Billion in virtual goods, compared to ~ $500 Million of social games in western markets just starting to move towards virtual goods or social monitization.

Notes From the Expo Floor

• Human Hamster Ball demoed, allowing Virtual Reality with walking in any direction. Single user enters large plastic ball through access hatch. Ball is on wheels, and tracks movement. User wears VR headset. Targeting instalation at entertainment venues, malls, etc.
• Mono will ship full compatibility with C# 4.0 when Microsoft does
• Sony’s WiiMote competitor, “Move”. A combination of accelerometers, gyroscopes, and optical tracking makes this “WiiMote with a light bulb on the end” very accurate for location tracking. It’s still very poor for pointing at the screen (worse than WiiMote?), and rather laggy, maybe .1 second of lag or more. The need to be in the EyeToy web-camera view frustum will also limit the use of this device.
• There was a great eye tracker that worked from 6 feet away, just sit in a chair and it finds you.

Presentations

• Indies and Publishers: Fixing a System That Never Worked
• Ron Carmel (2D Boy) discussed 2 main points: The classic model of publishers doesn't seem relevant with digital distribution, and the remaining need is just funding. Cue introducing theIndie Fund. There weren’t any new details on that. There were some tidbits of World of Goo costing $120,000 and Braid $180,000.

• Case Studies: AI in Recent Games
• My takeaway was that the future of AI is in handling specialized cases without requiring explicit coding to set them up. That calls for generative AI instead of just expert systems. With online games pouring in huge amounts of human game play data, there's good opportunity for training AI.
• The State of Social Gaming: Industry Overview and Update
• More (mostly for a fee) info at http://insidenetwork.com
• Asia had $7 Billion in virtual goods business in 2009. In the West social games are growing fast, but still only $.5 Billion last year.
• Zynga is over 700 employees now, and is overtaking Facebook in headcount! (Oh, and $200 Million for them last year)
• Facebook will be introducing their own currency "Facebook Credits", but with a 30% tax.
• Bringing UE3 to Apple's iPhone Platform
• They moved as much of the build to Windows as possible, running commands on the mac over PuTTY.
• Executables still in “teens” of megabytes.
• Materials are rendered offline and only a small set of shaders used at runtime. This is due to required compiling of shaders at runtime, and memory constraints making multi-texture materials too costly.
• Advanced Visual Effects ... [Full day session]
• Order Independent Transparency (AMD)
• The framebuffer is simply a list of linked-list targets per pixel, and another buffer is used to store many samples. There is a demo released 2009 that shows this. Multisampling of course is an issue, and it’s clearly an expensive effect and requires guessing how many transparent fragments you’ll need to store.
• [Indirect lighting with blockers]
• Linked lists used again, sourcing from a 3D grid of the entire scene to look up blockers of indirect light used with reflective shadow mapping.
• V-Con 2010: David Perry Keynote
• Dave convinced me that the critical feature from cloud streaming services such as Gaikai, OnLive, and O-Toy will be frictionless entry. How many clicks does it take to get someone a demo of your game? Gaikai will do it in 1. Just 1 click and you're in the demo.
• Gaikai is targeting 300 data centers, he claims OnLive 5, and OToy 2
• WOW takes 30+ clicks to enter into gameplay. ;) Multiple EULAs.
• Designing for Performance, Scalability & Reliability: StarCraft II's Approach
• Starcraft scalability and perf discussed how they felt custom built profiling tools were necessary. They did have nice features:
• Historical frame perf data
• Single button press to sent data to engineers from QA
• Butterfly view for CPU time & Memory too
• Post game results with worst frames sorted out and worst “moments” spanning multiple frames.
• Data is a Four Letter Word [Brutal Legend]
• They built directed graphs for data dependencies offline. These were processed into indices that could easily locate the needed assets. They were also used to build disk layout information to reduce seek times.
• Physics Meets Animation : Character Stunts in Just Cause 2
• They have highly coupled physics, character movement from animation and gameplay code, and IK. The results looked good, but also very delicate to work with. Some tidbits:
• Start with gameplay code driven movement of character
• Use physical simulation data to drive blending of animation tracks (e.g. rotational acceleration of car influences “hang on leaning left” blend weight)
• Use ragdolls to add physicality to animations
• Use IK to correct everything that went wrong. ;)
• GDC Microtalks 2010
• Many speakers, mostly touching on design elements. A good view on GDCVault if you’d like a bit of inspiration.
• Random data: TV Ads have gone from 13% to 36% of programming time over the last 60 years.
• Nuevo Sessions
• Several indie developers discussing their games
• Hazard - Artsie First Person (non)shooter. Heavily abstract and metaphor puzzle based
• Interesting to see on GDCVault if you’re interested in indie games.
• The Implementation of Rewind in Braid
• Encoding similar to video:
• initial state
• key frames
• delta frames
• Animation and Player Control in Uncharted: ...
• Strong use of blending and layering to achieve desired effects, but primarily to reduce memory.
• 3000 to 4000 animations for main character in a given level.
• 20%-40% level data is animation, 15-30MB
• 10Hz sampled animation data (except where artist overridden). Engine runs at 30FPS.
• Additive animation layers, partial animation sets, pose based root animations.
• E.g. one idle animation that is additively blended onto simple standing poses, those poses can easily be changed to have new idle effects.
• Variation animation 10 times as long as most run cycles adds variation to different runs etc and can be reused to give lots of variation.
• Mixture of gameplay code driven movement and animation data movement, IK.
• Metaphysics of Game Design - Will Wright
• (unannounced presentation by Will Wright)
• Will packed a dense and sprawling presentation into the hour. It’s not really summizable into a few points.
• You’re best to seek video on GDCVault - it’s a treat.

GDC 2010 - What to attend?

Time for Game Developers Conference! I'm attending sessions, which I haven't done for years when working the show. If you have any session suggestions, please comment! Here are the GDC sessions that look interesting to me so far.

I'll probably post notes from GDC to Scattered Pixels, we'll see if I have time for a post conference report here... ;)

Working on Chrome OS at Google

Many have been curious what I'll be working on at Google, including myself for a while. Google is interesting in that you are not allocated to a team until just before your first day. You accept the job because you're a good fit for Google in general, not just one team.

I'm going to work on Chrome OS. There's a lot to do for the initial launch, but long term my goal is to help make it a great platform for rich graphical apps and games too.

Whoa, you say, I thought you worked on high performance games? Yes, high performance 3D games will be running inside browsers, with security and performance delivered via Native Client.

Radial 10 bit Gray code - Tutorial

How I made the Radial 10 bit Gray code image procedurally in Photoshop:

1. Create a 10 bit gray code image (width 10, height 1024). I did this by hand, it's a little tedious. But there is a method: you duplicate the image vertically and then draw a line from the mid points of each tree.
   Then, expand it to a square image:
   
2. Transform it radially (Filter, Distort, Polar Coordinates (need to first rotate the image 90 degrees)):
3. 
4. Create some Gaussian blurs of the image, with a few similar large blurs:
   
5. Set the blend mode to Difference between 2 of the blur layers:
   
6. Add adjustment layers to remap the range, add a gradient, shift the hue, etc:
   
   
7. Add another blur with difference blend mode, and we're done!
   
   
   

I worked in 16 bit mode since there was banding when differencing the similar Gaussian blurs.