Ideas

Concept

Now that the concept is completed for this project I thought it might me nice to talk about a couple of other ideas that I would have liked to try implementing if time permitted.

The first would have been to try and create a new appearance by reshaping the grid. The form that I liked the best would have been to make the squares rotate around a centre axis creating a circular appearance.

The other idea was that rather than the shapes only covering the cavas, they could have coved the whole screen, but only been visible through the 'window' of processing. I think it would have been interesting to reveal things that only become visible once dragging occurs

Crash

Concept

The final stage of sound/shape. After experimenting, and as much as I liked the interesting look ellipses can provide I decided to go back to something that more resembled my original design. It just provided the most fluid and interesting appearance. I also asked for feedback from people which suggested as much.

The three sounds have been added so now dragging the canvas initiates the drum roll, crashes of varying volumes and speed are activated depending on speed and there is an ambient lava sound as well. It is amazing how much of a difference these sound make. Now it really feels like you are damaging something.

Unfortunately there appears to be a couple of glitches that I could not fix before it was due. The most irritating is that the explosions sometimes create two sounds instead of one. Still I'm am happy wiht the end product.

Crash - Open Processing Link

 

Sound

Concept

Since this project is primarily about sound, it seemed appropriate to focus on getting it right. Analysis of my work indicated that the three animations of my concept needed sound. Most integral, was the explosion sound that I had located earlier. I edited it so I could provide a different sound depending on speed at which the collision occurs. Next I found a sound for lava and slowed it down. It should provide a nice ambient sound to match the shifting colours.

The last piece of the puzzle was something to match the dragging of the canvas. I liked the idea of building up anticipation and I knew that a drum roll would be an effective way of achieving this. Of course this makes this sound effect the odd-one-out, but I think the tradeoff will be worth it.

Waves

Concept

Now that my application is more developed I can experiment with new effects. This example below changes the shapes to ellipses and has them increasing in size. Although I think this possibly looks nicer than the grid, I don't feel it is as interesting or as well suited to my concept. The experimenting must go on!

Waves - Link to Open Processing

Shimmering

Concept

I'm getting close to a design that fulfils the minim requirements of my original concept. I improved the destruction by making it exponential. Now the damage close to the impact is much larger than the damage further away, which feels much more natural.

The other big change is that the colour now randomly increases or decreases within a small range. This nice small shift makes the concept look like it is shimmering, causing it to look much more fluid and more volcanic. I tried to switch the colour to HSB, but it does not appear to be working as expected. 

Slam - Open Processing Link

Bang!

Concept

This is already a major upgrade over the previous stage of my concept. Displaying the power of 'classes' the spring method now causes particles closest to the point of impact to separate, illustrating that a collision has occurred.

I had to think this though quite a bit. At first I had the particles compressing together, but that looked like made the canvas look like a box that was shrinking. After some research, I released that the particles should look as if they are "pushed apart".

Grid Advanced - Open Processing Link

Grid Moves

Concept

This example applies the moving code from before to the particle class. It's a bit more advanced now, and uses an if statement for the tween. Whatever the speed is divided by (speed determined by dragging distance) is the same value used for frames of animation.

It still has a way to go before it meets my concept, but this provides the foundation.

Grid Moves - Open Processing Link

Grid Realized

Experiment

Even though this is almost certainly going to end up as part of my final design, I though it should go into the experiment category since it is the first time that I have tried to use classes. This creates a grid in a block formation. 

While in it’s current state it does not really do anything new, the particle class is really powerful. Using constructors, fields, and methods I can now control each particle separately. 

Grid - Open Processing Link

Shock wave

Research

This probably fits slightly into the superfluous category that designers often despise. However, since my design is so simple, I think it would add a extra layer of interest.

If I wanted my design to involve explosions, then it seemed appropriate for the effect to have a resulting shock wave. The video I found, from the Myth Busters tv show does a great job of showing how a wave behaves. I would like to try and copy its visual style in my grid.

MythBusters shockwave - Link to video

Eruption

Research

I have been told to spend more time thinking about what exactly I would like my application ‘to do’. To me, this means what effect the impact should cause. Since this should feel like an eruption, I looked for some videos of volcanoes. 

From the video below, I was inspired to create something that ‘glows’ like lava, but ‘spurts’ at impact. I need to think more about how to abstract these features into a simple grid.

National Geographic Volcanoes 101 - Link to Video

Audacity

Experiments

Since this is a sound project, it was time to face the music (pun intended) and think about the sounds I would like to create. The most important, would be the ‘eruption’ sound. I looked around a bit, a quickly found a sound that was appropriate; not to difficult since explosions are pretty generic.

Currently I’m using the free application Audacity to edit the sound. It was easy enough to cut out any unnecessary pauses, now I just need to create explosions that vary in length and volume.

Slam

Concept

This iteration is a proof of concept. It’s meant to symbolise the dragging of the whole canvas. On release it smashes into the edge of the screen depending on how far it is dragged. The next step is to create something similar with particles, so I can visualise the distruction.

Slam - Open Processing link

Earthquake/Volcano

Concept

I think I finally have an idea that is interesting. I wanted to do something based on nature, but still be abstract. In this concept, designed to feel like a volcano or an earthquake, has the user dragging the entire canvas, and, on release, smashing it against the side.  I knew I would need a way of visualising the destruction and as  it is not possible for me to actually create lava with my current level of understanding I am using inspiration from the ToneMatrix and using a grid.

