Project Three: Final Mouse Toy

Below are 5 screen shots of my final mouse toy. For this mouse toy I have based my interactions on distorting and manipulating patterns. I have used bright colours and made it so that the colours are continuously changing colour. I think this makes my mouse toy look quite pretty. I have ended up with two main interactions. The first interaction is using the mouse pressed function. When left clicking the mouse somewhere on the screen. The circles around the area you clicked draw together to form a bunch of circles the lines also draw in to that point. The second interaction is using the mouse dragged function. When you right click and hold down the mouse and drag it around the screen. It moves the pattern around and deforms it more. I have also made it so that you can reset the pattern at anytime by using the key 'c' to clear the screen and take it back to the original pattern.

Project Three: Interaction Development

I have tried using the interaction of adding shapes again like I previously had except this time I have just made the outline of the shape and it is controlled by dragging the mouse around the screen rather than clicking. I really don't like it. It looks to busy and takes focus off the other interaction I have which is far more interesting. I think if I could get it so that the adding of shapes is used to 'erase' parts of the pattern this could look more effective and would make better use of the interaction.

Project Three: Developing The Visual

I have managed to create something that I think is visually pleasing and looks interesting. Choosing to take the fill out of the rectangles has definitely made a huge difference to the appearance of my mouse toy. I am very happy with what I have here. You can clearly see the pattern that I did have and can see that I have just developed it a little more. I think I am going to now try and add in one more interaction as I still have a bit of time left. I think I am going to revisit the interaction of adding shapes again to see what it looks like. 

        

Project Three: Development Of New Interaction

I didn't like how the pastel yellow colour was so overpowering in my first attempt so I thought that I would try and swap it around. I have now made the circles the pastel yellow colour and the rectangles filled with a colour palette that I have specifically selected that changes randomly. I find this quite interesting but at the same time it gets quite messy. I think I am going to try and make the interaction with giving the rectangles no fill and just having them outlined so that you can identify my pattern more easily. I am getting there slowly. The code I found online has definitely been a great help.

    

           

               

     

Project Three: New Interaction

After loosing my code and having to start again I have finally started working on developing my code. As I don't have long to go until hand-in I have decided that I want to focus on getting an interaction going that allows the user to distort or alter the pattern/ image infront of them. Using the code I found on the OpenProcessing site called Radiolarian I have used it along side my own code to re write mine so that it uses P vectors that then means I can distort the shapes. I have changed the size of the shapes within the pattern but kept the colours all the same. I have also managed to make it so that the circles in the pattern are constantly changing colours by themselves  I have chosen to do this rather that having random coloured squares being added when you click. Visually its not that great but the interaction is quite cool. It is because the rectangles are filled it makes it hard to distinguish them with the vectors that have been added to make the interaction work. 

   

 

Project Three: Helpful Code For A New Interaction

I have decided to start researching into how to do another interaction. I would really like to create something that allows the user to distort or manipulate the image/ pattern on the screen. I have found an example on OpenProcessing which is quite cool and if I could somehow use this to help me add this into my own interaction that I already have or vice versa I think it could like quite effective. 

Radiolarian Grid 1 : Open Processing

Click the image to follow the link to the application on OpenProcessing.

Project Three: Progress Update Two:

I have finally worked out how to stop the grid of circles changing colour as I click the screen. I now have it so that the grid stays the same colour and when you click just squares are added. I have experimented with using both squares and circles as I found just using circles a bit too boring. I have also started to experiment with using a more pastel colour pallet which I think is more effective and changing the stroke weight and colour to create layers and contrast. Overall I am feeling a little bit more positive about this project. I am still behind but atleast I have code again.

One:

Two:

Three:

Project Three: Progress Update

After playing around with the code some more I have managed to get a grid of circles and get the interaction back on adding different coloured circles when clicking the mouse. I do still however had the same coloured circles each time in the grid and when I click the grid of circles change colour still too and then added circle changes to that circle too. I still haven't worked out how o change this but atleast I have a grid and the interaction of circles being aded back again. i am making some progress.

One:

Two:

Three:

Four:

Five:

Project Three: Slowly But Surely

After loosing all of my code on both the school computer and my usb as the files went corrupt I have finally managed to re write the code that I had done earlier with my tutor. It has taken me a very long time to figure it out but I have managed too. Once I got the code that I originally had back again I wanted to change it so that I had a grid of circles rather than just one circle. I have managed to get a grid of circles to display but for some strange reason when each time I click the mouse all of the circles in the grid change to a new colour and they are all the same rather than when I click, different coloured circles are added. I am not to sure why this happens, hopefully I manage to work it out soon. I am starting to freak out that I am not going to be able to do this project. However I will not give up yet!!

