This morning I came across this video

That is very cool! Microsoft products were always particularly hackable, and I’m happy that the Kinect is no exception. However, a hacked Kinect, capturing video in this way would not be able to single out a person from his/her background. For that, I think we’ll still need to use a green screen and chroma keying for alpha. But regardless — this means a lot for anyone looking to do some bad-ass installations. And be quick to do it first before people are the wiser! ๐Ÿ˜‰
This also answers the other half of this informational video, the “does it work?” whereas Clan Of The Grey Wolf here at least offers a very thorough “how does it work?” for those curious.

Excited yet? ๐Ÿ˜€ Good. But slow down a hair. There’s a ton of holes in the color because there’s only one infrared camera. The effect (and pitfalls) you’d have to creatively work around are the same as those that occur in camera mapping.


Or you could embrace the holey goodness! having a device that spits out realtime 3D point clouds alone might be exciting enough!


Yeah? A video where you use a kinect, and a laptop and a giant infrared lamp so you could scan whole buildings would be amazing.
Or maybe something like this could be used for more practical applications since the color stream could be face-tracked just like the Kinect does in real games and someone could put together a cheap version of Paul Debevec’s 3d video conferencing thing via reprojecting the camera view on to each viewer’s screen.

It would seem some of my favorite JS mammoths (p01, mr doob) have just finished a one-kilobyte contest called js1k.

The rules are insane.

  1. Create a fancy pancy Javascript demo
  2. Submissions may be up to 1k. (And not crash)
  3. Externals are strictly forbidden, unlike “some” contests. (Good luck minifying jQuery though!)
  4. Must work on current fx, sa, ch and o. (Let’s level the playing field)
  5. Minification and hacks allowed. (Go nuts)
  6. Bonus points if your submission fits in one tweet ๐Ÿ˜‰
  7. Last day to submit is 10 September 2010

The results are stunning.




I just took a new job at Neogence last week as a frontend developer and one of the things that was bugging me about the site was the top navigation bar for our site. It would sit in the center nice and pretty, but often times when I’m on a computer I make the window skinny and have something off on the other side of the screen. Then, if I scrolled horizontally the menu’s repeating background would terminate!


<body>
<div id="wrapper" style="margin:0 auto;">
<div style="width:100%;background:green;">
<div style="width:1000px;color:white;">Make the window really skinny, and scroll to the right. Then make the window larger again from the left.<br />See? Ewwww...</div>
</div>
<div style="width:1000px;background:orange;">fixed-width content</div>
</div>
</body>

The problem shows up on lots of web sites, and it’s been bugging the crap out of me for years. Well, ladies and gentlemen, I have the solution. Put your web site in a giant table. No OKAY geez hold on, CALM DOWN I’m not talking about a <table> tag! This is a <table>-less design scheme. Check it out…


<body style="display:table; width:100%">
<div style="background:green;">
<div style="width:1000px; color:white">See how that makes everything better? Yeah. It does. Now just break it out in some .css files and you'll be solid. Woooo!</div>
</div>
<div>
<div style="width:1000px; background:orange; margin:0 auto;">fixed-width content</div>
</div>
</body>

Weird, right? You have no idea. So, just like the fisherman that forgot to count himself, all along I’ve been ignoring that the body tag is just another block-level element like any other. In fact, it’s THE block-level element. And you’re guaranteed it will fill the width of the page because it IS the page. Right? No. You can even set the body’s width and margins as if it was your precious wrapper div.


<body style="width:200px; margin:0 auto; background:orange;">
<p>Hello hello Mr. T. Have you ever looked at me? If you had I'm sure I'd be thrown. For I'm the fool. You pity me, I've known.<p>
</body>

Get it? But without a width, as a table, the body retracts to the maximum width of its contents. That’s why the width:100% is there. But it acts different than if it was a wrapper because the edges of a wrapper aren’t bound to the edges of the actual browser’s rendering space. Body is. So BOO-YA.


UPDATE:
Just today at work I was trying to fix the sticky footer at the bottom of the page. Well, this is one of the most complicated problems on the web, and I’m really surprised that the fix came so easy. Really, hardly anything has changed except that I applied height:100% to html and body. Yep. That’s all you have to do! ๐Ÿ˜€ So am I famous yet?

<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0}
html,body{height:100%}
body{width:100%; height:100%; display:table; background:black;}
#footer{height:100px; background-color:#210598; color:white; display:table-row}
</style>
</head>
<body>
<div style="height:300px; background:yellow; display:inline-block; padding:10px;">Content</div>
<div id="footer">
<p>hi i'm the footer</p>
</div>
</body>
</html>

