Sunday, 9 October 2011
Project 3: Final Application
Instructions:
Left click and hold on the black ball to drag
Release left mouse button to drop ball
Watch what effect the gradient has on the ball and audio
Thursday, 6 October 2011
Project 3: Development + Initial Applications
*development applications resized to 400x400 for blog display*
Instructions:
Left click on application window to emit sound shape
Right click to reset
Instructions:
Move the mouse up and down to move the line
Left click to release the line
Right click to reset
Based on my last two concepts I decided to focus on on the idea of gradients, more specifically transitions from light to dark being used in creating audio-visual "sound shapes". I came up with these two initial applications which are a simple study of the relationship between visual tone and aural tone using different types of gradients. In the first, as the line descends down to the darker area the sound's pitch is simultaneously lowered. For the second, pitch is increased as the gradient area gets lighter. Both of these applications share the same correlation between audio and sound in that darker equals lower pitch, brighter equals higher.
Instructions:
Left click on application window to emit sound shape
Right click to reset
Instructions:
Move the mouse up and down to move the line
Left click to release the line
Right click to reset
Based on my last two concepts I decided to focus on on the idea of gradients, more specifically transitions from light to dark being used in creating audio-visual "sound shapes". I came up with these two initial applications which are a simple study of the relationship between visual tone and aural tone using different types of gradients. In the first, as the line descends down to the darker area the sound's pitch is simultaneously lowered. For the second, pitch is increased as the gradient area gets lighter. Both of these applications share the same correlation between audio and sound in that darker equals lower pitch, brighter equals higher.
Wednesday, 21 September 2011
Wednesday, 7 September 2011
Project 2 - Final Interactive Design
*application resized to 400x400 for blog display*
Instructions:
Click once on the window to start
Control the grid movement by using the mouse
Left click and drag either up or down to change ellipse size
Right click to reset
My final interactive design is the product of bringing all of my development ideas into the one piece. As with my development pieces the interactive "conversation" in my application comes through the fact that every action the user makes has a lasting effect on what is displayed on-screen through trails which creates interesting forms. Once a user clicks on the window - the first step of interaction - the application is essentially a grid of ellipses who's position on screen is a delayed reaction to the mouse's movement. However, once moved the ellipses leave behind trails, their length dependent on how fast the mouse is moved. This transforms the simple 2d ellipses into complex semi-3d, tube-like forms that are indirectly controlled through mouse movement and already provide great interaction as users attempt to manipulate these forms. An even greater form of interaction is made possible by giving users the ability to change the size of these ellipses on display by holding down the left mouse button and dragging either up or down, an act which in itself creates even more interesting forms.
Instructions:
Click once on the window to start
Control the grid movement by using the mouse
Left click and drag either up or down to change ellipse size
Right click to reset
My final interactive design is the product of bringing all of my development ideas into the one piece. As with my development pieces the interactive "conversation" in my application comes through the fact that every action the user makes has a lasting effect on what is displayed on-screen through trails which creates interesting forms. Once a user clicks on the window - the first step of interaction - the application is essentially a grid of ellipses who's position on screen is a delayed reaction to the mouse's movement. However, once moved the ellipses leave behind trails, their length dependent on how fast the mouse is moved. This transforms the simple 2d ellipses into complex semi-3d, tube-like forms that are indirectly controlled through mouse movement and already provide great interaction as users attempt to manipulate these forms. An even greater form of interaction is made possible by giving users the ability to change the size of these ellipses on display by holding down the left mouse button and dragging either up or down, an act which in itself creates even more interesting forms.
Project 2 - Development
*all development applications resized to 400x400 for blog display*
Interaction Development
Interactive Noodles
Instructions:
Click on the window to start
Control the ellipse movement using the mouse
Right click to stop and fade the image
This application is based primarily on my initial idea of interactive "conversation" coming from every user action having a lasting effect. Although simple, the act of interacting with the balls who's trails create interesting 3d-looking forms is an effective one and one that I spent more time than I should have playing with whilst I was trying to improve my code.
Lines Trail
Instructions:
Left click on the window to start
Move the mouse to control the lines
Left click to change colour
Right click to fade out
I really liked this application and was considering it for my final piece, in the end I decided there wasn't quite enough to it. However it's still a great interactive piece in my mind and I really enjoy playing with and creating amazing looking shapes. Unlike in other experiments I found the act of right-clicking to delay and fade out whatever is on screen to be a crucial part of the interaction as a kind of game comes out of trying to get it to pause on the most interesting shape.
Interactive Balls With Trail
Instructions:
Click on the window to start
Control the position of the balls by moving the mouse
Click to change colour
Right click to reset
In this application I experimented with extra mouse-functions which can control other elements such as colour. I gave the act of clicking the mouse to change colour an extra visual "bump" to give a more tactile feel to the interaction which I think was really effective. The 3d effect created by having more balls was also a lot more interesting to manipulate.
Trail
Instructions:
Click on the window to start
Control the position of the ball by moving the mouse
Based on my idea of trails and interactive "conversation" coming from the lasting effects of user-input I spent time figuring out how to create a trail that acted similarly to what I'd expect the rocket trail in my precedent image to. The faster the mouse is moved, the longer the balls trail, if the ball is motionless there is no trail. Because of this indirect control of the trail is given to the user.
Initial Sketches
Interactive Ball
The interactive "conversation" with this ball comes from the fact that although you are controlling the position of the ball on screen using the mouse, the ball has it's own set of rules in which it moves more slowly and at it's own speed, taking away your full control.
Experiment 3
Instructions
Move mouse to draw squares
Move mouse up/down to increase/decrease square size
Left click to reset square size
Right click to pause
Experiment 2
Instructions
Move mouse to draw ellipses
Left click to increase ellipse size
Right click to decrease ellipse size
Experiment 1
Instructions:
Draw circles using mouse movement
Moving mouse up/down changes ellipse size
Interaction Development
Interactive Noodles
Instructions:
Click on the window to start
Control the ellipse movement using the mouse
Right click to stop and fade the image
This application is based primarily on my initial idea of interactive "conversation" coming from every user action having a lasting effect. Although simple, the act of interacting with the balls who's trails create interesting 3d-looking forms is an effective one and one that I spent more time than I should have playing with whilst I was trying to improve my code.
Lines Trail
Instructions:
Left click on the window to start
Move the mouse to control the lines
Left click to change colour
Right click to fade out
I really liked this application and was considering it for my final piece, in the end I decided there wasn't quite enough to it. However it's still a great interactive piece in my mind and I really enjoy playing with and creating amazing looking shapes. Unlike in other experiments I found the act of right-clicking to delay and fade out whatever is on screen to be a crucial part of the interaction as a kind of game comes out of trying to get it to pause on the most interesting shape.
Interactive Balls With Trail
Instructions:
Click on the window to start
Control the position of the balls by moving the mouse
Click to change colour
Right click to reset
In this application I experimented with extra mouse-functions which can control other elements such as colour. I gave the act of clicking the mouse to change colour an extra visual "bump" to give a more tactile feel to the interaction which I think was really effective. The 3d effect created by having more balls was also a lot more interesting to manipulate.
Trail
Instructions:
Click on the window to start
Control the position of the ball by moving the mouse
Based on my idea of trails and interactive "conversation" coming from the lasting effects of user-input I spent time figuring out how to create a trail that acted similarly to what I'd expect the rocket trail in my precedent image to. The faster the mouse is moved, the longer the balls trail, if the ball is motionless there is no trail. Because of this indirect control of the trail is given to the user.
Initial Sketches
Interactive Ball
The interactive "conversation" with this ball comes from the fact that although you are controlling the position of the ball on screen using the mouse, the ball has it's own set of rules in which it moves more slowly and at it's own speed, taking away your full control.
Experiment 3
Instructions
Move mouse to draw squares
Move mouse up/down to increase/decrease square size
Left click to reset square size
Right click to pause
Experiment 2
Instructions
Move mouse to draw ellipses
Left click to increase ellipse size
Right click to decrease ellipse size
Experiment 1
Instructions:
Draw circles using mouse movement
Moving mouse up/down changes ellipse size
Project 2 - Concepts, Precedent Images and Examples
Concepts
1
2
Precedent Images
1
2
Precedent Images
 |
| Image retrieved from: http://images.channeladvisor.com/Sell/SSProfiles/33000473/Images/3/242904882.jpg One of my first ideas was initially influenced by the memory of playing with the pens they have at banks and other such places that are attached to a table by a long thin chain. I remember shaking the pens from side to side and up and down as a kid creating small waves that would travel up the chain. I think this is a great form of interative "conversation" and really like the idea that when doing this every action you take indirectly has an effect that lasts further down the chain. |
 |
| Image retrieved from: http://www.templates.com/blog/wp-content/uploads/2010/06/Model-a-Rocket-with-Particle-Trail.jpg |
Whilst thinking of actions that have lasting effects I came up with the idea of trails and after searching found this great image. The rocket has a beautiful trail and this image is what one of my concepts is directly based off - I can easily imagine clicking on this image as an application and having a full interactive conversation with the rocket and it's trail based on mouse movement.
Wednesday, 3 August 2011
Subscribe to:
Posts (Atom)