DSDN 112: Project 2

Movie Clip
Final

Here is my final. With a lot of development from my original idea, I simplified my film a lot more than it already was. First off, I chose to advertise the app's new social experience. This would mean that people wold already know what my app is, and that this was just the new version that came out and is now the big thing on the market for students. I started off my movie with 2 stop motions, with 2 different locations in Wellington. Of course with my happy music from the very start as well. This lead to myself and my friend acting in front of the camera, making it look so easy to find each other with the new 'Facebook' integrated network in the app. It goes on for a few scenes with little subtitles throughout the whole film so there was no need for a voice over. After the acting scene between myself and my friend, the next scene was inspired from the Apple ads which is featuring my Dad. He says his wise words which leads onto my closing logo and credits. Enjoy the Clip!

DSDN 112: Project 2

Movie Clip
Music/Audio

I had a big look around for what would be the perfect audio I could use for the movie clip, as I wouldn't have anyone speak in it. I found the most perfect one on 'audiojungle' called 'happiness forever' which immediately sounds like a happy kind of soundtrack. I had to buy the rights to use this song for uni purposes, since it allowed me to have a regular license. Here is proof that I bought the actual song.

DSDN 112: Project 2

Movie Clip
Logo

The first name that popped up into my head when choosing a name for my app was that it had to have the name 'Vic' into it. Simply because it's short for 'Victoria' which is the name of the university itself. So, with a few thoughts here and there, I came up with the name for my app. VicConnect. It's perfect, needs no explanation because it speaks for itself. I added a little slogan at the bottom as well just as any other company would do, - 'connect to out world'. Also, here is my logo that I have created for it, something nice and simple.

DSDN 112: Project 2

Movie Clip
Storyboard

For our interim presentation for the second part of this project, we had to create a storyboard to outline our main idea for our film. The storyboard didn't have any limits so we could create anything we wanted to any style. Here is mine, with it's many ideas. It starts off with a time-lapse somewhere in Wellington, with happy music playing along with it. Then it leads to an Apple style ad with someone like Jon Ive to speak for it, as a voice over as well perhaps. It'll continue on to show how the app works and what features it has. It'll then move onto the next scene where I could go around and ask students what they think about the new app, and watch their reactions. My last idea for it was to incorporate 'Slenderman' to the whole film at the end, and how the app can save you and get you away from him safely. I've also replaced all the faces of the storyboard with 'Meme's' just to add some fun to it. These are all still working ideas and might be changed later on in the future.

DSDN 112: Project 2

Movie Clip
Research

Another idea that sparked in my mind which relates to my last research, was to make a spoof of my video. This video that I have showed below is a 'spoof' of the iPhone 5. The makers of the video thought it would be funny to 'make-fun' of the phone, and make a fake commercial or ad about it. I had a talk to my tutor about doing something like this and she acknowledged the fact that it would not be allowed to be lame, and it would have to be pretty funny and relevant to what my app is about.

Video Retrieved from: http://www.youtube.com/watch?v=XNBP18nrRdw

DSDN 112: Project 2

Movie Clip
Research

For this part of the project, we are required to make a short film/clip about our app and how it works. We can pretty much do anything we like just as long as it has our app in it. Which makes things a whole lot easier. The first idea I had on my mind which popped up straight away was to make an ad about the app itself, kind of like the ones that you see on TV. I researched types of commercials that are out there and found a few of the apple ones were a good example. This video is the official iPhone 5 ad, explaining everything about the phone itself. I was thinking that for mine if I choose to do it in this style, would be quite suitable but wouldn't want it to be this long. Just something nice and simple.

Video retrieved from: http://www.youtube.com/watch?v=u5X5cV-4LRo

DSDN 142

Project 3

Mouse Toy
Final

With my final, I developed my previous idea a little bit further by tweaking and adding a few things. First off, I made the canvas or page size a square and much bigger than it was before. This is because I chose to add a gravity factor to my code. As you can see with the video, it works the same as the last development idea I had, but this time every time you click the squares would start bouncing a different direction. You would still be able to spawn squares in either direction, with the first square always being there without disappearing.

