A few weeks ago I came across a framework called popcorn.js which, as its name certainly does not imply, allows the user to create timed interactions within a video.

Say some people in a video are snapping their fingers (those crazy kids); by using one of the multiple plugins of the library, it’s possible to get a kid in another completely separate part of the page to snap his fingers AT THE SAME TIME.

They say it’s an HTML5 framework that will find use in the hands of filmmakers, web developers or anyone who wishes to create time-based interaction with media.

The plugins include interaction with Youtube, Vimeo, Twitter, GoogleMap, Wikipedia, LinkedIn, Timeline and many more.

In the example below (which is inspired by Dan Harper) I merely used Google maps, Footnote (to write some content to the page), tag this person (to create a tag) and also some truly amazing images and subtitles.

WATCH OUR VIDEO HERE!!

As you can (maybe) see, it’s easy to use and super, duper fun as well.

One possible example of usage could be for a ‘How To’ video; adding interactive information, popping at key moments on the page, would give an extra level of content to the vid.

The framework is part of Mozilla’s Popcorn Project. For more details check out: http://mozillapopcorn.org/.

What are you waiting for? Try it already!!!

Back in the good ol days

They didn’t want it! Well, they did, but they didn’t do anything with it for ages, so we stole it back (AHAA). Based on their original idea, we have now created…www.lunchometer.co.uk

Let me tell you a little bit about it…

Everybody likes lunch, but it’s a minefield out there. What’s needed is an easy method, preferably built in flash and colourised in earthy tones, for rating and sharing your favourite lunch spots. Lo and behold, from the fingers of tech emeritus flash wizard Adam Vernon flew graphs of spellbinding beauty…

It’s just a bit of fun, but we think it’s a nice way to do a little bit of office bonding, maybe give the new kid/senior C# developer advice on where to eat, and embed a little something cool on your blog without even breaking a sweat.

All you need to do is go to the Lunchometer creation-o-matic, specify a name and your area and start entering in your haunts! If you like, you can then copy the embed code and paste it anywhere you enjoy pasting HTML.

Here is the Thought Den Creative Director/senior hairstyle guru Ben Templeton’s one about lovely Stokes Croft:

As you can see, Biblos came out on top, mainly due to their bad boy portions, extreme tastiness and proximity to the office, with the French Patisserie coming in a close second.

A few of our good friends have had a pop as well:

Scott at Play Nicely clearly loving the work of slightly-out-the-way, Edward Lear themed Runcible Spoon.

Dave Tidman over at Kerve in Bath, collaborators on projects for JD and Soutern Comfort, obviously feeling the Nando’s portion love!

Whereas Hannah Flynn from Tate, for whom we made this lovely game, gives you a little rundown of what you can get around their neck of Millbank, LDN.

You may have also noticed the little ‘settings’ fork and spanner in the top right. Click on it. Go on! You can use these functions to discount certain ratings categories (if you don’t care about proximity, for example) and see how this effects the rankings. You can also change the graph to a more horizontal alignment, turn off the auto sorting or even make that Lunchometer full screen! MADNESS. Feeling hungry? Create your own Lunchometer right here!

It’s called MongoDB (short for “huMONGOus”).

Did you know that the databases which most companies rely on today were designed to be stored and accessed on computers with only dinky sized memories? At around 4Kbits, these beasts had less power than your watch and were about the size of your mate’s car (or the other way round for you automotive-sans-chronometer types).

With MongoDB, they addressed what was wrong with the current system of database design and improved it, utilising a modern company’s access to computing power. Eg, HUGE Memory and multiple servers in MANY physical locations

Here’s the benefits,

Easy scalability
“Automatic sharding”, makes it easy to add another server your system. Just install and type this…

> db.runCommand( { addshard : “<serverhostname>[:<port>]” } );
{“ok” : 1 , “added” : …}

Rich query language
See how easy it is to write.

to write

db.scores.save({a: 99});

to query

db.scores.find();

High performance
No joins and embedding makes reads and writes fast

High availability
Replicated servers with automatic master failover. So if the main server blows up, pow, another one is “elected” to take over and the service continues

Training Day

We were lucky enough to get tickets to a specialist one-day training conference in shiny London to learn more about its progress. While learning, we heard from The Guardian (a national newspaper), the National Archives (the UK Government archive) and mngr.it (a tech start-up), all who are currently using mongoDb in their applications for both sideline and critical systems. Interestingly, two of them moved to mongoDb because their normal supplier, Oracle, was adding too many 0′s onto the end of their quotes!

Sounds cool, right? A new piece of software that should be able to handle Facebook sized databases, but available to everybody from SMEs through to multinationals corporations. That’s a lot of power!

