Sound

I wanted an ambient background sound to create the atmospheric environment of a hot summer day. For this I used chirping birds and the sound of wind which are nostalgic for people. 

I wanted something simple, subtle, but easily recognisable for grass growing.

Sky colouring and clouds

I chose a full colour for the sky as I thought that the gradient would be too much and be too busy for the interaction.

I also made the clouds and tested what speed they should be at as to make sure that they are noticeable but not distracting. 

This shows a time lapse of how the clouds move across the sky and how many will be on the screen at once.

Falling grass

The speed of how the grass falls helps to relate it to real life wind movement so I investigated what speed was most appropriate. 

I didn't want it too fast otherwise it wouldn't be noticed enough, so I have slowed it down to allow the interaction to become more realistic.

I also tried to make it fall at an angle to make it seem as though it is moving with the wind. 

Cutting grass

Here it shows how the interaction now includes the cutting of the grass. 

Although it will be difficult to cut large sections of grass all at once, this replicates how difficult it is to cut grass in real life. 

I had difficulty getting the grass to cut from both sides and at the right amount of grass to be cut as well. However now I'm happy with how the grass cuts as the mouse is clicked as it seems natural and isn't too difficult.

Roots

Here I looked at the roots' colouring and thicknesses. The top ones show the chosen colour, which I chose because of the way it reacts with the dirt below it. Real roots are fibrous, meaning that I wanted my roots to be similar- thin, but visible as they grow.

Dirt development

This shows the progression of how I wanted the dirt to look.

 For instance, the first section shows the base one colour look, which is far too basic and wouldn't suit the overall interaction.

The second and third segments show how I was working with lerpColour and how it wasn't working.

In the bottom line I looked at the different colour progressions. These included gradients so that it seems more natural and realistic.

The first is too light as it detracts from the rest of the interaction and the last is slightly too dark which also takes away from it.

The second segment in the last line is a rich enough colour which I think adds warmth and overall is a positive addition/ accompaniment to the interaction.

Background images

Although the interaction will be solely focused on the grass and its effect on the environment around it, I also want to have other elements to make the scene more aesthetically pleasing and less boring.

I considered having things such as birds flying across the scene but they felt too busy and could detract from the actual interaction.

I also considered having clouds moving across the top, which I decided was a better alternative as it appears more seamless. 

Both of the videos shown above show clouds which I considered while coding my own. I ended up keeping the clouds quite basic as to not detract from the interaction and to make sure that I could focus my coding on the grass. 

This shows my trials of different opacity which I conducted to make sure that the clouds are visible but not distracting. I decided however that as long as the clouds are moving at an appropriate rate then the opacity makes little difference. Therefore I will choose the last cloud so that they are visible and just work on the movement

Stalk movement development

This demonstrates how the stalk move within the interaction once they had been developed further. I have added a random(); into the code so that a fifth of the stalk moves freely and constantly, giving the illusion of wind throughout the interaction. 

I think this works well because it allows the interaction to always appear alive, which correlates directly to grass and growth.

Dirt

To create a more realistic interaction and environment, I will add things like dirt.

Colour palettes from colourlovers.com which I found relating to dirt. I will incorporate these colours as they are representative of new growth within dirt and will relate well to the grass which I have.

These three images show how dirt can be represented. In my previous update of my interaction I added roots into the ground to add realism and looking at these images I have decided to try to refine this and focus more on its relation to the dirt, not the grass

Stalk change affecting overall

Here it shows how the stalk development has caused the overall appearance of the interaction less structured and more realistic. 

It also shows how I have developed the interaction to be more widescreen. This is so that it appears more like a landscape- which relates to how we perceive grass usually.

Stalk development

Original stalk chosen

Development:

The reason I will choose that stalk was that it represents grass in the most realistic way. However I have adapted it slightly. Singular blades of grass can be related to triangular forms of green in the simplest form. Therefore, for a stalk of grass, the most realistic way to mimic it is to use triangles layered on top of each other.

This is how I have come to the stalk below. When duplicated and placed together the overlapping of the triangles create a depth and the top shows how grass grows unevenly and sharply.

When duplicated it looks a lot more realistic and so I will attempt to use this from now on, changing and adapting when needed

