CultureTECH 2013 Derry/Londonderry

 

winnie-tang

Come see my work and others too! Try out my Augmented Reality using Juanio for yourself on September 11th 2013!

http://culturetech.co/event/2013-09-11/digitally-enabled-user-experiences

Digitally Enabled User Experiences

A selection of work from the recently graduated School of Creative Arts & Technologies, Design students from the Magee Campus, University of Ulster will be exhibited. It shares inventive thinking on digitally enabled user experiences. This specific work ranges from augmented reality-enabled, walled city maps and first aid e-learning for kids, to immersive games related content and digital human modelling.

Come along and experience these interactions for yourselves. Open your mind to what can be achieved with creative multiple-disciplinary design thinking and technological developments.

 

Advertisements

Pop-Up Templates

I made templates for each of the four scenes I created. I printed them off and cut & glued the pieces together by hand. The front and back cover was also created by hand. It takes a day to make one of the books!

This is the marker for the Doctor Panda first aid instruction video:

Once I publish my Junaio App, everyone will be able to print off this marker and scan the image with their device and watch the augmented reality I created ūüôā

Exhibition Show

The exhibition was a great success and really fun! The show was held on the 14th June in the London Street Gallery in Derry/Londonderry. It will also be running from Monday 17th to Thursday 20th with free admission. (10am to 4pm) Come check it out!

Here’s a link to the London Street Gallery: http://www.londonstreetgallery.org/off-the-cuff.html

Here are some of the pictures I took of the exhibition:

 

Some close-ups of my origami pop-up book:

 

I covered a whole sofa with my stuff whilst getting my exhibition ready:

Meeting my Supervisor

I was talking to my supervisor about my project and I got some great help and ideas! It has helped give myself a clear indication of what to do and how to carry it out.

Scenarios

What I need to do is first work out the scenarios for the 4 sections, so far I have 3 done but I still need to figure out the animation for each of them. Getting this done allows me to start the storyboarding for the scenes. I will concentrate on finalising one scene to ensure I get one section done with the AR working, then if I have time I will work on another scene and so on.

Storyboard & Retention Span of Children

Next is to storyboard the scene. I plan on having a 10 second animation of little cube characters interacting with the background and an accident happens. I want the animation to remain short due to children’s attention span at the age of 4-5. I have been trying to find out retention¬†guidelines for children but nothing comes up for animation, word and sentence limits, only word limits for books.

What I have found out though is the attention span average between the ages of 4-5 is between 5-10 minutes depending on how interesting and fun the activity is. I plan on having the total length of the animations about 1 minute or even less, while a little activity is played afterward to help remind the children what was taught. My supervisor will be helping me gather information on guidelines of retention limits for children from his connections which will be extremely useful.

Attention Span

Animation & Instruction Video

At the end of the scene the child presses the screen and it directs to a YouTube video stream I will make in 3D Studio Max. The video I will make will be an instructional video to show the child what to do in the situation such as the accident played out.

The main character for the scene will narrate what to do and as they mention a step, an icon pops up on the bottom of the screen which represents the step in the process. After completing the first aid treatment, all the icons appear at the bottom. I plan on having the icons as the marker for each of the scenarios. They could also be printed on cards for the children to take home and scan and use again with their parents.

What I want to achieve is repetition of the steps to teach the children the steps. This method works well with kids to help retain the information.

Think: Green Cross Code

The Green Cross Code itself is a short step-by-step procedure designed to enable pedestrians to cross streets safely. This was highly targeted¬†to children and it was memorable with the singing and animation.¬†While the Code has undergone several changes over the years, the basic tenets (“Stop, Look, Listen, Think” or “Stop Look Listen Live”.) have remained more or less the same.

Stop Look Listen Live

Do you remember the cute little hedgehog¬†in the road safety campaign for children? It certainly was memorable for children, check it out if you haven’t seen it:

http://www.youtube.com/watch?v=KnwxN24E2yY

Illustrations & Pop-Up

I need to work out the style of the background¬† for my project and the¬†pop-up piece’s so I need to test this out and finalize¬†the style. I’m still considering vector style similar to the Powerpuff¬†Girls background art and possibly isometric, but I need to not overcomplicate things and give myself too much work that I can’t complete in time.

