Musing out the interface idea

Handwritten notes

Interface Idea

Features I am thinking of for my interface

I re-watched the  TEDtalk with Aris Venetikidis who redesigned the Dublin public transportation map and jotted down a few notes this time, including what I would like to achieve with my navigation interface design. He pointed out that we all carry cognitive maps around with us. These are virtual maps we create in our brain for navigational purposes. So when you have travelled a route for long enough you build up an image of that route in your brain that you then use anytime you navigate that route again. This does away with the need to use a map. When you are new to a place however you need to make use of existing navigational aids and a place like the corridors of the uni building would take a while to get used to and in the beginning are horrible to navigate, its like being in a rabbit’s warren and there are few markers along the way and not much in the way of navigational landmarks. So an interface to help you navigate your way around the  maze of corridors would be quite useful.

Back to the idea  of cognitive maps, Venetikidis states that our minds move along linear routes so when we create these maps we typically start with a main street, we straighten out any kinks or bends in the street and the other streets we add to the map so they are all straight lines. When we come to a turn it gets adjusted to a 90 degree angle. We also fill these cognitive maps with “markers of meaning” where we attach meaning and emotion to things we see along the route. We recognise these landmarks by the experiences we have with them and abstract them into symbols, much like the ones you find on printed maps. We also communicate these cognitive maps to people in the same way we see them in our heads. What you will find with these cognitive maps is that compared to a printed street map the distances are way off, everything is much closer and anything that isn’t important for getting from A to B is omitted. Venetikidis says they are more like schematic diagrams than maps. We use the visual constructs of lines, dots and letters, the language of our brain.

What Venetikidis noticed about successful transportation maps was that information was simplified, omitting less important information and they used extreme geographic distortion, so where something was on the map was not where it was in reality. His map made use of symbols and isometric 3D drawings for important buildings and a balance between actual and simplified representation.

Some ideas I had for my interface after watching this were:

• the typical views found on map apps today, so street view, hybrid and satellite views.
• a more simplified view that gets rid of any unnecessary information.
• a customised view, one that the user of the app can draw up by tracing their route along the map, adding in landmarks, deciding what is and isn’t necessary to their ability to get from A to B.

Figuring Out Collision

I am trying to get my head around making my eyeballs collide with each other. I plan to get them all colliding first before I add in the conditions about opacity affecting collisions. There is a section in chapter six on page 143 of Algorithms for Visual Design (2009) that covers basic collision simulation. I am not even looking at anything to do with physics at the moment. The fact the eyeballs are in space probably doesn’t warrant worrying about it too much anyway.

Back to coding colliding eyeballs…. I am going to try to put what I think needs to happen in order for the eyeballs to collide into based on what I have read. I’ll modify anything I get wrong after I have found some other information on creating collisions, then write-up some pseudocode and attempt to code it.

What I get from the AfVD book on collision is that first I need to identify if two objects, in this case eyeballs, are “touching” each other.
So I need to find the position of one in relation to another one so the distance between the xy axis of them can be found. To do this I need a current element and then loop through the other elements to see if one of them is in contact with the current one and find the distance between the current one and the other elements, using the dist() function so I don’t have to worry about coding crazy math equations to figure it out.
So I have an array of eyeballs already, called Sprites at the moment and I need another array to hold all but the current eyeball for the comparison bit. The code in the book makes use of an ID to identify the current element thus differing it from the other elements so it can be compared against them. Is there another way to do this? I’m not sure I entirely understand this bit.
I think I’ve misunderstood what the code is doing. According to the book I need to assign an ID to the current element and all the other elements are held in another array so that they can then be compared against the current element to determine the distances between them and it.
If there is one within the right distance, in this case twice the radius then the angle of approach is calculated using atan2(). I have no idea what this function does and I don’t get the book’s explanation of it. Something to do with returning the “angle between a line passing from the point and the origin and the x-axis” (pg144, Terzidis, 2009) by taking the difference between the x & y coordinates of the two elements. The angle returned is used to figure out the position of the elements after the collision which is used to reverse the direction of the two elements so they look like they are deflecting off one another. But I need to look a bit further into this bit of code as I don’t think I really understand it. Particularly the trigonometry.

Eyeballs and what to do with them…

What does one do with eyeballs floating in space? That’s all they are doing at the moment while they wait for me to decide what I plan to do with them.

I think I need to add in some collision detection next so that eyeballs bounce off each other. Because the alpha values are randomised for the eyeballs, I plan on making it so only those eyeballs in a certain alpha range bounce off each other. If they are below that range they will pass through the eyeball they touch.

I am also thinking about getting them to slowdown either as they get older or when they get a certain distance from the mouse pointer…

This guy, Abe Pezos, on YouTube is fantastic for learning about processing: http://www.youtube.com/user/hamoid. Heaps of lessons on animating objects in processing.

I have also been using a few book resources to help with my learning of processing.