Youre’ welcome to see a live demonstration, though the code renders perfectly in Chrome locally, and for some reason not online. I’ve sent Google a bug report about that. Chrome has a really stubborn cache!

There’s something just horrible about the nature of Catmul-Clark subdivision surfaces. 3D animators for the past decade lost sight of their modeling process because of quads, and the way they deform and pinch when subdivided. Throughout my time at UNCA I couldn’t help but wonder if there was an appealing way to break free, tap in to my love for low-polygon modeling of the Playstation and Nintendo 64 era, throw some high quality lights on it and call it a day. A fair amount of artists in 2010 beat me to the punch. Instead of being grumpy about that fact, I’m rather pleased to know that there’s others out there that would rather jump straight in to designing their models, characters, and getting in to the motion, the story, and the beautiful colours and camera angles than wasting countless hours worrying about whether or not there’s a single triangle in their mesh.

I saw a car commercial just recently that had adopted a style very similar to Pivot involving a squirrel in a hatchback. That’s when I knew the trend would take off. Make sure you’re taking notes: car commercials buy the best trends — it’s a fact of advertising capital.

The best effect of this technique (other than saving lots of time that’s better spent on making a more complex animation) is that it’s finally convincing artists to adopt non-photo-realistic styles! Computers, after all, are a tool. Like any tool, it is best when used to exploit its strengths, and I’ve always felt that real objects did the best job of depicting real objects, and computers did the best job of depicting things that fall in to a wonderfully huge “other.”

This guy is awesome. JQuery really took a hold of me this year. There are a lot of good resources out there — namely Stack Overflow (which I usually end up hitting via Google), and even the JQuery reference itself (kind of rare for a web API *cough* W3C *cough)

But this guy! Oh my gosh… THIS GUY IS AWESOME. He’ll make you love code. Just… try one screencast and you’ll melt, and feel the power travelling up through your fingertips in to your imagination. Seriously.

JQuery For Designers

(I also couldn’t help but notice that he took special attention to make sure that his site is fully browsable on Flash-hating-devices. And no, I’m not going to link you to what I mean if you don’t already know. It’s tiring.)


There’s lots of interesting things that will be showing at Siggraph this year, the annual conference for computer graphics research. Even if many of these technologies might seem far away from being practical, one thing I like to keep in mind is that a majority of the research is funded by universities and thus the formulas are made available for open source software which occasionally shows up in commercial and open source software packages like Blender, Photoshop, or Renderman about a year or two later.

Check out the list of presentations and the videos below.


technical paper

Some of my all time computer graphics research heroes include Paul Debevec, Takeo Igarashi, and Mark Carlson.

Crowdsourcing is defined on Wikipedia as

a neologistic compound of “crowd” and “outsourcing” for the act of outsourcing tasks, traditionally performed by an employee or contractor to a large group of people or community (a crowd), through an open call.

Recently, I’ve been addicted to things that implement the use of crowdsourced material. It seems to work for just about anything. Though, I have to say that with anything that is crowdsourced, structure and continuity is seemingly thrown out the window.

Crowdsourse project come in two flavors which I’ll call inclusive and exclusive. I think between Web 1.0 and 2.0, the sort of secretive nature of the Internet leaned more to the exclusive side. “We Feel Fine” is a perfect example of a site that powerfully discovers peoples’ secrets without their absolute consent.

We Feel Fine takes sentences from blogs that include the words 'i feel' and silently tracks the blogosphere's collective mood.

But alternatively, I personally feel the tides changing. Thanks to social networking, everyone now wants to be in the know and thereby wants to play more active rolls. The old proverb

Too many cooks, ruins the soup

is a concept that has grown old and tired. Embracing the chaos of letting everyone participate results in strange, but also wonderful results. Take for example my favorite card game, 1000 Blank White Cards.

1000 Blank White Cards

1000 Blank White Cards: a card game where everyone is allowed to change the rules

The same concept applies to this whimsical online game called Playpen. It’s based on wiki technology, which I think is brilliant.

PlanPen is an open wiki point and click adventure game


Also see the Best Of PlayPen blog.

The project that really put me over the top to create my own crowdsource magic was Star Wars: Uncut!

Seeing so much energy spawnedg my own project, Endless Lair which is currently slowly taking submissions from UNCA Multimedia rockstars, and you! It’ll be worth making another blog post about when it’s more developed.

Last but not least, Apples Versus Oranges was the more successful of my two recent crowdsourced projects with the bold aim to determine the best thing in the world!