Coding the stalks

These are individual stalks which I coded to decide which would give the best effect when multiplied and placed together.

Because stalks of grass, such as the one above, sprout many blades from one place I will try to emulate this in my code. Therefore I will discount the first stalk which I coded as it is too simple and more blades will represent a more realistic view.

As for the second stalk of grass, it is quite spread out and when made to grow by the user, could end up being too spread out to represent grass.

The last stalk shows many blades, but a lot closer together and also overlapping at the base. This represents the cluseters and darker parts which can be seen in the above photo. Also, when it grows it will still be confined within a smaller space, mimicking real grass growth.

For these reasons I choose the last stalk to develop

Straight lined grass

This illustrates how my current interaction is too straight and doesn't mimic the movement of real grass enough. It also seems boring and the user would quickly move on.

However it also illustrates how I have coded the grass to change colour as it 'dies'.
I will keep and develop this further so it is more relatable to real grass in colour and movement.

Stalks- research

Within my concept I am looking at grass for the inspiration and within this I feel that stalks will be the most maleable and interesting to adapt. They will give depth and movement that straight blades of grass will not.

Within the code I will have to make these as their own void so that I can use arrays to create multiples without reqriting line after line.

Reverting back

Despite looking at the different perspective of the grass I have decided to revert back to the horizontal seciton view. I've done this because at the moment it looks too tiled and hardly resembles grass, except in principle.

I also think that the code can be more interactive if I revert back to the way I had it. This is because it will more resemble grass and I can add other elements of nature within it such as the wind and how it moves it.

However I will try to incorporate some to the techniques which I used in the birds eye view perspective.

Change of perspective

I am now exploring the idea of looking at the grass from a different perspective. At present I am looking at the grass from a section point of view, but I will investigate how it looks from a birds eye view.

This shows a rough draft of how patches of grass will grow when rubbed.

I will limit the length the grass can grow otherwise it becomes less natural as shown above

These show some patches which were regulated to grow to a certain length, giving the illusion of mown grass. These could create a lawn effect which would be appropriate, however I would add an effect so that they died slowly to create more realism.

Story Board

 

New concept

I will have a 'ground level' where the user can rub the mouse along and have grass grow accordingly. This grass will keep growing until they stop moving the mouse and then if they swipe across the grass the mouse will be used like a knife and will cut the grass at that angle.

I will also add small features to keep it interactive as I develop it further.

This is interaction as opposed to control because the user will have to 'rub' the mouse over the spot they want to grow and so therefore they have to do something to make the grass grow and the grass which is cut is according to the user's movements. 

Colouring

As the grass grows there will be a gradient to show how it reacts in real life

It will slowly turn yellow to show how the grass in real life does the same

Basic concept change

I have had to change from my concept which involves tree as they will be too difficult to manipulate within the code.

Therefore I have adapted the idea to one with similar techniques but simplified slightly.

Fractal trees

I have investigated fractal trees and how the coding of these work. I've found this really interesting and plan on using it within my design. I've also coded the tree to be planted wherever the mouse clicks as I've shown below. 

More development will be focused on making it more interactive. For instance the trees will be "planted" by rubbing the spot with the mouse instead of just clicking. 

Style

Within my project I am hoping to have a certain style which is achieved. For inspiration I looked at a few sources.

One of these source is the Tale of Three Brothers, from Harry Potter and the Deathly Hallows. Specifically I looked at 0:30 - 0:45s and how the tree sheds its leaves, which at the start could be mistaken for birds and how this was achieved. Also I looked from 3:00 - 3:10, which shows birds sitting on a spindly tree and then flying into the distance. This is probably the most relevant as I will study it to see how they created such believable movements and style.

Another inspirational source is the computer game "Limbo".

Within this game the style stays very simplistic but hugely effective which is how I wish to present my idea. For instance the trees in the above image show how simplistic things are and how they have simply used fading to create depth.

The two styles shown above are very simplistic and use opacity and dull colours to create an interesting atmosphere which I will try to study and possibly replicate.

Inspiration for trees

http://www.openprocessing.org/sketch/8752

This processing example is a programme which, when the user clicks, creates a new tree. This is one of the basic elements of my design and so I will definitely look at the code for inspiration.