• Algorithms for Visual Design: Using the Processing Language by Kostas Terzidis. (from A&D library)
• Getting Started with Processing by Casey Reas & Ben Fry. (Kindle e-book)
• Processing for Visual Artists: How to Create Expressive Images & Interactive Art by Andrew Glassner. (Kindle e-book)
• Learning Processing: A Beginner’s Guide to Programming Images, Animation, and Interaction by Daniel Shiffman. (EBL e-book)

Can find information on all these books at http://processing.org/learning/books/.

Two functions that I am thinking of using are dist() and lerp(). I will be using dist() to calculate the distances between the eyeballs so that when they touch and if they are almost opaque, then they will bounce off each other. The book by Terzidis covers collision detection and what the objects will do when they touch, so I will use that for help with the bouncing off each other bit.

I could use lerp so that the iris and lens of the eyeballs follow the mouse and to control the speed when they move closer or away from the mouse.

Eyeballs

I played around a little with my code to make the ellipses look like eyeballs floating around in space. Hopefully it looks slightly unsettling as they move around and gradually build up in numbers. I thought it did the first time I ran it. As for interaction, I think there is a number of possibilities. I could make the eyeballs look like they follow the cursor the way our eyes follow objects and then have them start to crowd around and follow it by floating after it. Perhaps the user could flick them away and they could look like they are disappearing by moving away from the cursor and getting smaller till there is nothing left of them. I have randomized the alpha value in color() and think it might be good if the eyeballs either bounce off one another or seem to float through each other like ghosts, depending on the alpha value. I’m wondering about making the pupils look like they are dilating….

Screencast of work so far

Best to watch full screen in YouTube so you can read the code. Full screen doesn’t want to work on this blog.

Thoughts about the Interactive Mouse Toy

At the moment my code doesn’t really do anything. I am quite happy with keeping noise as the default movement for the ellipses.

I need to modify the code though as they disappear and get replaced too fast. It looks like they flicker rapidly at the moment. What the code is actually doing however is removing the first element of the arraylist when the size of the arraylist becomes greater than 10. So there are always ten to eleven ellipses present on the screen.

I wrote some test code for filling the ellipses with random colour and alpha values, but because I wrote it in the arraylist for the Sprites, the ellipses keep changing colour and opacity. When I moved the code that handles the colour and alpha values to the display function in the Sprite class however, the same thing happens. So I am not exactly sure why it’s doing what it is doing.

Final Thoughts on the Design

I tried to keep the materials used in this project simple and in keeping with each other in terms of complimenting each other in tone, colour and materiality.

The linseed oil bought out the beauty in a plywood that was cheap to buy because of its specified use for shelving. I think I have managed to make it look like it was as low-cost as what it was and it had some beautiful grain patterns in it to start with that all I really needed to do was to choose where I cut wisely, sand it till it was as smooth as possible and apply several layers of boiled linseed oil to bring out the grain and give it a beautiful warm golden glow.

The lighter colours of the aluminium rods and the ply contrasted nicely with the black matte of the mounting board.

The use of a light coloured middle layer for the walls was a deliberate choice. I wanted to mirror the layering inherent in the ply and break up the heaviness of the black. The decision to use three layers of card was based on feedback from my tutor Steve about making it durable so that it  could withstand users getting in there and really trying to feel the object. The use of PVA was for the same reason as it is supposed to make the multiple layers stronger than if I had used a different adhesive. I do however have concerns that the type of black card I used marks a little too easily for my liking.

I settled on black stocking material for the barriers at the holes as it was matte in appearance like the mounting board, it had just the right amount of stretch and wasn’t too thick to inhibit the ability to feel the object too much. It also had just the right amount of opacity to still let some light in but prevent users from seeing the object until they opened the door and it prevented them from peering in to see how they were doing at sculpting. My only concern is that stockings aren’t known for their long-lasting durability and they will deteriorate over time.

I used brass rods over aluminium ones for the heart as they were thinner and the colour went nicely with the red of the heart. When it came to colouring that heart I could have used a pigment which would have made it opaque but I felt the dye held true to the origins of the heart, namely a glass bottle and it really does look quite beautiful in the light. I love that you can see the rods through it and the brass compliments the red nicely.

All in all I am happy with how my design finally turned out. I feel I have kept the materials and the use of them quite simple and I am glad that I decided to show not just the natural beauty of the materials but also the design process over disguising or hiding any of it.

Would I add improvements to the design? Damn straight I would! In fact I plan to over the summer holidays. I would still love to have interchangeable hidden objects stored in their own little boxes and then slotted into the object box without being seen. I would like to make the object box more modular as well so that the difficulty level could be ramped up that way as well as with increasingly complex hidden objects.

It would be good to make it so that the hand-holes can be changed, either for ones with no barrier  layer or with different types of barriers such as latex and rubber. That would also solve the issue of the gradually deteriorating stocking material as it could just be replaced when worn out. I am think of them being slid into place. The other option would be to have the objects in barrier sleeves but I can see issues with that such as seeing the object after and once again what to do when the material around it deteriorates.

I have also thought about adding mobility to it. Maybe it could be designed to fold up when not in use and maybe I could make the hidden object box spin round easily in one place  and then be able to turn another base layer that easily brings the sculpt box to where you are. All just possibilities at the moment to mull over in my subconscious until I have the time to work on it again.

