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 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

DSDN 142: Project 3

Mouse Toy
Research

This one that I found is called "Cells" made by 'Don Havey'. It's name does give it away straight away once the application has loaded up. There's also not much interactivity that goes within this, all it is that the mouse pointer controls one of the cells where we can move it around freely. The thing I liked about this one is that it is very fluid, and it runs very well. There's no lag that goes on between any of the cells created and it just keeps moving by itself in different locations. I could somehow incorporate this into mine simply because of the swift movements within it.

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

DSDN 142: Project 3

Mouse Toy
Research

Like all of my previous projects for coding, I visited the http://www.openprocessing.org website for inspiration and research. What I'm looking for are process applications that are interactive and are fun to use, ones that fit in the description of my project and ones that capture my interest.

The first one that came across was called the "Ragdoll Aquarium" made by 'Jared Counts'.
It is pretty self explanatory where you get a space full of little ragdoll people, and they react when you swipe your mouse pointer while holding it down around the screen. I found this very entertaining and although it is a one trick pony, couldn't help myself but play with it more. 

Process found here - http://www.openprocessing.org/sketch/22598

DSDN 142: Project 3

Mouse Toy

This project unlike the previous 2, explores an area that is unique to computer programming, which is digital interactivity. In other words, it requires the movement of the mouse. In this project I am to create an interactive application that engages the user in a fun and unique interaction. To do this I'll need to explore the difference between control and interaction. 

Lecture 13/9/12 Notes

3 important things to learn

- what is the person learning from this interaction?
- how long will it take a user, to completely learn this system?
- will it still be interesting once they've learnt it?

The actual project outline can be found here:

http://schoolofdesign.ac.nz/pluginfile.php/4752/mod_resource/content/1/Project%203%20outline.pdf

DSDN 142: Project 2

Structure and Noise

Final

For this project, we had to create a a form that entails an exploration of structure, processing it into noise. We had to learn and understand the difference and the relationship of structure and noise and incorporate this into our final images. For my final, I developed my idea of the sound waves of music subsuming it with structure and noise. I started off with little squares that were perfectly far apart from each other, same size and same colours. There were also hundreds of bigger squares with a blue stroke behind it to create the straight line going across. I have also added extra circles behind all of this to decorate it more, and to add texture. They aren't the main part of my form so I lowered the opacity of them quite a bit and is only clearly visible throughout the end. Moving right along to the second image, we can now recognize that it is a sound wave, comparing it back to the first image. The second one though is when the I started to slowly break up the form that it is in. But this stage is what I like to call 'the calm before the storm', simply because that's exactly what it looks like. 'The calm' is describing the part where it is structured, it is a constant beat without too many things going on. Leading onto the next image though however, is when we can notice a big difference between this one and the first 2. This is the start of 'the storm'. I blew up all the squares a lot bigger randomising the sizes and positions that they would go in. I then repeated this process with the last image too but now it is completely unrecognizable compared to the start of this process. This is, 'the storm'. I liked how the grey squares all layered on top of each other, and being that I made it so it has an opacity really did help with the effect. We can now see in the last image that the circles have appeared as well, adding to that texture of it. With the research that I have done, I did end up incorporating the colour blue to it, since it's the colour we recognize with music. I am very pleased with my final process, since it's something that looks awesome and something that makes sense to me and I can relate to. We look at the big picture and we can see that there is a song playing. It starts off with a calm and constant beat then all of a sudden it changes completely and the 'drop' (dub step reference) comes in.

DSDN 142: Project 2

Structure and Noise

Research
Colours

http://vikiworks.com/fave/data/images/2009/11/4094470768-36760a8c9e.jpg

The last part of the research I looked into for my final model was the consideration of colour. For this project, we have to incorporate colour into it unlike project one where it had to be black and white. Since my theme or style to my final is to do with music, I researched around to what colours are associated with music and sound. But I could tell from my earlier research from searching up 'music visualizers', I discovered that the majority of the colours used were blue. In one of my post I noticed that the three images I had uploaded were all blue. So I also had a look at music players and what colours were in them. I looked at the 2 main ones people used and that was iTunes and Windows Media Player. To my surprise, they both had a default theme of blue! The iTunes logo had a blue musical note on it and the menu and selected items were blue. This was the same for the Windows Media Player as well. So there's no doubt that my final process will have blue in it.

http://www.maclife.com/files/u58/itunes2.jpg

http://cdn.freewaretools.net/wp-content/uploads/2010/12/quuxplayer.jpg