Screen recording app: Screen Record Pro (purchased from Mac App Store)
Song used: "Contraband" by Boy Kid Cloud (purchased from iTunes)

DSDN 142

Project 3

Mouse Toy
Development

After a long period of experiments and hair pulling stress of countless and countless code that just wouldn't work, I managed to successfully develop this idea into what almost looks like a final. Originally I was thinking of having a reset button, but I thought what would be the fun in that? Just press a button and boom, starts all over again back to square one. Instead of that however, I set up the squares so that after a certain amount of bounces they would just fall from the bottom of the screen and disappear forever, with the exception of the very first square to stay of course. My friend who does coding up at Kelburn campus talked me through it and taught me how to add counts within my code so that the random generated squares would disappear after their time is up. I have uploaded a video below which showcases the process and interaction so far, I have also added music to it just as background noise since it was recorded straight from my laptop.

Song used - "Sierra Leone" by Mt Eden Dubstep

DSDN 142

Project 3

Mouse Toy

Development

My idea is to develop my recent sketch so that it starts off with a black box with a singular square bouncing up and down. This square will be flashing with rainbow colours which look great and contrasted with the black background. Taking the idea from tetris and the original code from the tutorial, I want to spawn more squares randomly with an interaction. I started off by using the mousePressed function to click on the bouncing square so it can generate more squares, but that was far to hard as the object was too quick to be clicked on and processed. So I changed this to mouseMoved which simply means I just have to move the mouse cursor through the shape to create more shapes inside the box. 

The images below were my earlier experiments using just plain black and white colours to show how this exactly works. As you can see it starts off with only one, then as the cursor moves through it the more squares spawn and so on. In the end you're left with a very noisy box filled with white squares with no where to go. It didn't get laggy for a while however, but after a few seconds it started to slow itself down. I figured a way to fix this would be to either add a reset button, or find another solution.

DSDN 142

Project 3

Mouse Toy
Development/Research

I researched around to what looks similar to my idea to gain inspiration from, and found that the game tetris could be a good influence within my interaction. I thought this because of the wide range of randomized colours and the fact that is uses squares/rectangles as the shapes within it. Of course mine isn't going to be a game nor will it move like the way tetris moves, but it'll have some of it's qualities expressed from it.

Image retrieved from: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRKMAKdjR8kNOfa4sgFihEKmgtfGyKUmo4CPNLfKvs6hoL6kkwLAHOuT7PtgoxlsGCpt39Tr6VygfYkRDrJKKNINNepHTgUiNxEnzxAdiTyWbtlRWXqXBh5N6jZy5Tw3vwyxfXVBvWNH8/s1600/fullscreen_tetris.png

Image retrieved from: http://i1003.photobucket.com/albums/af157/hostic/tetris.jpg

DSDN 142

Project 3

Mouse Toy
Development

Leading on from the last post, I decided that the plain grayscale colours weren't going to work, since they didn't stand out that well at all. With this one, I added R, G, B to it and randomised the colours so that the square would flicker through every colour as it moves. This is what it looks like and I quite like the look of it - 

DSDN 142

Project 3

Mouse Toy
Development

This is my idea, well the start of my final idea. I experimented with different colours and once again couldn't decide what to stick to, so I just chose white, grey and black for a start to see what it would look like if it were to change and flicker through all of them. This is what happened -

DSDN 142

Project 3

Mouse Toy
Development

Continuing from last post, I have experimented with the number of objects/shapes that are inside the box. I tried it out with just the normal 20, then 40, then 100 shapes bouncing up and down. I also chose to change it to a rectangle because the animation is much more clearer compared to an ellipse when it bounces, plus it looks a whole lot better. In the end, I found that i liked and enjoyed the look of all 3 sketches.

DSDN 142

Project 3

Mouse Toy
Development

I've been experimenting a lot with my code and what it does, and have decided to tweak it a little and develop it to something that would be more interactive and cool to look at. Instead of having floating bubbles, I had a look around and found that the tutorial -

"particleengine with sound"

on the

http://schoolofdesign.ac.nz/course/view.php?id=128 website