Thought Den’s official line

So, will Thought Den be using MongoDB in their apps? Well, in time we’ll be trialling it on our own internal apps before moving it into production, but it looks very promising:

PROS
- Faster
- Easy to replicate/manage data across different global cloud data warehouses
- Auto-recovery from other cloud servers if main database fails
- Compatible with Amazon EC2 computing power
- Open Source
- Received lots of investment $$$ to secure its future
CONS
- Global Write lock, causes issues
- New technology
- Other new tech is available, like Google’s BigTable.

Monga-liciuos!

Source: besttechInfo.com

A rumour that spread like wildfire across the web a month ago has now metamorphosed into a big, exciting News butterfly. Facebook is on a journey to take on the might of Apple and Google in the mobile market, much like Leonidas and his 299 fellow under-dressed men.

Project Spartan, as it is known, is Facebook’s plan to develop their own new App Store; think iTunes but through Facebook. While not too much has been said yet (Spartans are men of action, not words) it is not too difficult to imagine what the project could lead to.

This will allow for e.g. making better use of some features like Facebook Credits for sales, in-app purchases and thus making more profit.  It is a clever battle-plan which the Financial Times and Playboy have already kicked off.

Apparently about 80 outside developers and companies (including Farmville and The Huffington Post) are contributing to the project, and we also know now that Apple is giving a certain level of support.

This effort from Facebook to bring a whole new experience to the iOS devices is something to celebrate. It would be nice to see this new platform being spread through other mobile devices, let’s say… Android OS for instance!
It may very well push developers and the rest of the industry to have more interest in HTML5 and CSS3 features, pushing forward new web standards.

source: Slashgear.com

The exciting news for our clients however is that it is a new contender in the app market with Facebook’s 750-million users behind the top brand.

Thought Den’s experience with the technology, HTML5 and Javascript will allow our clients pretty much instant entry to the service.

Now less talk about the naked men fighting please!

Check out our top list of improvements.

Improved Management Dashboard

It looks much more tablet-like

Security Improvements

This is Dan’s best part of the list, old technologies which can leave HUGE security holes are dropped to favour the new tech.

Dropping IE6 support!

Dropping PHP support!

Dropping MySQL 4!

Top Admin Bar

You’re able to get to what you want really quickly

Performance upgrades

Common pages have been tweaked to load faster

Default Theme has HTML5 support!

Times are a moving on, it’s time we allowed the <video> <audio> tag to make easy embedding of media. Plus more useful markup for Search engines

Not a bad list, better get on and start updating our blog then!

However, what’s interesting about this story is how the company were thought to be storing their detail in clear text like below.

Passwords in plain text

Storing details in plain text means that anyone who’s able to view the database has easy and plain access to the password. People like the staff, developers, marketing managers, database administrators and even hackers. Imagine how many times you use the same password for lots of different online accounts. That’s a pretty important piece of data for a company to not cover up.

So I felt compelled to write about the Thought Den method we use to store our users’ passwords in any bespoke modules of our online software.

Hashing of passwords
None of your passwords are ever kept in plain text. We immediately use a “one-way hashing algorithm” and a hidden keyword to hide your passwords when they’re saved. Or in English, we put it through a sausage masher and then save the result. Then anyone who views the data will never see your passwords in plain simple text, just a mashed view.

Passwords hashed

Nice right! And the beauty is, it can only go one way, so there’s no de-cyphering it backwards.

Next post. SQL injection attack… or in plain English, keeping your borders well checked against trojan horses.

This is a demo of some of the capabilities of the upcoming Flash Player 11, using the alpha Molehill APIs, and a pre-release version of Flare3D. It uses the Spinosaurus model from the AR project we did for the BBC (SpinARsaurus Challenge), and highlights the vast difference in graphical capabilities between previous versions of Flash (up to version 10) and the next release.

The model itself contains 10,000 polygons, which left the CPU working very hard even at 25 FPS, using Papervision3D and software rendering. Now with 60 instances of the same model, it renders extremely smoothly even at 120 FPS. Molehill and Flare3D – along with a number of other up and coming FP11 3D engines (Away3D, Alternativa3D, Unity3D) – also open up further possibilities with full support for complex shaders. In the demo, we went for a shiny, cel-shaded appearance. All the danger of a raptor, plus a backful of spines and twice as slippery. (This is also why they don’t need to move their legs to get around. No friction.)

The animation comprises a red vs. green game, starting with one red (zombie) dino, and 59 green (uninfected) victims. When a red catches a green, they join the bad side. And if they hit the edge of the square, or each other, they bounce off, dazed, before resuming the chase/escape. Just like how scientists predicted spinosaurs behaved in the wild, centuries ago.