Apples Versus Oranges

Apples Versus Oranges continually asks you to duel everything against everything

I feel allured to projects like these as a great way to beat consumerism. If you don’t like it, you just fix it yourself. A system that constantly evolves, branches, and conforms to the ebbs and ways of the people who use it. Now go play!

1. the_vuvuzela is a twitter stream that covers each game’s level of annoying horn buzzing. People on the internet are clever.

2. Found via iso50, this video shows how Adidas makes world cup footballs!

I’m really excited to share this one. It’s called Sculptris. It’s a 3 meg application that I think wins over ZBrush in its simplicity, elegance, and moreover in its maths which take care of your mesh topology through a process called adaptive subdivision.

..and the guy who came up with this stuff, DrPetters, is totally crazy! You can’t even imagine, but I can say that Sculptris was something he seemed to consider a personal project he was just fooling around with, and the rest of his work has a similar feel that makes me go “You do this for fun!? Holy $#*%!”

Also, considering the nature of his bizarre software, it does not surprise me that Eskil Steenberg is one of the few people following him on Twitter. More on him later…

Photoshop: The order of the layer effects donโ€™t match the true compositing order, BradEllis has provided us with a handy diagram explaining the confusion. Why canโ€™t we reorder the compositing order? Why canโ€™t we stack effects? Why isnโ€™t Gaussian Blur a layer effect considering its the most used filter ever and Smart Objects is a clunky hacky solution.

I couldn’t have said it better. Adobe UI Gripes is a blog all about epic Adobe failures, and just started making all posts about CS5. It’s the little things that count…

Adobe put on a real show this morning. Where last year’s press conference was a live stream of a guy in a real board room, Adobe this time around planned a glimmering presentation that seemed to be pre-edited and polished over many times. And as it should be. So the first thing that struck me silver was the high grade of streaming video quality that Adobe served up. While the presentation continued there were a few times that my internet connection started to waver. Instead of stopping the stream all together, the presentation dynamically detoured to a lower bandwidth while the high resolution version’s cache caught up. I’m not sure if that was a feature that flash video is going to be implementing as part of the suite, but it’s very possible. After all there were tons of big features added in this new version.

(i’m having a really busy day at work today, but I’m planning on writing a lot more on this tonight or tomorrow. normally i don’t publish drafts, but I didn’t want you thinking i was just slacking off. ๐Ÿ˜› stay tuned!)

Obviously there’s too much to see, and to make a big rant post that’s all-inclusive would be redundant. Really, you should hop over to CS5.org and just go see for yourself. It’s all good.

Thanks Adobe. Really. CS4 was the bomb, and CS5 looks even more powerful. CS4 also had a bunch of stupid problems that Adobe seemed perpetually bent on ignoring for the past decade (I could rant for hours on this). While there are some really crazy amazing features on the way like a super-smart content re-shuffling tool for photoshop, there’s also a slew of useless processor-hogs on the way too like 3D-physics powered brush bristle simulation. Flash will get iPhone app publishing to answer Apple’s idiotic and rigid stance to not support flash within Safari, Premiere (and After Effects?) will be using more GPU power to make video previewing even more smooth — a valuable feature that Final Cut lacks entirely.

Anyway, if you aren’t signed up, don’t bother. To get an Adobe account, you pretty much have to sell your soul away. I’ve set up a disposable account for everyone to piggyback on.

  • tounousi@guerrillamailblock.com
  • i<3mmac

I just hope Adobe realizes that they’ve been digging their own grave by trying to lock people in. The way of the graphical future is technological convergence — despite the opinions expressed in a previous blog post. If their divergent bullshit keeps up, someone’s going to get angry enough to start another company that doesn’t stick its claws in you.


this isn't cool

this isn't cool

Not to mention that their software is getting increasingly bloated with things that have nothings to do with each applications’ functionalities.

this isn't cool either

The best next move would be to start fusing stuff together. Everyone keeps waiting for the day when After Effects, Premiere, and Audition really should be just one thing. Photoshop, and Fireworks, and Lightroom should be one thing. Illustrator, Acrobat, and InDesign should be one thing. Flash, Flex, Air, Director, and Papervision should be one thing. Essentially: a solution for screen images, a solution for video, a solution for print, and a solution for web applications. That’s just my opinion. We’ll see how well Adobe serves up or flops.

Events Calendar

Student Show 2010
April 2nd

Pre-Show-show
April 1st

Up All Nights
Sunday, Feb 28
Friday, April 30

Super Saturday
March 6th - March 27th