was something I found I could look at. I didn't focus on the adding sound part but I liked the way that the objects bounced up and down. I've taken a screenshot of what the code they have provided looks like, with a couple of experiments of my own below. The normal code consist of just 20 ellipse's bouncing up and down. I changed up the shape to rectangles and also inverted the colour to see which one suited more.

DSDN 112: Project 2

Navigation Interface

Final

I have created a quick video of my app being interacted by myself, to showcase it's features. This was quickly done on youtube, with the song "Navigator" by Eric Bellinger Ft. Mario & J Doe, which I thought fit in quite well. Enjoy!

DSDN 112

Navigation Interface

Explanation


The navigation interface that I have designed is built for any student needing help to get around the Kelburn campus. It is made for the present day, and is available on all android/smart/iPhones out in the market. It is a user-friendly downloadable app and requires the internet to be used. The grayscale effect within the app also makes navigating a whole lot easier, and puts a whole other perspective on how we view things to this day. The menu is set up to have self-explanatory icons which are easily recognizable throughout the whole application. With the current location marker on the map, users will find it a more efficient way of traveling. The map itself has features where you’re able to search a location which gets marked down showing the exact path to walk in. It allows the user to also enter street view whenever they desire, so that they know which way they should be walking. This app has now also added a social side to it, giving the user the ability to log into Facebook and see what their friends are up to. By adding Facebook to the equation, it promotes the app more for every student out there.

DSDN 112: Project 2

Navigation Interface

5 Screenshot Images

As part of the final hand-in, we are to pick 5 screenshots of the key steps within our interface. I chose:

1. The Sign In page, because it introduces the style to the user straight away, giving them the vision of what this app could possibly do and how it works. It is also very appealing being it is grayscale with a highlight of red.

2. The second part is the menu, of course. This stage is the most important because it will define how easy it will be for the user to navigate around the app. With self explanatory and easily recognisable icons, you can't go wrong.

3. The third part is the actual map of the campus. This step will help the user find their current location, add destinations, access street view, and search for a location. The avatar also moves wherever the user travels to make things a whole lot easier.

4. The search tab is the next one. By entering in any place around the Kelburn campus, the search menu will select relevant information and locations that fit the search, and will then carry on to mark the destination to your map.

5. Street view is the last important step within this app. It is because it lets students see what the inside of the building looks like, without having to even go there. With directional arrows to select ways to go, how could anyone get lost?

DSDN 112: Project 2

Navigation Interface
Contact Sheets

These are all the pages and slides that I have put through for my final. If you are wondering why some of them look similar to each other it is because I have put time and effort to making the details. Like each letter being typed in the username and password box, or when searching for a destination. There are also ones where the button has to be pushed twice to make it glow then switch screens. But when I have put it all together in flash it looks good.

DSDN 112: Project 2

Navigation Interface

Research

These were some of the photos I took at the Kelburn campus so that I can use them for my final presentation. I got some good shots, both outside the buildings and a couple inside the library.

DSDN 112: Project 2

Navigation Interface

Interim Presentation

Aside the normal presentation requirements, I went an extra mile to screenshot every slide and put it directly on my iPhone, just to show what it would look like in real life. When looking at it on the phone compared to the print-outs, it actually looks like the app is real and useable. Thumbs up with that!

DSDN 112: Project 2

Navigation Interface

Interim Presentation


For my interim presentation I combined 2 of my concept ideas, the iPhone app that showed the actual map and your exact locations and the other iPhone app that shows the street view. This idea is similar to  google maps but I've integrated it to suit the needs of a student in uni. So the first stage is the login screen, this pops up when you open up the app. This brings you to the sign-in screen where you can either use your custom username for the actual app, or to login with Facebook. I showed myself logging in to Facebook, entering my email and password. After logging in, we are brought to the main menu, with the list of contents there and my name with my Facebook profile pic showing. So the user then selects the 'Navigation' button and away we go. With the screenshots I have taken it is pretty self explanatory on how to use the app, as the instructions are on screen. It allows you to see your exact location, and then type a location for your desired destination. After the destination is selected, it will then appear on screen, with a red line from point A to point B showing the path to get there. Being it is an overhead map, it is pretty self explanatory as well on which way to walk, since your red avatar follows you everywhere. Once you get to your destination, you can then switch it on to "street view" and look at how the place looks like from inside straight from your phone. When in street view it also shows arrows going in directions where you can select and the map will follow. There are also other features I would like to add in my app like messaging within friends, and changing the theme colour. I will look at doing this for my final design.