One: 

Two:

Three:

Four:

                     

Project Three: Pseudocode

Initial Screen()
{

No movement.
A grid of circles is visible in random bright colours.

}


Mouse Hold And Drag()
{

Hold down on a circle
Drag mouse in any direction while still holding down.
That point of the circle is altered.
The circle shape is now different and had been changed.

} 


Mouse Click/Hover ()
{

Mouse hover on a circle.
Mouse hover on a second circle.
The two circles blend together and become the same colour.

}


Mouse Press()
{

Click anywhere on the screen and a new circle is added in a random bright colour.

}


Mouse Hold And SHake()
{

Hold and shake the mouse.
Circles move around the screen and bump into each other.
Stop holding and shaking.
Circles stop moving and freeze in new position.

}

Project Three: Procedural Task Diagram

Procedural Task Diagram:

Project Three: Description Of My Project

The mouse toy which I plan to create is inspired by three of my favourite things, pattern, colour and shapes. I have chosen some of my favourite images that combine these together to help me generate some ideas. I want to use a pattern made of one shape repeated but differing in colour that with then get manipulated and transformed. I have chosen to use circles as the shape and from this I am having them in a grid. The circles are coloured randomly but none of them will be primary colours. Each colour will be bold and bright. I want them to be this way because I like colours that have been mixed rather than taken straight from the pottle. Also the bolder and brighter the more interested I am in the image or object infront of me. Bright colours capture my attention. Using this basic image of a grid of circles I want the user to be able to interact with it in different ways and manipulate and change the images appearance and composition. 

Ways that the user will be able to interact with it are: 

- When hovering over one circle and then another the two colours will blend to form a new colour. the colour won't necessarily be what they expected it to make. 

- When you click on the screen somewhere a new circle will appear. Each time you click the circle will come out as a random size and colour. 

- When you double click on an area a light will shine over the circles in that area. The lights will shine in different colours randomly.

- When you click on part of a circle and then move your mouse in any direction it will adjust the shape of the circle accordingly.

- And finally when you click and shake the mouse the spots bounce off each other while you are shaking and once you stop they will freeze in that position. 

Overall combining all of these components together I think the user will have fun. The bright colours that are shown make the image look fun and playful and once you start to interact with it you can have fun manipulating and changing the image... atleast I hope the users do!

Project Three: Addition To StoryBoard

StoryBoard Add On:

Here I have come up with an extra interaction that I would like to try and use. I think it will bring a fun factor to my mouse toy. I am aware that I have quite a few ideas. So I plan to do some research to see what interactions I can manage to work out how to do. I think I will take away some of the others to allow time to do this as I think it is more effective and offers a lot more than some of the previous ideas that I have mentioned, for example the light idea. 

Project Three: Putting My Ideas Into Code

After showing my tutor the code I found and what I managed to create the comments I received were that It looked cool but the code is quite difficult to work with and it was suggested that I start again rather than trying to modify someone else's code. I coud still create something similar but using easier code so that I can understand whats happening more. This was what I was expecting to hear. So with some help I now understand the concept of arrays and applying the basic skills that I have already learnt, I now have a basic starting point. Below is an image showing some screen shots of what I have so far. At the moment I am focusing on just getting the interactions working. Once I have this working successfully I will then work on applying them to a whole grid of circles rather than just two. 

Starting Point:

So far at the moment I have two circles that when I hover over one and then the other the computer will detect what circles they are. I have done this as the first stage to the interaction of making two circles blend together. The second component that I have done is that when ever and where ever you click on the screen a new circle will appear in a random colour. 

This is just the very basics of my idea and I do want to develope it a lot more. Things that I hope to do with these interactions is use brighter colours and when creating new circles have them coming out at different sizes. Also instead of just having to circles to begin with I would like to have a grid of different sized circles that would create an overall pattern.

I am feeling slightly more positive about this project now that I have something even though its not a lot.

Project Three: Code Developement

After deciding on what it is I would like to create for this project, I did some research into ways I could approach what I am wanting to achieve. I went and had a look on openProcessing at some examples of patterns that move and change in colour using the array function. I found two examples of the type of thing I would like to be able to create as a starting image for this project. I have gone off the idea of having a really complexed pattern but instead keeping it very simple. If I find at the end I have time, I will consider going back and creating a more detailed pattern that I can use instead.

The two examples that I found are shown below, if you click on the image it will link you to the site. 

Example One:

Example Two:

In both of these examples I really like the use of colour and how the colour contributes to the overall pattern. I also really like hoe the colour changes randomly in the first example and the lines of colour move and overlap in the second colour. It is this sort of effect that I would like to create as my backing image.