I also appreciate the style of the tree which is created as some I have seen are too thick where as this one seems delicate, giving it a sense of life.

However the programme above has the tree's trunk starting at the exact same place which has already been determined by the programme. In my interaction I am hoping to have the user decide where to put the starting point so that it creates more interaction and less control.

http://www.openprocessing.org/sketch/52945

This programme also generates random trees everytime the user clicks however is more lifelike in the way that it has greenery which represents leaves. However for my interaction I want the colours to be minimalistic because I don't want it to draw away from the basic idea.

Inspiration for birds

Both of these videos show how birds migrate from a tree and, in the second video, how they move to another. This is the type of movement that I am hoping to represent in my interaction. It may just be an abstract representation or I may try to create small birds, but they are likely to be quite simple.

Carnival vs Nature

From the inspiration that I collected I found two different concepts that I could go with.


One of these was carnival which would use inspiration from carnival games to create simple interaction.

The other concept I looked at was based around nature and birds specifically.

Android game inspiration

This example shows how the interaction could be based on the user having to be logical and think a lot. However I feel that this would be less focused on coding an interaction and turn into a game situation. As this is not the main goal of the brief, I will try to stay away from it.

This example demonstrates the type of coding that I would like to attempt in the way that it uses simple clicking and direction to create a fun interaction. It is also simple, but entertaining and so I will think about how I can use it for inspiration throughout my project.

Final collation of images

This shows my final 4 images, collated into one final image. Starting with a structure made from snowflakes, it moves into a noisy image, made from the same flakes, but dispersed. The image relates to how snow moves and breaks apart from the original fall.

Background

The background ended up looking quite sparse and bare and this detracted from the general flow of my images. So I decided to add a light pattern. This was made up of large snowflakes which were an almost see-through blue, overlayed over the original code. In contrast to the main snowflakes these patterns go from noisy to structured, giving a juxtoposing feel to the images.

These two shots show a close up of the first and last images and how there is a subtle pattern of large snowflakes in the background. I didnt want these snowflakes to be too noticeable but still something to break up the white areas.

Colours

Originally I thought that I would go with warmer colours to contrast the usual notions that come with seeing snow. I had planned to go with a warm orange colour to show how some people feel when it snows and how it can be a joyous occassion. However I felt that in the flow of the project, a light ice blue ended up looking more effective as it suited the natural, gentle flow of the snowflakes. I also added an opacity so that the more the snowflakes clumped, the darker the colours became. This creates a realism that relates the image back to real snow fall. Originally I had a darker blue but I felt that this created too much focus on where the snowflakes clump together and worked better with a slightly transparent colour. Also, when the snowflakes merged/overlapped together a fuzziness could be seen which mimics how snow seems soft when it falls together, but when examined by its self it is actually a hard, defined structure.

Final panel- how it falls

 These show the development of

how the last panel would flow. The image to the left looks to linear for noise and not naturally flowing across the page, so I developed it to fall downwards. However in the end I felt that the snow should originate on the left and float up as well as settling on the ground, shown in my final work.

Layout options

These show sketches of how the panels could flow across, from structure to noise. Originally I wanted to go with an original large snowflakes, made or smaller ones, which then broke into noise. However this didn't imitate or reference the way that natural snow moved and I wanted to relate to it in some way.

I then thought of the different ways i could adapt this, shown in my notes to the left.
    

Here I developed the different approaches once I had decided to make the snowflakes float across the page as opposed to the original idea of coming from and original point.

The first idea shows the original large snowflake which then was blown across the page by wind. This mimicked the way that real snow would act, but as the individual snowflakes would hardly show the curve of the wind because they would be spaced out, I decided it would just seem too random.

In the second idea I originated from the large snowflake, but then moved the flakes across the page more naturally. This idea seemed to flow well apart from the disjointed first two panels. I chose this to develop.


The last idea skewed away from a large snowflake and veered towards the idea of medium sized snowflakes made up of the small ones which then broke apart and floated across the screen. However this still seemed too disjointed.

Small structures making up larger one