DSDN 142: Project 3

Mouse Toy
Research

I was shown this video in class after explaining my idea to my tutor, he had asked me what bubbles look like when they pop and I originally thought it just..well pops. But this slow motion video shows a bubble popping and the way it breaks is it starts from side and follows around to the other side. I am going to attempt to do this for my code as it will look cool if I can pull it off.

DSDN 142: Project 3

Mouse Toy
Experiment

I have developed my idea a lot more compared to my last experiment. This time I made the background lighter than it was, it's easier on the eyes in my opinion and more appealing. I kept the floating bubbles there as they are the ones that you have to click and pop, but this time I added something kind of annoying and more challenging for the user. I have added a few decoy bubbles that fly the same speed as the mouse pointer, to distract the user from clicking the bubbles. I haven't quite figured out how to code it so when you click the bubbles they explode, but I have figured how to change the colours of the bubbles every time you click. They switch from black to white which makes it even harder for the user. It is still a work in progress but I can finally start to see some real development within my work.

DSDN 142: Project 3

Mouse Toy
Experiment

This experiment here is reflected on the last research I did, where the background was black and there were glowing blue shapes floating around. I got the background right, the shape right and the floating right but it was hard to make it glow since I'm not that advanced yet. So I just made the opacity of the ellipses see through so it gets layered. 

DSDN 142: Project 3

Mouse Toy
Research

I found this cool process which inspired me more about bubbles. It's called "bubbles" (original I know) made by 'takumi'. I had a look at the code it doesn't look too simple compared to what it actually does. There's no interactivity in it at all, all it is is a blank black page that have floating bubbles going up. But what caught my attention about this one is the colours of the bubbles. They really stand out when its glowing blue with a black background. I could experiment with these colours and see if they work out alright. 

Process found at - http://www.openprocessing.org/sketch/8532

DSDN 142: Project 3

Mouse Toy

Experiments

So I started off with making a blue canvas to signify that it's underwater. Then I played around with random effects so wherever your mouse pointer goes in the page, the bubbles would follow, and the bubbles would also change from black to grey to white. The actual flow of the movement is very good, it slowly follows the pointer just the way a bubble flows through air. I'm happy about that especially for a starting point. Now to experiment with different colours and more/less shapes.

DSDN 142: Project 3

Mouse Toy

Research

My concept / My idea

Bubbles.

Yes. That is correct. I want to work with bubbles. I find them fascinating. Just the way they float around in the air captures my attention. I got this inspiration in class one day when I watched a bunch of students colleagues blow bubbles around with this little bubble blower. It made me think of how we interact with bubbles and how they move, how their shapes differentiate, what colours they form...

So my idea is I want to have bubbles fly around the page, which interacts with the mouse movement. The point is to pop all the bubbles of course, and my idea was to actually click on the bubbles and then it gets bigger and bigger then pops! Whilst this is happening I want to add like a slow-mo effect to it as well, I'm not entirely sure how that's possible but it would definitely add to it.

Bubbles make the world go round.

Image retrieved from - http://twilit.files.wordpress.com/2008/03/bubble.jpg?w=976&h=877

DSDN 142: Project 3

Mouse Toy
Research

This one I found enjoyable to use. It's called "sketching boxes" made by 'anitplastik'. The first thing that pops up when the application is loaded is the new added border within the design, it's got like a cartoon style to it and occasionally moves around. How this interacts is that you use your mouse pointer and pretty much draw a shape as you normally would on any computer. It only makes rectangles/4 sided shapes but has gravity applied, as you can see with the interaction I did below. Eventually, each box piles on top of each other until the page fills up. Very easy to use, but at the same time is fun.

Process can be found at - http://www.openprocessing.org/sketch/769