Reflections. Part 3. Focus

Reflections

Variable ; Differently ; Dynamic Change ; Varied Result ; Abstracted ; Focus

These are some of the terms that highlighted in the previous blog posts. I have tried to follow these rules as closely as possible with the concept and the blog.

Since I first posted about polishing this blog, I think it has dramatically improved in content and clarity. I know that it could still be even better, which will be a task for the next project.

The project was a great learning experience. Everything that I now know will go towards making the next assignment even better.

Reflections. Part 2. Concept

Reflections

My original concept had three pillars. One was to have the particles fly towards the user to provide a feeling of speed.  Another was to create a parallax effect by creating layers that move at different speeds.  Third the particles would shift in form depending on which direction the user is traveling in but this new form is maintained even when the direction is changed. Thus when combined the user would be able to 'create' new locations.

This was probably a bit to ambitious.

My final design is simpler. It's a bit different but creates some beautiful effects and the change of the colour is still controlled by direction as originally intended.

From an interactive standpoint, I love the way small changes in user input can make quite a big difference in appearance. If the user puts travels straight ahead and holds down the mouse if feels like time is slowing. Doing the same in another area makes the trails look like rays of the sun.

Reflections. Part 1. Code

Reflections

Trying to achieve in code what I envisioned for this project was an exercise in frustration. I knew theoretically how the different parts fit together and how they might be done in algorithm, but constantly found unexpected behaviour along the way. Issues included trying to get things to be relative  to the centre of the screen while still taking account of mouse control and small code changes unintentionally altering other elements. With time I know that I can overcome these issues.

For now I learnt much about coding such as the power of arrays, creating objects through functions and improved control of variables. I also found the comments and clarity of my code was vastly improved.

Finally I would like to take you through the code changes between the last precedent and the final design. Depending on which corner the of the screen the mouse is in, the colour shifts. This is achieved   by using an if statement that tells the colours to change differently depending on which quarter of the screen the mouse is in. E.g. mouseX > width/2 and mouseY>height/2. To make the colour change evenly width/2 and height/2 were turned into a percentage and then that percentage was applied to the colour.

The Journey

The Concept

After a long couple of weeks, I present my final design 'The Journey"

To make an object truly interactive, any responses it gives must be based on the user’s input.  The response must then be slightly unpredictable and, if possible, change each time.

I have tried to achieve this conversation in The Journey. The user picks a direction to travel by moving the mouse towards the corners of the screen and a star field effect creates the illusion of travelling. This converts the user’s mouse movement into control of 3D space.

The second component is that the particles change depending on which direction the user is ‘travelling’ in. By altering her direction, the user can alter colour and shape.  

The Concept of The Journey is to abstract the user’s input into something that feels completely natural. The response is based on the input, but varies in a complex manner.  

The Journey - Open Processing Link

Parallax

Concept

This one kind of goes into the precedents category. I spent a whole day and made pages of written notes on this, but I could never get it to work. The idea is that there would be a series of rings around the mouse that increase in size. When the mouse is moved, each ring would move relative to its radius creating a strong Parallax effect.

My theory was that applying a percentage of mouseX and Y to the radius of the a circle it would work.

This is important for a sensation of movement, and would have formed a major part of the control scheme. Unfortunately, due to time constraints, I had to leave it out of my final design

The example bellow illustrates one ring following this behaviour to a limited extent.

Parallax - Open Processing Link

mouseReleased() and mouseMoved()

Experiments

Not much to say about this one. It's a circle that shrinks in size when the mouse is released. It's not really interactive and is just an example of very basic use of the mouseReleased() and mouseMoved()

Simple - Open Processing Link

mouseDragged() and mouseButton

Experiments

This is a basic applet that uses mouseDragged() to activate mouseX and mouseY. mouseButton LEFT and RIGHT can be used to change the colour of the background.

It's not particularly interactive as it's highly controlled, but by reducing the 1:1 control these mouse tools could be used to create quite an interesting system.

Envelope - Open Processing Link

Starfield 2

Concept

I have modified the previous star-field so that it follows the mouse. This makes the it feel slightly more interactive as the follow effect creates a 'response' to an action,  rather than mimic it. The objects now increase in size as they move away from the mouse, which increases the parallax effect.

Finally using dist(), the objects move faster when the mouse approaches the corners of the screen. This effect is important to create the feeling of traveling to new locations by picking a direction.

It's interactivity is admittedly limited at the moment. The next step is to make the objects change (e.g. colour, shape) in different ways when the mouse is in the corners. This will provide a response that depends on the users control, but is slightly unpredictable.

Starfield 2 - Open Processing Link

Advanced Tree Generator

Research

I love this example from open processing. Many different trees can be formed with simple fluid movements of the mouse and it's more interactive then the previous examples in that the user moves the mouse to create new forms.

It's similar to my concept in the way a user controls change by moving the mouse. It's simple, and it feels quite natural even though the control is abstract.

Advanced Tree Generator

Follow the Mouse

Experiments 

I recreated the 'follow the mouse' effect made in class. I figured out how to do this by drawing an image on paper of the process, and then working out the necessary equation.

The distance is calculated using by adding a percentage of the distance between the new mouse position and the previous mouse position

I'd like to include this in my final design as a way for the objects to follow behind the mouse. It makes it feel less controlled.

Follow - Open Processing Link

The Idea

Concept 

