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 ūüôā

Graphics Style Inspiration & Experimenting

At first I tried simple tree designs on illustrator and came up with these:

The designs are simple but I wasn’t happy with them, especially the colours, so I tried a different approach. But I did like the shapes for the tree bush as children aged 4-5 are learning about shapes and circles/squares/triangles are the basic shapes they learn.

I looked at many styles and I really liked the style below:

Vector Tree

It feels free and not constrained, simple, pretty and fun. I thought It was the perfect inspiration for my pop-up book and appealing to children.

Designs

I used Adobe Illustrator to create the shapes and I love how they turned out. I like the composition and use of basic shapes for children to relate to and learn from. Next I had to add colour and I wanted to use a pastel colour palette due to the research on children and colour effects.

I loved the colour choice and I added the squiggle style as influenced by the inspiration image above. One of my supervisors said it reminded them of the solar system.

I started putting the designs together in the format of my circle pop-up piece and using the simple tree shapes I illustrated before, I re-used them and change the colour and style. The clouds were influenced by the Powerpuff Girls style.

I knew I wanted to include a cute little colourful fence so I illustrated the outside lines and coloured them in using Photoshop to experiment and decide on a final palette. I decided to go with the rainbow colours, again teaching children the basics of what they learn during Primary 1. I thought It would be more cute and appealing by making the fence have little animals on them.  

Next I added in the grass and I also included faded out trees in the background to add more depth.

I put the grass and fence on¬†at the same time to see if they would work well together along with the trees. The fence will be a pop-up piece so it won’t be printed on the background.

  I created tree branches to stick onto either sides of the pop-up piece as one of my pop-ups. This piece is important as one of the cube extras will be interacting with it. I designed some bushes too which are pop-ups too.

Final Design Template

I included glue tabs to ensure enough space is provided for the glue and strength to stay in place.

Acetate Printing

My supervisor suggested using acetate to make some of my trees and I thought I could stick my origami leaves and flowers on them to make them look like they are floating, inspiration came from these vector trees:

Vector Tree

I’ll be giving this a go tonight!

Acetate

Acetate

Acetate paper allows you to print transparency films to use on over head projectors, report covers for school or work projects or craft projects.

Things you need:

  1. Word processor or design software
  2. Inkjet or laser printer
  3. Acetate paper sheets

 

  1. Lay out the design to print on the acetate paper in your word processor or other design program.
  2. Load the acetate paper into your printer. Make sure to remove any tissue separator sheets that may be placed between the pieces of acetate paper before loading into the printer. Load the acetate paper so that the rough side of the sheet is the side that will be printed on. Consult with your printer documentation or print a test sheet to be sure of proper placement in the printer.
  3. Select “Print” from the “File” menu on the toolbar of your software program. Within the print dialogue box, choose “Properties” to explore the options available on your printer. Many printers have a “Transparency” option available. Consult your printer documentation for more information about your printer’s capabilities. Additional printing information can be found on the instructions that came with your package of acetate paper. After the appropriate settings have been determined in your printer properties, select “Print” to continue printing the file. For multiple page documents, print pages one at a time to prevent possible smudging.
  4. Handle the acetate paper carefully once your image has been printed. Hold it on the edges of the sheet to prevent possible smearing before the ink has been allowed to dry. Leave in the printer tray, or lay on a flat surface to allow the sheet to dry completely before handling. This could take up to 10 minutes.
  5. Repeat the process for any additional pages that may need to be printed. Allow all pages to dry completely before stacking.

Helpful Tips

Using acetate can be tricky if you haven’t done so before, here is some helpful tips if you ever want to try it out:

  • You must ensure you are using INKJET acetate – you can tell if your acetate is inkjet friendly by checking to see if it has one rough side and one glossy side – you must make sure you print on the ROUGH side. Normal printer settings are a good place to start.
  • Acetate can have paper feed problems¬†– these sometimes (depending on the printer) can be caused because the acetate in particular being ejecting each time because some printers cannot detect the start of the acetate because it is transparent – to combat both these problems the following method should help – If the printer is struggling with feeding the acetate in – then use a piece of normal paper and attach this to the acetate down one of the short edges with double-sided tape – then ensure this end feeds into the printer first – basically the paper will act as a carrier sheet.
  • To test the correct loading of your acetate paper, first load a plain sheet of paper into the printer. Use a pen to mark on the side of the paper visible to you once it has been loaded into the printer and print as normal. Note the placement of the mark you made on the printed sheet to determine which side of the page has been printed on.

