something in the way

a tumblog about design + code
Sep 17

PixelPhones – a huge display made with smartphones

Whew!

It’s been a massively intense few weeks getting my PixelPhones project ready in time for my presentation at FOTB. I’ve been coding day and night for months, and I was up until 4am the night before making sure that I’d thought of everything.

The worst part was that I had no idea if it would work – it’s kinda difficult to get hundreds of phones together to test it. But it did work – and the results were better than I could have hoped for!


thanks to Momo for the amazing video

PixelPhones is this crazy project where I turn each phone in the audience into pixels in a large display. It runs in your phone browser so you don’t need to install an app.

Built with openFrameworks in C++, the app sets up its own WebSocket server and phones connect straight into it over the local wifi network (although in future I hope to get this working over 3G).

Of course socket connections are two way so I couldn’t help but take this chance to involve the audience too – I made a game where Nyan Cat runs from screen to screen, and whoever catches him fastest wins! (partly inspired by Rob Davis’ Cat on Yer Head game)

The tricky bit was figuring out where the phones are – GPS just isn’t accurate enough. I was inspired by the Junkyard Jumbotron – it puts markers on each phone, then you take a picture of them all. But in my app a marker would be way too small so instead I use a unique sequence of flashes.

It uses OpenCV to find the flashing objects, read the pixels, and decode the sequence.

Latency was also an issue, even on the fastest networks the packets arrive at slightly different times. And when you want super fast smooth animation, unpredictable timing is unacceptable. I solved it thanks to Jobe Makar’s excellent method of syncronisation outlined in his ActionScript multi-player gaming book.

I’m so happy and relieved that it worked so well and the timing was split-second perfect. The next day I put myself through the whole ordeal again, this time with a larger audience and only 10 minutes to demo (at the FOTB Jam session). Over 220 devices connected and I could have handled more but we ran out of time.

This is just the start, and I have many many ideas that I have yet to try. I’ll also be open sourcing this code when it’s finished – I can’t wait to see what the rest of you do with it! Both sessions were recorded in full, I’ll let you know when they’re uploaded.

No related posts.

Media_httpfeedsfeedbu_hjyue
Media_httpfeedsfeedbu_izaxi
Media_httpfeedsfeedbu_hirum
Media_httpfeedsfeedbu_featd
Media_httpfeedsfeedbu_ciafj
Media_httpfeedsfeedbu_ajoaj
Media_httpfeedsfeedbu_gyjiq
Media_httpfeedsfeedbu_fdloi
Sep 14

Flocking.js [Javascript]

Media_httpwwwcreative_ajtxa

We have a new feature javascript running on CAN:  Flocking.js by Lucas Dupin. Click top right corner button for demo.

Flocking experiment done in canvas. Each particle has it’s own set of attributes and also interacts with the group, depending on environmental variables. The flocking algorithm is based on Craig Reynolds research and is based on 3 simple rules: Separation Cohesion Attraction Uses toxiclibs for vector math and all code is commented at: http://lucasdup.in/js/bg.js The idea is a bunch of individuals which try to stay together when they feel far from a ‘safe point’ (the mouse). After finding the safe spot, they spread. This is a common behaviour that can be observed in fish and birds.

Many thanks Lucas!

http://lucasdup.in

If you’d like to submit your own, see this page for more info.

Media_httpwwwcreative_gavdt
Media_httpwwwcreative_qcrca

Media_httpfeedsfeedbu_hkieg
Media_httpfeedsfeedbu_coghc
Media_httpfeedsfeedbu_uztnj
Media_httpfeedsfeedbu_gmabi
Media_httpfeedsfeedbu_wdwzz
Media_httpfeedsfeedbu_ffgla
Media_httpfeedsfeedbu_tfyer
Jul 26

Dynamic Touch Interfaces That Build Themselves, with Android, iOS

Today, we note the availability on Android of Control, a WebKit-based touch interface also on iOS.

For visualists and interactive designers, it’s worth paying attention to one feature in particular: dynamic interface creation. Perhaps biased by the musicians who have tended to embrace them, touch interfaces have tended to rely on the static layouts favored by physical knobs and faders. That’s arguably the worst of both worlds: you lose the tactile feedback of physical controls, but you don’t add any of the flexibility of a display.

Control is an open-source application rendered in HTML5, powered by JavaScript and JSON, so it’s capable of anything you can imagine. But Charlie Roberts has already demonstrated how a dynamic interface could work. Using OSC, you can make control layouts on the fly. That could lead to more sophisticated software integration for visual and musical performance, new chances for collaboration and live rigs, and the ability to make an interface on someone’s device in an interactive situation.

We saw the last of these scenarios in the case of the iOS app mrmr, developed by Eric Redlinger. As proof of concept, I and others put together a gallery show using mrmr, at which interactive pieces were able to build interfaces on-the-fly on user’s iPhones and iPads. With Control, those horizons expand, no longer constrained to individual proprietary UI widgets on one platform (like iOS), but cross-platform, Web-based, and dynamic.