Powerpuff Girls Background Art

The pop-ups will take some time to work out and plan as I have experienced before during semester one. I need to do sketches, a quick prototype and print the real thing off with the graphics designed and ready to be folded together.

Augmented Reality

The less polygons I have in one scene the more animation Junaio can cope with smoothly. As I have modelled my characters at a minimal of 300 and below polygons, I will have no limitation on length of animation. Though I will keep the animation to 10 seconds. I did a sting for one of my university projects which was 10 seconds long so I have an understanding of timely etc. I will upload it soon as reference.

I will be doing a sound tutorial next week with my supervisor on Junaio. The sound required will be noises from the little cube characters in the scene playing out the accident.

Instruction Video

The instruction video is not constrained to the limits of Juanio which is brilliant! I will be able to put in effects, lighting conditions, more detailed textures and the lip sync will work much better.

My Final Idea

Before you open the pop-up book there will be a marker on the front that you can scan and the 4 main characters appear introducing themselves. (Possibly folding up into the characters from a piece of paper if I have time?). Then you open up the circular pop-up and hold the device over one of the markers in one of the scenarios and an AR animation will appear. This will play out an accident with cube characters acting out the scene. After the animation, which will be about 10 seconds long, the child presses the screen (or an icon?) to stream a Youtube video I will make in 3D Studio Max. The main character for the scenario will tell the children watching, the easy to follow steps that they can carry out in this situation. Each time a step is revealed, an icon representing the step pops up on the bottom of the screen. Eventually after all the steps are covered, all the icons appear and the animation ends. This can be replayed over and over again.

The follow-up activity to recap the lesson will hopefully be in the form of cards each with an icon of the steps and the child can try put them in the correct order.

Toy Store Cardboard Box Augmented Reality

Can kids have fun with something free and with no instructions?

I came across this interesting concept of opening up a cardboard toy shop were the children can choose a piece of cardboard and be creative and imaginative as they want with it.

There was a separate¬†room for the children to do arts and crafts and even had an augmented reality station, where kids can hold up their boxes with a QR code to the computer screen, and it will turn that box into a toy. Just a little help to get kids’ imaginations going.

Check it out and see the happy kids!

Staging

Staging is not just for the theatre and¬†films¬†but also for animations and it is an important element that should not be overlooked. The purpose of staging is to direct the audience’s attention to a clear idea presented¬†in front¬†of them which is unmistakable. This can relate to the personality of a character, the mood or an action.

Disney Movies

