FriiSpray – Open Source Infra-red Graffiti

Enabling Expression through Technology

FriiSpray – Open Source Infra-red Graffiti header image 3

Software

A snippet of code from FriiSpray

A snippet of code from FriiSpray

FriiSpray relies on two pieces of software. The first is Johnny Chung Lee’s Wiimote Whiteboard software that links the WiiMote to the computer and the second is a very simple painting application that I created.

The application needed to allow the user to paint on the screen with various colours, use several brushes and be able to save the pictures created. It’s hardly photoshop, but it’ll meet the needs for this project and we can always add new functionality later.

I decided to use Adobe AIR and Flash to create the program because it would be quick to develop and work on Windows and Mac. Flash has a nice collection of drawing functions that made the initial development very straight forward.

Creating different brushes was more difficult. Flash’s graphical library is based mainly around drawing lines. I’ve currently made different brushes by combining groups of lines with different widths, opacity and position offsets to create spray and caligraphy brushes. The affect is pretty good, but not perfect. I think if I want to improve it, I will have to do something smarter with bitmaps. Although, any other ideas would be welcome.

Saving the pictures was made very easy by using the ActionScript 3 Core Library. There’s a function for turning the screen’s content to a PNG, and then you’re pretty much done. There’s also a function for creating JPEGs, but this was much slower.

In the future I’d like to add a feature to automatically upload the pictures to an Internet gallery as soon as they were saved. We’ve also talked about making it so two people in different places can work on the same graffiti painting via the Internet. If I had a lot more time to play with this I’d like to make it so that more than one spray can could be used at once, but I think that would involve a lot more work.

Installing the software

FriiSpray is an OpenSource piece of software. It’s free to download, but you need to install some other stuff first. FriiSpray is licenced under GPL, with the extra conditions that you must attribute it to us and check with us if you want to use if for commercial purposes.

To install the software, follow these steps:

  1. Get Johnny Chung Lee’s Wiimote Whiteboard software.
  2. If you haven’t already, install Adobe AIR.
  3. Install the FriiSpray AIR App. [Version 0.82 updated 3 November 2009]

The source code

As it’s Open Source that means you can look at how it works and we’d welcome people improving and building upon it.

12 Comments

12 Comments so far ↓

  • Pietro

    Is the source code free?
    Where can I download it?

  • Richard Garside

    It will be. I just have a few things to tidy up and one small bug to fix. Then it will be released. Watch this space.

  • Richard Garside

    Just uploaded the program and source code. It’s my first Open Source project, so please be kind.

  • Ulfilas

    The Source code and documentation seems to have vanished :(

  • Ulfilas

    I Just found this…
    http://www.nocircleno.com/graffiti/

    What is it?
    The Graffiti AS3 Bitmap Drawing Library is designed for ActionScript developers to easily integrate drawing functionality into a Flash, Flex or Air project. It is free to use and modify for noncommercial projects.
    Their are some great bits in there that could help with the friispray application – the code is there to be freely used. I’m not a coder – or I’d jump in and play with it myself!

  • Ulfilas

    I’ve just found a nice app that lets you change the mouse button to right click instead of left – might be useful for future reference? Its http://www.swapmousebuttons.com/

    Hey I can’t help helping! :)

  • Richard Garside

    @Ulfilas all source code is back on line and also at the latest version.

    The graffiti library looks interesting. I probably won’t use it directly, but I will look how they’re doing bitmap drawing. FriiSpray uses vectors and this is limiting the brush effects we can get.

  • Ulfilas

    Extra functions for future that would be nice :)

    it would be really nice if the paint could drip if the spray has been concentrated in an area for a set time

    simple colour picker for more colour options

    ability to use custom background as basis for drawing on top of – or restrict user to a shape area (transparent png?) – this would be loaded form admin panel – not user controlled

    Logo placement to brand wall for events(corner)

    Mailto: Email picture to an address (onscreen keyboard for typing address)

    Stencils – loaded from admin panel (could transparent pngs work) user clicks on stencil button moves in place – rotates if needed – sprays – then closes.. (might need more explanation – but stencil would have to have buttons on it for this to work)

    Record the painting so can be played back as animation and exported – not for user but for admin

  • Richard Garside

    All great ideas.

    You can already do logo placement.

    Cntrl + o opens a background image that can have a logo on.

    Cntrl + m loads an image that goes in the foreground. This needs to be a png with a transparent background. It then acts as a watermark.

    In both cases the image gets scaled to fill the full screen so add extra blank image to get the scale you want.

  • Ulfilas

    not quite the same sort of thing as friispray – but nice and the source is available too http://www.nastypixel.com/prototype/workshops/diffiti

  • Ulfilas

    Commercial licesnse for graffit library is $25 in case you’re interested :)

Leave a Comment