The video above I think does a good job of scratching the surface of what’s possible. More on that here:
Control 1.3: Dynamic Interfaces, jQuery integration & more

But dynamic layouts could go in many, many directions. Since this is especially relevant to visual performance, perhaps in modes of interaction not really possible in music, I’d love to hear what readers imagine. And do try Charlie’s app, whether on iOS, Android, or both:
Control

– and if you’re really ambitious, have a look at the source!

Media_httpfeedsfeedbu_betoh
Media_httpfeedsfeedbu_hnxfy
Jun 27

Paper.js [Scripts]

Media_httpwwwcreative_difka

Created by Jürg LehniJonathan Puckey, Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves

Paper.js is based on and largely compatible with Scriptographer, a scripting environment for Adobe Illustrator, originally developed by Jürg and Jonathan and with more than 10 years of development.

Feature overview :
- A Scene Graph / Document Object Model for vector graphics: Work with nested layers, groups, paths, compound paths, rasters, symbols etc.
- The handling and drawing of these graphic items is automatic and optimised, allowing you to construct or modify your items and styles and leave the drawing commands to Paper.js.
- A well designed and battle hardened Programming Interface.
- There is a good reason for the word Vector in Vector Graphics. Paper.js offers best of breed Vector Mathematics through its core types such as PointSizeand Rectangle.
- PaperScript, a simple extension of JavaScript allows the scoped execution of scripts without polluting the global scope, the execution of multiple scripts per page in their separate sand-boxed scopes while sharing the library code, and the manipulation of Point and Size objects using direct math operations as if they were plain numbers.
- Simple, yet elaborate mouse and keyboard interaction.
- Construct paths and manipulate their curves and segments in very convenient ways.
- Inspect and manipulate the precise bounding box of any item, supporting complicated stroke styles with square ends and miter limits.
- Smoothen curves, simplify path segments by fitting curves through points.
- Simulate dashed strokes which are currently lacking from the Canvas object, at near native drawing speed.

For more information see paperjs.org

Media_httpwwwcreative_gjpmz
Media_httpwwwcreative_ercnp
Media_httpwwwcreative_guhyw
Media_httpwwwcreative_fiaek
Media_httpwwwcreative_whhdd
Media_httpwwwcreative_jiyzh


Paper.js [Scripts] is a post from: CreativeApplications.Net | Follow us on Twitter - Facebook - Flickr - Vimeo

Related Posts:

Media_httpfeedsfeedbu_jwvqh
Media_httpfeedsfeedbu_amfre
Media_httpfeedsfeedbu_wbdfd
Media_httpfeedsfeedbu_eaemt
Media_httpfeedsfeedbu_acjhf
Media_httpfeedsfeedbu_uicja
Media_httpfeedsfeedbu_ffcrx
Apr 11

PureMVC gaining traction in JavaScript world


Media_httpapitweetmem_dlgeq

Media_httppathfinders_iwnsh

I love PureMVC because of the simple idea behind it. Have Model-Viewer-Controller pattern that can span languages and therefore time, as explained in this article by Clifford Hall. I started using it in the Flex world when it was competing with Cairngorm for that very reason. Cairngorm was Flex specific and PureMVC was language agnostic.

Coming form a mostly strict-typed MVC environment, it was very hard for me to even start thinking about big scale applications in JavaScript and HTML5 which were reserved for widget type implementations for a while.

As a natural progression of the idea behind PureMVC, it started being ported to JavaScript frameworks that emulate classes through an effort of great folks like Frederic Saunier, Justin Wilaby, Tony DeFusco and David Foley. Music to my ears! Heck, there is even an ongoing ‘native’ JavaScript port.

I decided to see if the story holds and lately I have had a great experience with the MooTools implementation of PureMVC. It feels very familiar. File structure is the same, meaning well organized with recognizable command, model and view folders that imitate packages. I use ANT to combine these files in two varieties. One just plain stacked for debugging and the other compressed using YUI Compressor for production.

There is also something magical about working with PureMVC. It feels far more like solving a workflow puzzle than coding by knowing that the same PureMVC based program can be fairly easily ported to another language and in that way have longevity. Kinda leads you to think that programing is most about managing workflows of user experience.

This setup is enough to make me feel comfortable as a programmer about big scale applications developed in JavaScript. Which begs a question: “Why would you want to develop big scale applications in JavaScript?”. Because I want to share the fun.

You can read about the PureMVC developments for JavaScript here.

Media_httpfeedsfeedbu_xshei
Mar 7

Mozilla’s Web Application Project Launched

Mozilla has announced the launch of the first milestone release for their Web Application project.

The project is the rival for Google's Chrome Web Store and follows a more open philosophy by letting them to work on any device/browser + not pushing any limits for the distribution (can be any store or directly by the developer).

Media_httpwwwwebresou_cdllt