Disney movies are great examples of how: “Every line put on paper supports a main thought, and the rhythm of the drawing leads your eyes toward the area you are supposed to look at.¬†This is not an easy thing to achieve. An animator needs to boil things down to a clear essence, because the audience only has a split second to see and understand what’s going on.” (http://andreasdeja.blogspot.ie)

The red arrows show you where your eyes focus to with the support of the position of the character such as their arm, hands and props.

Staging in my project

As I will only be animating my model characters, the staging will be relating to the pop-up/origami environment I will set up, so the props will be set up to clearly define that the AR is of the greatest importance to the whole scene as it will be teaching first aid. I need to carefully position the background environment in a way which does not compete with the AR animation and not clutter or confuse the children using the first aid piece. The background will be showing the surrounding environment of the character and help support communicating the character and animation. This is the main reason why my background design will be minimalistic and avoid unnecessary detail.

My Project Idea for Children

After researching about how children learn I found some useful information which has helped me decide on my project decisions.

Android tablets and iPads are heavy

I realised after holding my Android tablet that it was quite heavy and tiresome on one hand if the other needs to press the screen to activate the animation of my cherry model. Tablets and iPads can weigh from 600g to 670g.

My users will be children in Primary School aged between 4-5 and the devices will be too heavy for them so I will have to put the devices on stands which are pointing at the marker and the pop-up/origami scene. This also has the advantage of reducing the risk of the tablet falling and being damaged. Here are examples of stands schools can use:

I also learnt that 4-5 year old children’s hand-eye coordination improves which means they are capable of using the device, but the actions they need to take will be simple and straight forward. Children begin understanding when to ask help from an adult or a friend which is perfect for instructing them to “tell an adult” in one of the first aid lessons.

The idea of my pop-up/origami Piece

My idea is to have a circular pop-up piece which children can sit around and you can view the whole piece at 360 degrees. I also wanted to reduce health & safety risks by taking away sharp edges. There would be 4 separate scenarios to work from like a game so four tablets/iPads are needed. But the game could also have one device or the piece could rotate around to face the child after each completion. Each scenario has its own environment which depends on the accident (e.g. a boy falling of the tree would have a forest scene) and they are divided up to keep the devices tracking only one marker.

So it will look like this:

Quick Sketch of idea

Quick Sketch of idea

The device points to both the marker and the environment. From scanning the marker a character will appear. Each¬†scenario will have its own little character guide depending on the accident. So if the accident is a burn, a little fire man will appear. As the device will be on a stand it will already show the character. ¬†It will say “tap me to start!” and the child will tap the character and an animation plays. After the animation I hope to make a task that the child completes to see if the child understands what to do in a similar situation. For example, as children aged 4-5 can learn to do up to 3 tasks I will be¬†teaching¬†3 tasks in the animation then I could have 3 cards with graphics representing the 3 tasks and they have to put the cards in order of what to do first to last.

My character idea

I have been looking at all the beautiful origami out there and even made my own. But I finally decided that my character should have a mouth as it will be talking so I could animate this in 3D Studio Max. I folded a puffy bunny box which I thought looked cute and appealing to children:

Puffy Bunny

Puffy Bunny

I can model this design as a character once in Max and duplicate the same model with just the texture difference for each guide on each scenario. Half the body could have pants, the other a head with the ears/eyes/mouth.

I found Suwappu an inspiration:

Suwappu

Suwappu

Character interaction with children

I plan on having my 3D AR characters speaking to the children as at 4-5 years old they are only just starting to learn the letters of the alphabet. At age 4 they know and understand 1500 words and they are constantly improving their vocabulary and knowledge. But I need to look into the amount of sentences a character can speak, terminology and images which are ok to say/use in relation to first aid (e.g. blood) and what they would understand. I plan on making little animations which interact with the pop-up/origami scene that the children can watch to learn first aid. There will also be a little guide character for each scenario I make. I plan on making more interaction so the children can engage more.

Character activity within the scene

My supervisor told me that it is possible for the models to hide behind the pop-up/origami scenes by placing a wall (which is in the shape of the model the character is hiding behind) at the coordinates of the pop-up/origami piece. To do this I will need to measure the distance from the marker to all the pieces of pop-up/origami in the scene. This will help me figure out the basically the translation position of my model when coding in my index.php. I need to look more into this though.

Using headphones

I also realised that if the characters are speaking and the 4 scenarios are close to each other, then there is a clash with the sound on all 4 devices. I will have to use headphones to solve this problem.  I have been researching children using headphones to make sure its ok in schools to use.

IEHEAD

IEHEAD

I found this product online (£10.95 ex VAT):

“A pair of padded headphones, which have been designed with Primary education in mind. The smaller size is suitable for four years and older. Padded head band for comfort and foam earpieces which have been designed to cover the whole of the ear to minimise outside noise and to increase comfort.”

I also noticed schools using headphones for P1 children:

P1 children using headphones

P1 children using headphones

The main concern is the volume levels affecting the children’s ears so the headphones will have to have a volume limit to ensure their¬†safety.

Size of the pop-up/origami piece

When considering the size I need to take into consideration how much can fit in the device screen and to ensure any pop-up/origami pieces which will be used as a prop will be seen on the device. So the main focus of the piece needs to be within the vision parameters of the device. But I can still build the piece bigger with background elements to make it more visually appealing. The piece will also be on table so the children can sit on their chairs.

Junaio app

The app is free for the school to download onto their devices and easy to search the correct channel and get started. I just have to provide the school with the QR code to my AR or ‘Publish’ my channel so they can find and use the channel. NOTE: When you publish your channel it will take 3-5 days for the Junaio team to approve the channel. I also found out the app uses a lot of power to run so it is likely that the device the children are using will need to be charged regularly depending on the usage amount.

Battery Life

Most of all I want this to be fun, engaging and stress-free for children but at the same time they are learning which is my main aim and focus.

Animating and Interaction using Junaio

Getting started

On your ftp you need to set up a new directory and you can call it anything you want. I named mine cherryanimte. Download files from Junaio to get started:¬†http://www.junaio.com/develop/quickstart/hello-glue/ At the top of the page there is the subheading ‘What should you have done by now?’ On point number 5 click Download to download Junaio quickstart files. Unzip the file and save where you want.

What to place into your new directory

Open up the document and copy over the folder named ARELLibrary into your new directory folder. Then go into the file GLUE_2_AnimationsAndGlue. Copy over the .htaccess and index files into your directory. Go into the areal folder and place all the files here in your directory as well. (index/metaioman/arelGLUE2). Place your marker, MD2 file and PNG texture in here as well.

Edit index.php

Open up your index from your ftp folder and it should look like this:

index.php

index.php

There is a section which states:¬†require_once ‘..\ARELLibrary/arel_xmlhelper.class.php’;. You need to delete the “..\” as this code directs Junaio to search a folder backwards from the ARELLibrary folder and the file it needs to access is actually forward which is why you need to delete this.

In the index you also put in your marker ZIP file, your MD2 file and the PNG texture location.

The place to put your marker url is: “www.junaio.com/publisherDownload/tutorial/tracking_tutorial.zip” Instead of using this you put in your server, ftp folder and marker ZIP file name which I have explained in earlier posts. If you don’t remember you can check back on them.

Edit the following to the correct path and name of model/texture file that you are using:

dev.junaio.com/publisherDownload/tutorial/metaioman.md2″, //model Path
dev.junaio.com/publisherDownload/tutorial/metaioman.png”, //texture Path

You can also change the coordinates of your model. I find it best to set the translation to (0,0,0) and the rotation to (90,0,90). Changing the translation to 0 makes the model appear at the centre of your marker instead further to the side etc. The rotation I suggest is the one that worked with two of  my tests, this sets up the model to look like it is sitting/standing on top of the marker and not lying on the marker. Scale up or down if you need to after checking  how your model appears. Mess about with these coordinates to get the result you want after you see how the model appears on the marker.

Editing arelGLUE2

I wasn’t able to directly edit the file from my ftp so if this happens to you, just simply open the original file that you downloaded in the arel folder. This will open up with Adobe Dreamweaver or Micro Dreamweaver. If you read the code the top lines are self-explanatory and you don’t need to edit the coding.¬†The editing you need to do is at the very bottom. This is were you input the names of the animations when you used QTip to¬†export¬†your animation into an MD2 file.

arelGLUE2

arelGLUE2

Basically what the code above is stating is that the model will begin animation with the frame name you input and when the model is clicked it will do another animation which you have input. Where you input the frame name from QTip is where the quotation marks are. You can see where I have put my animations (Idle/Jump) on the above image just to show exactly where they go.

Once you have sorted this out you delete the arelGLUE2 file in your ftp folder and upload the edited file.

New channel on Junaio

Sign in at Junaio and go to My Channels and create a new channel. Name it anything you’d like and put a little description in, it’s a requirement so if you can’t be bothered you could type in test or anything. Make sure when you enter the correct information for the Content server URL section and it will always end with index.php as Junaio needs to be directed here as it has all the required information it needs to work your custom AR. For more information on channel making look into my earlier post.

Validate

Make sure to use the Validate button to ensure your channel will work by passing 3 tests. I have also discussed about these tests and troubleshooting in an earlier post which you can check out.

Using your device

Open up your Juanio app on your Android/iPad/phone etc and sign in as developer. Go to the search icon and click favourites to find the new channel you have created and click it. Point your device at the marker you set up and watch your model appear! Tap your model and it should animate what you animated in Max.

Here is how my cherry turned out:

Troubleshooting

Sometimes you will encounter some problems and when you figure out and fix the problem and point the device at the marker it seems as though nothing has changed. This can be fixed by clicking the Junaio logo, developer sign in and clicking clear cache then re-selecting your channel and pointing the device at the marker. Basically refreshing the app like a web page and the problem should be fixed now and show the correct modified display of your model.

Using QTip to Export MD2 File

The QTip plugin looks like this:

QTip

QTip

NOTE: The QTip window can’t be minimized or closed unless Max is closed and it doesn’t have its own little icon on your desktop toolbar. So if you have a dual monitor you can fling it over onto the other monitor. Or you could scale down your Max window so you can find your QTip window.

Animating in Max

You need to set up your frames per second to 8 on Max, you can do this by right clicking the play buttons on the bottom right, selecting custom on frame rate and inputting 8 in FPS. Junaio recommends setting the fps to 7 but the lowest Max can go is 8. Then do your animation.

What I planned on doing for my test model is to have it idle as it appears and when the user presses the cherry it animates by jumping. So I turned on the Key Frame and set one at 0 and one at frame 4 . On frame 5 to 12 I animated my cherry jumping and blinking.

Using QTip

So after you are finished with animating your model, you find your QTip window and click on Edit Frame List. A new window appears and you click on the Frame 1 then click Remove to delete all the frames present. Where it says Name is where you name your animation. So for example because my model starts by being static I named it Idle. But you can name it anything, you just have to take note of the name so you can put it in the arealGLUE2 file later on.

After you name your animation, you put the frames into the Series section. So my idle runs from frame 1 to 4 so it looks like this: Series 1 To 4. Then you click Add Frame Series to add all those frames. Alternatively you can use Add single Frame but that is tedious. Now I also have another animation set up which is the Jump. So I put the name in and input the frames like the Idle but put 5 in Series as it animates after Idle. Hit OK and a new window pops up. Choose the location of where you want to save the file then name it and hit save. It automatically saves as a MD2 file.

Next let’s start making this animation work!

Purchasing QTip

I thought this would be easy purchasing the QTip plugin, but turns out it took some time figuring out how to get this little thing set up!

First you need to go to the QTip website: http://qtipplugin.com/download.htm and depending on your 3Ds Max version, you download the correct trail version of QTip. I have 3Ds Max 2013 on my computer so I downloaded QTip 4.0. When the file is downloaded you unzip the folder and open up the readme file and have a little read.

“What you do is¬†copy the plugin (.dll) to the bin/assemblies folder under the appropriate 3D Studio MAX installation folder. ¬†¬†The same DLL will work for both 32bit and 64bit versions of 3DS MAX.

QTiP is a utility plugin, so it will show up in the utility panel of MAX.”

The file is named: QTipNet.dll

This seems simple enough right? Well I opened up 3Ds Max and I got an error message telling me to take out the plugin and restart Max. When I closed the message and searched for the QTip plugin in the¬†utility panel I couldn’t find it. Something was wrong. I downloaded the correct version of QTip for the 2013 Max version. I copied the correct plugin file to the correct folder.

Soultion

I finally found out the problem why it wasn’t working. This might happen to other people who try to download the trail version of QTip so I thought this could help. On the file QTipNet.dll you right-click it and go to properties which opens a new window. At the bottom of the General tab on the Security section it might say the following: “This file came from another computer and might be blocked to help protect this computer.” This was the reason why the plugin wasn’t working, it was being blocked by my computer¬†because¬†it wanted to protect itself ha. All you have to do is click the Unblock button, Apply and Ok. Restart Max and check the utility panel, click More and find QTip ūüôā

Another problem might just be that you don’t have administrator rights to unblock the file. If this is the case you just have to edit the permissions for the user.

Purchasing the Full Version (You need to sign up for Paypal)

Whenever you bring up the QTip plugin in Max a new window appears. You have the option to register which you should click on if you want to purchase the plugin and use it for MD2 files. After you click it a new window appears. It tells you a product code which you need to copy. Go to the QTip website:¬†http://qtipplugin.com/purchase.htm read the terms and conditions and tick the little box if you agree. Then paste the registration code into the Product Code box. click Buy Now. This takes you to Paypal which is secure to make your payment. QTip costs $25 which is around ¬£17. This is handle because I thought I needed a credit card judging from the image of¬†MasterCard¬†and visa on the buy now button. Enter your details in Paypal and you’ve successfully purchased it. Now you play the waiting game because you need to wait for a reply from QTip support to send you an email with the registration code. I had to wait an hour which wasn’t too bad.

Now time to use QTip!

Enter your email address to follow this blog and receive notifications of new posts by email!