Originally I wanted to have a snowflake like this, made up of the smaller snowflakes. This creates a different aspect to the design because it creates structure within structure. This could also relate to the fact that the noise in the later panels would be made up of smaller structures.

Snow movement research

Here I looked at the different ways that snow can fall and how synthetic snow can be made to look natural. 

Coding the base snowflake

Here I created the snowflake that I would use as the base for my structure and then moving into the noise. I felt that this flake looked spindly enough to create a complex design that wasn't too busy. For the code, I used basic lines and variables to create the structure so that it can be easily adapted if I wish to change it throughout the design.

void snowflake()
{
  float x = xp;
  float y = yp;

  float h  = 50*s;
  float h2 = 35*s;
  float h3 = 10*s;
  float h4 = 8*s;
  float h5 = 5*s;
  float h6 = 8*s;

  //vertical large
  line(x + h/2, y, x + h/2, y + h);
  line(x + (h/2-h5), y - h5, x + h/2, y);
  line(x + (h/2+h5), y - h5, x + h/2, y);
  line(x + (h/2-h5), y +(h+h5), x + h/2, y + h);
  line(x + (h/2+h5), y +(h+h5), x + h/2, y + h);
  //horizonal large
  line(x, y + h/2, x + h, y + h/2);
  line(x - h5, y +(h/2-h5), x, y + h/2);
  line(x - h5, y +(h/2+h5), x, y + h/2);
  line(x +(h+h5), y +(h/2-h5), x + h, y + h/2);
  line(x +(h+h5), y +(h/2+h5), x + h, y + h/2);
  //top left to bottom right
  line(x + h3, y + h3, x + (h-h3), y + (h-h3));
  line(x +(h-2*h4), y + h4, x + (h-2*h4), y +2*h4);
  line(x +(h-h4), y + (2*h4), x + (h-2*h4), y +2*h4);
  line(x + h4, y +(h-2*h4), x +2*h4, y +(h-2*h4));
  line(x + 2*h4, y +(h-h4), x +2*h4, y +(h-2*h4));
  //top right to bottom left
  line(x + h3, y + (h-h3), x + (h-h3), y + h3);
  line(x + h4, y + 2*h4, x + 2*h4, y + 2*h4);
  line(x + 2*h4, y + h4, x + 2*h4, y + 2*h4);
  line(x +(h-2*h4), y + (h-h4), x +(h-2*h4), y +(h-2*h4));
  line(x +(h-h4), y +(h-2*h4), x +(h-2*h4), y +(h-2*h4));
}

Types of snowflakes

I decided to use the snowflake as my precedent and have begun to look at different types of snowflakes and their forms. Below I sketched out different types of snowflakes that would be simple enough so they wouldn't create too much noise in the original structure, but enough complexity so the form will be interesting.

I also researched different types of snowflakes to aid my drawings.

I ended up going with the top left version of the snowflake as it is complicated enough to be interesting, has a good differentiation of length between the diagonal lines and the straight vertical and horizontal lines but is simple enough to not be too noisy.

Precedents

 Cell structure: To show how branches of objects can cause a structure which also looks noisy

Dandelion pattern: The repetitive structures are made up of smaller structures which then break apart. This technique taken from nature will create opportunities for different structures to create noise by clashing smaller structures.

This image shows a dandelion converting its smaller structures into snowflakes. Since these are two of the natural precedents I have been looking at it was interesting to see the two in relation to each other, despite the real objects being in different habitats.

I am using this dandelion to show the different structures that smaller structures can make up through basic repetition.

 These 6 images are pictures of crystal membranes, usually made when freezing water and I found it interesting that the basic structures resemebled snowflakes and how each branch of the membrane is a simple repetition of the others.

25 iterations

Array of my iterations

Arrow base

I have uploaded this photo to show how an arrow can be represented by simple, base shapes. This made me think about how my iterations can stay true to my form while also being transformed and changed.

5 iteration notes

Through more exploration of my form I have decided that my original 5 forms may be too abstract and not truely represent my original code. Because of this, I have decided to replace some of these iterations with new ones which are more true to the original form.

Forms

While creating iterations of my design, I found that the form could become too distorted and not truely representative of the original. Because of this I have slightly adjusted my codes so that the real form still comes through in the iterations.

5 iterations