Grid

Research

The following example from Andre Michelle Laboratory is just great. It’s a sinewave synthesiser that is trigger by clicking squares on a grid. The application is simple, and the sound is very effective. It’s also a good example of the ‘Beat Box’ type of sound.

At this point I’m not really interested in making something too similar to this application. On the other hand, I think I may take some inspiration from its ‘look’.

ToneMatrix - Link

Bells

Concept

This last concept contains two lines that cross at the position of the mouse. If the mouse is moved, so are the lines. The canvas itself is covered in bells (possibly randomly placed). ‘Hammers’ of varying sizes can be placed onto the strings. The user can create different sounds by moving the mouse and hitting combinations of bells at once.

I think it could be an interesting idea, but as it is it possess too much control to be interesting. If I choose this design it will require a lot of development  

Buckets

Concept

The idea behind this next concept is that there would be buckets hanging from the top of the screen. By placing the mouse over particular buckets, a stream of shapes would fall from the sky, filling up the buckets. The buckets would then lower depending on weight. If the user clicked on a bucket the contents would drop all at one to the ground. Sounds would vary depending on amount of shapes and the height they fall from, creating distinct sound effects.  

The concept has potential, but I fear it contains too many concrete aspects that would be difficult to apply sounds to.

Heartbeat

Concept

The next three posts contain drawn two dimensional concept storyboards. This one is designed to simulate a heat beat. For this, I was inspired by the previous interaction that show the mouse controlling waves depending on speed and position on the screen. I thought it would be interesting to simulate an electrocardiograph with the mouse controlling ‘life’.  The faster the mouse is moved the faster the heart rate and its subsequent sound. If you were to ‘overload’ the heart by creating too many waves, it would become a flat line. I liked the emotional factor is expressing life and death through sound.

Unfortunately this idea was not well received. Ben thought lacked the abstractness and variability needed to be interesting. In retrospect, I now feel that it is an idea that has already been done to death.

Waves

Research

Yugop.com is a site devoted to six different interactive mouse toys. I like the one pictured below that creates waves from the speed and position of the mouse. With the addition of sound it could be really interesting. I foresee any ideas stemming from this one as fitting into the environmental sound category.

Yugop - Link to Site

Train

Research 

Ben showed us the great example of a music visualiser/video. This video by the chemical brothers somehow manages to match objects passing by a train to beats depending on length, size, position and what must me hundreds of other variables to reflect such a diverse display of sounds. While I would love to create something that sounds and looks as interesting as this, I think it is too risky to try and simulate all the necessary sounds. This example is particularly effective because of its originality, which is also difficult to match.

Multidimensional

Philosophy and Exploration

In the first lecture for sound-shape Ben showed us many examples of sound and form in unity.  I hope to cover some of these and other examples in later blog posts. For now I would like to cover some of the different ways I could approach this project. The ideas that that initially occur to me are a beat box, a music visualiser, a sound visualiser or an interactive piece that reflects real life sounds.

The most obvious to me is to create a beat box. It works great as an interactive toy and there are endless possibilities.  Perhaps gravity could change the sound of an object depending on how high it drops. I also have an idea (expounded upon later) that would involve placing bells on the canvas and objects on ropes colliding to create interesting sounds.

The visualiser, if I could get it to work, would have the advantage of if sounding great, which is much more difficult in the case of the beat box. I think I shall probably avoid this as the level of interactivity would be low.

The final category that comes to mind is an interaction that reflects real life objects.  This involves taking a familiar sound and reflecting it through abstract imagery. While slightly more limiting than the beatbox concept, it could be really interesting to experiment with the emotional aspect of sounds.

The possibilities of the examples above show how much more effective designs can be with the added dimension of sound   

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.

Focus

Philosophy and Exploration

With this new assignment I’d like to turn a new leaf. I don't think the work I’ve done so far is terrible and it's not exactly that I need to put more effort into the assignments, but I know I can do a lot better. 

The trick will be to focus.

For the blog that means lots of medium blog posts that show every step of development and inspiration.  Each must have an image and illustrate one thought.  To signify this new beginning I’ve changed the look of the blog to a simpler design.

For the work itself, this is will be the beginning of a process of constantly checking if my work follows the grading sheet. Finally I plan to focus on fewer things – but doing them better.  

An Exploration of Structure Redux

Finally I'd like to return to the exploration as a whole. I was aiming to create something that was basic in code, but through small changes could make large visual differences. Along the way I realized that this could be a tool to show how many real world objects are related in shape and pattern. I included variables where appropriate for my design, and not used them were there was no perceivable benefit. In the future, the next step may be to take the original code and add complexity to it, but I think for now this shows how effective a small code base can be.

I still feel that structure is essentially something that depends on our perception. Although I was trying to base my designs on real world objects,  it's likely others well recognize different structures.

Finally,  here are all the structures together.

Leaves

For the last form, I returned to the flower, as that had the most definable structure. This leaf design reduces repetition and rotation to create something that resembles small branches with long leaves.

Fireworks

I wanted to make something that was structured, while introducing noise into my original form. Fireworks seemed to be a good way to express this while staying true to the original structure.

To create the effect, colours were changed to be more appropriate, shapes were elongated as much as possible and the random function was introduced to change position slightly.