Tree Inspiration

I want to include a tree in the scenario were a cube character falls off the tree and gets a cut/graze so I’ve been looking at shapes and structure of trees and help me.

More Isometric Inspiration

Isometric designs are really cool, especially the cute ones! I want to add an element of isometric style to the background of my pop-up pieces. Possible in the form of clouds, little animals, the sun, rinbow etc.

Characters Underconstruction

I got feedback from my supervisor today and it helped me a lot with solving problems and the best way forward for my project. We discussed my origami 3D models and the fact that the polygon count was quite high. My supervisor recommended using around 300 polygons per main character to allow the extra cube characters to be in the scene along with them to act out the scenario. So I had to go back to my 3D models again and get the polygon count down.

Remodelling

I started on my Fireman Chicky and it is going well. I was told to use smoothing groups instead of mesh smooth but I can use the high polygon count models as my beauty shots and for packaging etc. The smoothing groups allows the model to round off sharp edges without adding too many extra polygons.

Smoothing GroupsOn the image above the model to the left is the original 2,000 polygon model of the Fireman Chick. The middle model is with meshsmooth turned off. The right model has smoothing groups turned on and the total amount of polygons used was 334 including the fireman hat with smoothing groups instead of meshsmooth.

Adjustment Model

Fireman Chick FrontFireman Chick LeftFireman Chick TopFireman Chick PerspectiveI quite like the effect the final model gives, the papery angular edges similar to my origami characters I folded. The advantage of this model is the fact that the polygon count is low enough to include the extra cube characters at the same time and work smoothly on Junaio.

I was able¬†to take out the extra polygons I added onto the flaps as they weren’t necessary¬†anymore. Originally I added the polygons to ensure meshsmooth, when applied, would a preferred shape¬†and structure to the flaps. But as I do not require meshsmooth anymore, I could take these extra polygons away and reduce the polygon count.

The fireman hat also looks like the origami hat I made for my character. I took off the meshsmooth and added smoothing groups instead.

Mummy Bunny Character

After pondering whether the bunny will be a teacher or a mother I’ve decided to go for a mummy bunny. Why? Because I want to let the children know that they can get help from their parents, not just doctors, nurses and firemen. I want to let them know that grown ups can help them.

Inspiration for Mummy Bunny

When I was researching images for mother’s to define a prop my character could have, what generally came up was aprons. I want the character to have a clear indication that it is a mother but other than an apron it seems to be the immediate indication that it would represent a mother. I think I will go ahead with this approach. The apron will be textured onto the 3D bunny model, but I might have a look into making it out of origami. If I do model the apron I need to make sure the polygon count remains at 2,000 or below.

3D Studio Max Origami Puffy Bunny

I attempted modelling my origami puffy bunny in 3D Studio Max and I found it quite tricky and challenging. At first I decided to model the bunny accurately with the folds that you see when it is made:

Puffy Bunny 6

I made this quite complicated for myself and I was getting confused on modelling all the folds as I wanted to model the bunny the way it looks.

This is how it was beginning to turn out:

Left model: I modelled the bunny ear separately and then added a box but my supervisor recommended modelling the whole bunny as one object.

Right model: I started to extrude from the bottom of the bunny ear to make the cube shape and also the triangle folds you see on the origami bunny. But this wasn’t working out either, I was overcomplicating things. My supervisor told me to keep the model simple as the origami bunny is simple, whilst making it the ‘perfect’ version.

My next attempt was to make the bunny from a chamfer box and extrude the ears and triangle flaps, here is how it is turning out:

Chamfer Box

Chamfer Box

Half Modelling

Half Modelling

Polgon Modelling

Polgon Modelling

Mesh Smooth

Mesh Smooth

I used the chamfer box as it automatically added rounded edges to the cube. I turned the object into an editable poly and deleted half the object to begin modelling one half and then when¬†I’m¬†finished I add symmetry to save time modelling and the bunny is symmetrical. Next I extruded the faces to make the ear and moved the vertices to shape the curved ears. The triangle flaps were also extruded the scaled on the x-axis to narrow the end. This turned out much better and looked more like the origami bunny.

The model used 508 polygons and 1,708 polygons with MeshSmooth turned on which is perfect as it remains in the 2,000 polygon limit for Juanio. The prop used will take up the rest of the polygons left over (example: nurse kitty has a nurse hat which takes 198 polygons with MeshSmooth).

The next step was creating the other 3 characters I designed.

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