The idea so far is to create an interaction that makes the user feel like they are going on a journey.
If the user moves the mouse to the corners of the screen, they control the speed and direction of movement. This illusion is created by having objects increase in size relative to the position of the mouse creating a pseudo 3D effect.

I think if I can do this successfully the user will get a feeling of controlling their adventure as they travel through space, creating a semi-interactive experience.

The next step is to make the objects change depending on which direction the user is traveling. One screen corner might cycle through colour, another might change the shapes that are on screen and another could change the frequency of the objects.

I feel that this variation combined with the journey experience will create quite an interactive experience. It will be designed to create an abstract control scheme to keep the user engaged.

Connections

Philosophy and Exploration

I had a psychology lecture today on perception. We learned how everything we see and experience is an approximation of our reality. Mostly we focused on colour.

It reminded me of Ben's previous lecture where he told us that shapes have a colour. I also thought of the chapter of the Design in Context subject about colour.

What strikes me about this is how these different subjects overlap and tell us something similar about the world. Everything around us is related and connected.  I don't know if this is because everything in the world has a similar 'code' behind it, or it comes about as result of a brain working to connect ideas. I suspect it is a bit of both.

The picture below is from the psychology lecture. Would you believe both eye's are the same colour?

Arrays and mousePressed

Experiments

In my final design I'd like to include multiple objects. Ben and Steven showed us the power of Arrays to not only create objects en masse, but apply properties to them all as well.  The trick is to use loops that address every instance (or locker) of the array and apply a value to them.

I created an example to show this at work that i'd like to implement it into my final design. It resembles those screensaver star-fields of old. If you hold the mouse button now mousePressed is activated creating a 'warp' effect

The difficult part was understanding how to individually animate each star. The method was to add a percentage of the distance between the stars and the centre of the screen to each star every time draw is run.

These projects really shows me how simple code can make something quite beautiful.

Star-field - Open Processing Link

Sinuous

Research

Found another great interaction. This one, a game, sees you playing the role of a humble sperm.

Ok, it's possibly not a sperm, but it's tons of fun. You have to race past red dots coming from the left of the screen. I suppose it must use arrays to produce the them.

It's interaction stems from the need to avoid the dots. Pickups produce other interactive effects such as the ability to push the dots away or destroy them with a shield.

I wouldn't mind taking some inspiration. It does a good job of showing some creative ways that onscreen elements can interact.

Sinuous - Link to game

Zune Journey

Research

I found this great advertisement at http://www.zunejourney.net/. You have to click and it the objects and scenery that float past move towards your mouse to create the illusion that you are controlling the direction of your journey. It's fun, has pumping music and looks great.

On the other hand, it's not particularly interactive, and it suffers for it. The visuals and music might keep you glued for a little while, but the illusion is lost pretty quickly.

Still,  it give me an idea for what I would like to do for my own work. What if by going in a certain direction creates a dynamic change on the objects. When you change direction more dynamic changes occur based on the previous. It would produce a varied result every time and the user interaction would be abstracted.

mousePressed() and Double Clicking

Experiments

This first experiment is an attempt to take mousePressed() and take it to its next logical conclusion.

Double Clicking!

This experiment was to show how double clicking might work. I used the frameCount variable as a type of clock. If the user clicks twice within three frames of draw() the circle changes colour, but a single click will only produce a 'selection' like effect.

And it works. I wanted it to simulate the feel of clicking or double clicking a file on a computer. However, it does seems to have some issues. For one the double click should never appear without the selection effect, and it does. Secondly, when this does occur, the colour change can only be removed by clicking on the circle again. When things don't perform as expected, this can be a problem for the user experience.

If I get a chance I'd like to rewrite the code of this example in a later blog post. Spending a long time overcoming issues  really made me appreciate the importance of using comments and naming variables.

Ben told us that coding is not maths. I must admit that I didn't quite believe him. However, I think I'm starting to realise that he might have been right. Perhaps coding is about translating the language of imagination, into the language of computers.

Spotlight - Open Processing Link

Outside of the Box

Philosophy and Exploration

A couple of days ago I sent Steven an email asking him how I could improve this blog.

And he gave me some really good advice.

He told me that the blog needed to contain research images, precedents plus critical analysis and experimentation. It is to be a sandbox that provides an insight into my thought process. So I'm going to work to have multiple posts addressing these elements of the assignment.

However he also stressed the point that the key to doing well is thinking outside of the box. And that means coming up with ideas that surprise and do things a bit differently. This is probably the most difficult thing to do well, but it fits unexpectedly well into the ideas of variation and interaction. Perhaps part of the purpose of this project is to help us understand that.

On a more practical level this means I'll try to have some creative ideas for this blog. My first idea is to separate these posts into sections such as philosophy and exploration, research and experimentation. I'll also highlight words that I think are important.

Interaction

Philosophy and Exploration

I wanted to explore what the essence of interaction is.

My first thought was: What happens if you take interaction away? What are we left with? No matter how much we give to the world we would never get anything back in return. We could never be anything more then observers like a deist god. I think this suggests that a major component of interaction is purpose.

Next I thought of interaction as a conversation as the assignment brief suggests. When speaking to someone we have a certain level of control over the conversation. However it is the variation in response that makes the conversation interesting. In this case variability is shown to be a component of interaction.

I hope to produce a design that focuses on providing a purpose to the user. This means that they should have a reason to continue interacting with it for more than 20 seconds. Its response should also be variable to the user's actions.