Friday, 17 August 2012

No-limits you say? Challenge accepted!

These are the various interactive components and how I would want them to work...

  • Beading
    • I would like to have the beads (all white) to already be on the canvas. Then with the cursor animated to look like a brush I want to be able to click on the bead and have it fill up with color as if it is being painted. 


    • Alternatively I could have the canvas blank and with a click of the mouse have the bead fly across the screen and into place under the pin. However I think it would be easier to create the love letter if all the beads were already on the canvas. 
  • Touch screen capability?
    • I would actually like the user to physically bead the letter using the mobile screen and a fingertip. I would want an empty canvas and then a jar, much like the one above, and have the user pick beads out of a full jar and place then under the safety pin where it will lock into place. This would be a lot more fun but I assume a lot more coding. 
  • Edit options
    • As you can see with the toolbar above the letter I would like to have an option for: undo, redo, camera and new. New will reset the love letter so that the user can start from over. The camera option will work like a screen shot but will only take a pic of the love letter. The camera will take the snapshot and save a jpg in the users default folder for images. 
  • Sending the love letter 
    • I have put an e-mail option in the top right corner so that once the letter is complete you can send the image with a little message to your loved one. It should probably be advised that the user take a snapshot of the letter using the camera icon and then send the jpeg. 
Furthermore besides knowing all the fancy schmancy stuff canvas can do I would like to keep the interaction simple. After all we are just beading a letter - lets not overcomplicate the situation. 


Note:
For those who want to see how far the limits of html5 animation can stretch check out these 30 amazing examples of what can be done. 
For those who want to see the code you can use for a simple paint app with mouse and touch screen capability see The Code Project's article

2 comments:

  1. Oooweee, fancy stuff! Tone it down a notch. You making us look bad.

    ReplyDelete
  2. Noooooo, don't tone that down! These are great ideas and suggestions for where the Zulu love letter can go. I like your design, the jar with beads is a nice touch and can be used with current implementation where beads are clicked to be added. Although we will not be able to implement the drag and drop functionality of the beads (as this would complicate the script significantly) much of what you are suggesting here can be implemented (white beads background, undo, redo, send email and save image). Lets see if there is time to consider these!

    ReplyDelete