I have really enjoyed doing this project. I loved trying to figure out solutions to problems I was having with the design and getting feedback from my tutor and my fellow students was always useful. I am glad I got the chance to finish this project. Though having said all that, I really struggle with the blogging aspect. It always seems time-consuming to me and I have the problem that once I have thought about something or done something I feel I finished it and to have to then sit down and write about it feels like I am just going over ground I have already travelled. I do understand how important it is to blog about the process while in it as it is a vital way for our learning facilitators to see what we are doing and give us feedback about our process. I guess it is something I will just have to work on.

Adventures in Box Making (The Conclusion: part two)

Adventures in Box Making (The Conclusion: part one)

In order to have a finished looking project, I made a stand for the user-created models to sit on and another box to house the plasticine. The stand was just a simple linseed oiled ply rectangle and I constructed the box from the three-layered card, linseed oiled ply, metal and thread. It was rectangular to go with the stand and I added a lid to keep the plasticine intact. I decided to keep it a simple rectangle as opposed to making another hexagon as I felt that a rectangular box looked more classy, the plasticine would fit in nicely and because its use differed from that of the hexagon-shaped boxes. The use of the same materials as the hexagons indicated the relationship between the different shaped objects. I kept it simple for the lid and the closures by using the same dumbbell shaped fittings as I used for the object box’s handle. I drilled a hole into the lid and glued one in as the lid’s handle and then used short ones at the back to attach the rubberized thread and slightly longer ones at the front to catch the straps of rubberized thread.

Adventures in Box Making (The Conclusion: part one)

Adventures in Box Making (The Hiccup)

I took everything I learnt from the earlier box-making and did it all differently from that attempt. Consequently, things went much better this time round. I was more methodical in my approach and plan better on how to approach the problem, thereby creating a better design in the end.

I decided to reuse the wooden bases and tops from the previous boxes as they were still in pretty good condition. All I had to do was fill the holes with some wood filler, give them a quick sand down and apply more linseed oil. I used boiled linseed oil on all the wood to protect it and bring out the grain. I re-drilled the holes for the rods making sure they were slightly smaller in diameter than the rods for a snug fit. I decided to cut new rods for both boxes using the thicker ones for both boxes this time and hammered them into the bases.

This was how I was able to build a hexagon template using a ruler and a compass: http://mathworld.wolfram.com/Hexagon.html

I took measurements of the distance between the rods and drew up the dimensions for the sides of the boxes and the hand-holes one of the pieces of black mounting board with a 5mm margin between each side to allow for clean cutting. I then cut off the surplus card and stuck double-sided tape to the back surface of the drawn up board. I also applied double-sided tape to the middle layer for the sides and then sandwiched the three layers of card together so I could cut them all the hand-holes as one. I cut the holes with straight as opposed to curve lines this time as it left a neater finish and was a lot easier. Once the holes were cut I unstuck the layers and drew up the lines I wanted to cut out of the middle layer to accommodate the stocking material.

Now I could start on gluing the layers together with wood PVA this time round. The solid walls were easy as I glued all three layers together as one; piled books on top of the layers and left them to set for 12 hours before cutting. For the sides with the holes, I glued one of the black layers and the middle layer together and did the book thing again. I then diluted the PVA with a little water to make sure it soaked into the stocking fully. I then glued the stocking to the black layer so that it was flush with the middle layer. I had to use little map pins to stick the stocking to the card so it didn’t lift. It took forever to dry because I had put a bit too much water in the PVA and used too much PVA. I ended up buckling the card a little with the extra moisture. After this had dried I glued on the last layer; booked it and then cut it when dry. This worked out to be more effective than the way I had previously done it.

I added some paper fasteners as latch fasteners for the door on the object’s box. I decided to do an all card design and because I was attaching the card to the rods using thread it meant they had enough move-ability  for one of the solid walls to act as door. Better looking than the wood one. For the door I also used a metal bar thingy as a handle by cutting a small hole out of the door, screwing the bar together and gluing the back of it to the inside of the door. I decided on stretchy rubber jewellery thread to secure the door to the box, so that all that the user needed to do was pull out and up to get it off the paper fastener.

I drilled holes down the sides of the walls for the thread and proceeded to attach the walls to the rods using waxed black thread. I had to attach all the walls on loosely before tightening up the thread because the space between the rods and the edges of the walls was too small to fit a needle through without breaking the needle in the process. Once this was done I could hammer the tops of the boxes on, obviously using a piece of scrap wood as buffer and only hammering lightly. Then I stuck the heart in the object box.

I took a different approach to putting the heart in this time. Instead of attaching the brass rods directly to the base and top, I attached them to a couple of small blocks of ply and then epoxy glued the blocks to the top and base. This meant I could make the brass rods slightly shorter than the height inside the box and by sliding one of the ply blocks further down the brass I could then add epoxy to the base of it then push it up to join with the base.

Adventures in Box Making (The Conclusion: part two)