Identity design

Motion graphics

AR marker controlled puzzle

The output!

A little technical rundown

Good performance was at the fore of all minds on the project. How many polygons were too many? Which 3D engine would be quickest? What minimum specs were (un)reasonable? And at what point does tomorrow’s noon deadline become more attainable by going home and sleeping? By hook and crook, we struck the right balance, but not before a few bouts of panic.

In the pursuit of faster marker detection, we started with an Alchemy-compiled version of the FLARToolKit. Alchemy is an Adobe Labs technology that allows C and C++ source code to compile to ActionScript bytecode and be executed in the Flash Player. The advantage that those lower-level languages have over high-level AS3 is great scope for optimised CPU instructions and memory management. But! -using SWCs that other developers have created is akin to buying a car on eBay without seeing any pictures. This particular vehicle was as fast as promised, but leaked oil [memory] at an alarming rate, and would insta-crash on wet tarmac [Google Chrome]. We tried what we could from outside the black box of that precompiled code to resolve the problems, but it became apparent that we’d need to switch over to the more dependable, slower AS3 version, and seek our performance gains elsewhere.

Beyond the FLAR  difficulties were the need to manage dinosaur textures with some sophistication. Trying out the construction game, you’ll see that individual bone segments are alpha-ed down and up independently of the rest of the model. Papervision3D supports this sort of control while the Collada model is rendered with vector fills for textures, but setting a DisplayObject3D’s alpha property with bitmap textures present will quietly do nothing.

Our workaround involved the exposed BitmapData of each texture, and the application of ColorTransforms on a per frame basis. And since such transformations are lossy and non-reversible, a custom tweening function was needed to clone the original pixels at each time step, before reapplying the ColorTransform with an incremented alpha offset. (Intel Celerons, go home.) Where this approach made acute pain for Justin, our 3D modeller, was in the need to break apart the model’s textures into individual materials, for every segment that we wanted to fade in and out. Not knowing the final set of editable bones, we were left with over a hundred separate texture files to manage. And that’s why we’re all sleeping so well these days.

The people that made it possible

A big thanks to the team that worked so hard on this. We have:

Adam Vernon – Lead Flash Development

George Crabtree – Flash Development

Ben Webb – Lead Designer

Justin Dowling – 3D awesomeness

Antoine Kougblenou – Testing / javascripting

Dan Course – Calming words in the eye of the storm

Ben Templeton – Project lead and Creative Direction

Our client contact at the BBC, who has been fantastic, showing incredible support, patience and ambition.

The project will launch at the Big Bang Science Fair in early March and presents users with a familiar problem – re-assemble the mixed up parts to form the whole. This time the twist is that the puzzle takes a 3D dimensional form and interaction occurs with an AR marker via the webcam. The best bit? Dinosaurs are involved. Dan is very excited.

What better way to start a research project than with a real-life puzzle and a cup of coffee. Play Nicely laid down the gauntlet by assembling their dino-kit first, though we’re not entirely sure how anatomically correct their version is. Justin, in full 3D himself, will mastermind the modeling and Mr Adam Vernon will be developing the Flash interface.

We’ll be using a mixture of the FLARToolkit and papervision, though the current debate is how to get the smoothest effect for live 3D and a model that has over 3,000 polygons. We’ve even discussed creating a series of PNGs for increased verisimilitude at the expense of full 360 interactivity. Tests will be posted for comment if anyone out there is interested in our progress.

Over at Play Nicely, the boys are making leaps and bounds with their Total Immersion AR projects, but for this brief it was essential no 3rd party software was required beyond the usual Flash Player, which currently stands at 94% penetration throughout Europe…

Coca Cola Village

A person tagging their RFID bracelet against a Facebook 'Like' sensor

A real-world Facebook Like button

'Like' the food?

This is a great way of pairing physical, real-world interaction with Facebook and Coca-Cola definitely got plenty of social media advertising from the attendants.

To further explain the technology, radio frequency identification (RFID) uses a tag which can be applied to or incorporated into a product, animal, or person to identify and track using radio waves. Typical uses of RFID tags include mobile phone payment systems, transport payment (Oyster card), product tracking, animal identification, library book security, digital e-passports.
This is not the first time a company has largely adopted a new technology for marketing purposes. Some examples include Pepsi printing QR codes on the sides of their drinks bottles for scanning with a mobile phone to link to the Pepsi mobile website, BMW’s Z4 Augmented Reality car, Oasis Rubberduckzilla AR games, Arcade Fire’s world first HTML5 powered music video.

Thought den are frequently asked to use new technology and as a studio we have created several similar projects you may be interested in taking a look at:
BBC Milk
IG Fest
RNCM
Parashoot SMS