With the stable APIs, developer utilities and documentation provided, web apps are ready to be built using HTML5 + JavaScript.

In order to find out how Web Apps can enable a rich user experience, check out the user interface concepts gallery.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Media_httpfeedsfeedbu_jopcj
Media_httpfeedsfeedbu_hgpdc
Media_httpfeedsfeedbu_coadg
Media_httpfeedsfeedbu_ivkci
Media_httpfeedsfeedbu_aiqns
Feb 9

Zoë: Export SWF Animation as EaselJS SpriteSheets

Alongside the release of EaselJS v0.3 we’re also releasing the first version of Zoë, a free Adobe AIR application for exporting SWF animations as sprite sheets (single images containing a grid of animation cells), including frame data for use with EaselJS.

This means you can use Flash Pro to lay out your animations then very easily prep them for use with EaselJS and the HTML5 canvas element.

We used an early version of Zoë to prep all of the animations for the Pirates Love Daisies game we released a few weeks ago, which let our illustration team work with a tool they felt comfortable with, using tweens, skeleton constraints, and graphic symbols.

Here’s a quick feature overview:

  • Exports a single sprite sheet image, or individual frames
  • Reads frame labels in the swf to generate frame data.
  • Writes frame data as JSON or EaselJS files
  • Calculates the frame dimensions automatically based on the animation content
  • Saves profiles to make it easy to re-export when art changes

And a screenshot:

Media_httpgskinnercom_efbiw

You can grab Zoë from easeljs.com/zoe.html. It’s currently not open source, but we’ll likely release the source once we have a chance to fix any major issues that arise with the public release and clean up the code.

Feb 9

Impact JavaScript Game Engine

I’m constantly blown away by how many types of software that have traditionally only been possible to write either natively or using plugins like Flash can now be written for the web with HTML5 technologies. Lately I’ve been really impressed with Impact, a framework for developing 2D games on the canvas. It has some really helpful and well documented classes for working with sound, animations, and input including touch input on mobile devices, and works in all of the browsers that support the canvas, including IE9. There’s even a bundled browser-based editor!

Media_httpthinkvitami_tmzdk

Even if you’re not interested in writing a game yourself, be sure to check out the Impact demo game, BioLab Disaster. It’s amazing to see what they’re doing with just HTML5 technologies. I have to warn you, though, that Impact comes with a price tag. Impact licenses cost $99 per developer. If you’d prefer open source solutions instead, here’s a great list of JavaScript game engines on Reddit. I’m really curious to know if developers are willing to pay for JavaScript libraries, especially when those libraries are taking on more difficult to write code like graphics in the canvas, audio, and timing in games.

Paid libraries or not, it’s clear that writing really rich applications directly in the browser without the use of flash or other plugins is here to stay. I can’t wait to see what kinds of neat apps our community creates next.

Media_httpfeedsfeedbu_mpzns
Media_httpfeedsfeedbu_ahgae
Feb 2

37signals ‘Cinco’ framework to be open-sourced

Revealed in a comment by DHH on this blog post, 37signals is definitely going to open-source their new framework for single-page JavaScript apps. Very excited to see how this develops. Here’s DHH’s comment …

Hold on for our new Cinco framework. It’s basically Rails for single-page JS apps. We just used it to introduce Basecamp Mobile. A bunch of the supporting frameworks have already been released. The template language eco and the compiler stitch. We’ll be releasing the rest of the pieces in due time.

Media_httpfeedsfeedbu_jshaz
Media_httpfeedsfeedbu_scfnc
Jan 17

Cocos2D-Javascript, Javascript Port of Cocos2D Game Engine

Media_httpi81photobuc_chjre
Cocos2D has been ported to run in javascript and called cocos2d-javascript by Ryan Williams.

Cocos2D is a game engine similar to Flash in that it is a 2d engine but it natively renders to OpenGL ES.  Cocos2D-iphone was originally a port of Cocos2D, a python game engine.  But the similarities to Flash and DisplayObjects = Nodes, Sprites, Scenes, Layers etc. This helps to port games over fairly quickly or start in productive in cocos2D.

Having this in javascript is a great thing! It runs on html5/canvas/javascript.

What is cocos2d-javascript?

Cocos2d-javascript is a 2D game/graphics engine based on cocos2d-iphone but designed to run in the web browser. It uses the latest features available in HTML 5 allowing real-time rendering of 2D graphics without the need for plug-ins such as Adobe Flash.

While HTML 5 is still new and not fully supported across all browsers it won’t be long before the vast majority of web users are able to enjoy all that it offers. When this time comes cocos2d-javascript will be an excellent way to develop games and applications.

To see a small sample of what is on offer, please check out the demo section.

cocos2d engines are now available on almost all platforms, so if you are building a 2d game and need a 2d engine typically with Box2D physics, cocos2d offers lots of ways to get the game out there with some porting work.

Media_httpfeedsfeedbu_tcnyq

Get Updates

Tags

Archive

2012 (6)
2011 (11)