To help me with this I downloaded the code for each of the examples. I thought that this would be useful and help me a lot with making my own code. How ever it did not end up working out for me.

Instead I found that the code was to complex and I didn't understand it at all. I did manage to play around with and create a couple of effects that I like but I know I will not be able to use them as I just altered the code that I downloaded. I am hoping that with some help from the tutors I will be able to write my own code and do something similar to one or both of these examples. Below are some screen shots of my attempts.

My Attempt Of Example One:

Here I have managed to change the shape used from a square to circles. I have altered the number of shapes that occur and the the colours that it will produce. This is all that I have changed from the orignal code that I downloaded.

My Attempt Of Example Two:

In the above image I am showing some of the stages that are shown through out the little interaction that I downloaded and altered. The alterations that I made were: I changed the shape from triangles to lines. I changed the output and input aswel as the colours that would be produced. I also played around with the angle in which the lines would be drawn and the direction they would go in. Something else that I managed to work out was how to alter the hue and saturation. This example also used mouse press to control the addition of new triangles. I decided that I didn't like this attempt as much as the other one and didn't think it would be as effective as a starting image.

Project Three: Initial StoryBoard

StoryBoard For Project Three:

Project Three: Ideas Ideas Ideas!!!

After doing a brainstorm on the things I love and am interested in I have found a few things in my room which I have made myself and use colour, pattern and texture. Below are some photos I have taken of them. I thought that creating a image using code similar to the ones below would make a perfect starting point for my interaction.

Image One: Series Of Canvas Art:

Image Two: Patch Work Cushion:

Using these images as inspiration for a starting point. I visioned that using the mouse and keyboard you could create new things and alter the image. Some of the ideas that I have are: 

- When moving the mouse across the screen the colours would start to bleed and blend together creating a colour that you would not expect it to make. For example yellow and blue making purple instead of green. 

- Pressing any of the letters on the first row of the keyboard would change the pattern or combine the different textures and patterns in a new way. 

- Right clicking on the mouse on a specific part of the image would explode that segment and turn in  into graffiti or splatter everywhere. Another segment that is clicked might bubble and then dissolve. 

- I also that when the user draws something on the screen with there mouse, the computer draws something else or draws what the user wanted but vey slowly and leaves a trial rather than just lines.

These are just a few ideas that I have had. I am not to sure how hard this is going to be to achieve or if it will be suitable. I am hoping that after todays tutorial I will have a final concept that I am going to do so that I can do a final plan and start making the code as I know this is going to be something that I find difficult and will need to allow a lot of time to complete. 

Project Three: Stuck For Ideas

Today we started brainstorming ideas for this next project. At the moment I am just stuck for ideas and am struggling to come up with an idea that interests me while fufulling the brief. I was asked what I found interesting. My response was bright colours, textures and patterns. I have been encouraged to brainstorm and come up with some basic ideas that uses colour as the interesting factor. To start me off I have done a brainstorm of everything that interests me and that I like about colour. The brainstorm is shown below.

As well as this I have found some of my favourite example of why I love colour, pattern and textures this os to help me start thinking about what they all have in common visually and what it is I can take from these examples into my project.


Patched Furniture:

I love the use of bright colours and the different patterned materials used. It is so random but together looks very quirky. It is this kind of composition of colour and pattern that I just love. It is so fun and has a feel good mood to it. 

Patched Furniture Two:

This is just another example of the above. I love this furniture so much. It combines all of my favourite things into one.

Mixed Textures:  

This is an image combining different patterned materials to create texture and aslo showcase colour. This is just another example of the kind of aesthetic I love and tend to go for when picking things for my room or just inspiration for my own work.


Coloured Lights:

I have chosen to put this image image because it shows my love for bright colours in a different way. I thought that Light could be something I explore and play with when brainstorming ideas for this project. This Image makes me feel like anything is possible and makes me want to be outside at night time more. 

Colour:

Here is just a classic example of the colours I like. This and even brighter. 

Colourful Sheds:

I love this soo much! The old run down look creating so many interesting textures but at the same time been given a fresh coat of paint to be made 'new' again. The fact that they are bright colours and do not follow the trend that would be normal for sheds really inspires me and makes me want one. 

Colourful Umbrella:

Favourite umbrella. The mix of bright colours with darker shades looks very effective and I like the pixilated look that comes from the repetition of squares being used. It also gives a sense of movement which I think could be interesting to try out in my project.

Bright Coloured Stools:

The final image that I have got is of some colourful stools. I just love the colors. I also like how that are colours that have come straight from the pot but have been mixed first to get that right shade and variation of colour.