The finished code

The blue successfully represents the water and the green for the tadpoles. The movement in the tadpoles is beautiful and smooth, the mouse interaction represents feeding them and allows you to play with them and freeze their motion. The long screen size makes the mouse interaction easier to focus on and more enjoyable for the user.

After much careful consideration into the colours and size I'm very happy with it. This code was very difficult to write from scratch but I'm glad the tadpoles movements are so smooth and life like. That's the thing I'm most happy with in this project.

Developing the colour and size

I then developed the perfect screen size. This allows a still nice square shape, but enough room to interact with the tadpoles and allow them so split up. By making the screen wider rather than longer it is easier for the user to move the mouse horizontally as opposed to vertically.

This light green background is too bright and 'apple' coloured. It needs to represent a swamp. 

Still too bright.

Finally got the tadpoles to a good, deep green colour which correctly represents their true colour. 

This green makes it easier to see the tadpoles but isn't a pleasant shade to look at.

The green is too dark here.

This is more of a sky blue than an ocean blue which is what I'm more wanting to represent the water correctly. 

The blue is too bright.

The blue is too dark.

Experiments with size and colour

I began experimenting with background colour, back ground size, tadpole size, tadpole amount and tadpole colour to find what works best.

Tadpoles with a slight green tinge

Lighter blue background. I was having trouble getting the tadpoles a deep green transparent colour.

Light blue background and tadpoles.

Now experimenting with size

Larger quantity of tadpoles. I felt they were more like particles and less like tadpoles at this size.

More of the tadpoles and size 20.

Fewer tadpoles and size 20

And even fewer tadpoles.

Experimented with a deep green background which looked horrible.

Experiments with the size and colour

I have begun to experiment with the size of the screen and the colour of the background. 

For the size of the screen I really need to find what works best as an interaction. If they screen is too large the tadpoles flocking may not look as good and with the screen too small the interaction isn't as effective. I need to balance these two factors successfully. I also need to figure out what looks best as a screen size. Whether it be a perfect square or long horizontally or long vertically. 

Size

I feel that this screen looks aesthetically pleasing. The mouse interaction as a good horizontal movement going but I feel the interaction would be more interesting if the movement were vertical also.

This screen is far too long down the eyes don't like it as it's not as easy to follow the interaction.

I experimented with making the screen smaller to see if the interaction was more effective this way. I found the tadpoles couldn't flock as far and their character therefore wasn't as apparent. The interaction was a lot more boring as you couldn't make 

Colour

I have began testing the colour of the background only. I will narrow down the best colours and then try them with the coloured tadpoles. For the background test I will keep the tadpoles while transparent for now.

This is the colour I have been currently working with. A very nice blue but perhaps too dark? So I tried a lighter one....

Far too light and makes the code seem too cartoon like. A deeper blue is perhaps more sophisticated.

This blue seems to have a tint of purple and is very cool toned. Not sure how well it would work with the perhaps green tadpoles (unsure of tadpole colour yet)

This deep blue seems nice but still a little purple toned. Really need to test this with the green tadpoles.

List of things to do on code

This is to help me understand each step that needs to create my code within the next 2 weeks.
I can refer to this and reminf myself what needs to be done in the steps to creating my finished code.

Brain Plan

A diagram to organise my thoughts, plans and interactions with this code. Something I can reference to when remembering exactly what character I'm wanting my code to behave in.

Code that I'm stuck with

It's very hard to see in this image due to the bold, bright colours which I will not be using for the finished code! But there is a green dot in the middle of the blue square (background.) The green dot is currently just moving back and forth on that horizontal line.
I have used an if statement to do this but I can't figure out how to then make it go into other directions.

I want the dot to "swim" around acting as a tadpole. It therefore needs to zig zag ad change it's swimming direction all acroos the screen and not just in vertical and horizontal movements. I would like the tadpole to curve around in it's movements to create a more tadpole like behaviour.

Feed back from interim

A good piece of advice I was given at the interim was when the mouse if moved through the flocks of tadpoles, rather than them just swimming away maybe some of them could stick to the mouse.

I think I need to get some paints and experiment with colours to really define the specific aesthetic I'm trying to achieve.

Still currently very stuck on defining the tadpoles behaviours as I'm struggling with the code which is a little worrying. Last lesson I spent 3 hours reading flocking algorithms which was really hard to understanding.

Once I work out how to write the code for one of them I know Ill e able to figure out the others. But for now I remain stuck and with only two weeks left I need to make sure I get some help with this. A clear flocking tutorial in the Internet would be helpful but I can't seem to find one and don't want to steal any code as I need to understand how my flocking code works.

Exmaple Gradient

Possible Colour Palettes

I searched 'tadpole' on colourlovers.com to see what results I would get. Here are some of the colour palettes I like so far:

Story Board - interim

The code will replicate a flock of tadpoles. The colour palette will consist of blues and greens to replicate the underwater environment the tadpoles live in and the tadpoles colouring. The tadpoles will be small but still clear enough to see their movements. They will have flowing movements to appear as though they're 'swimming.' The colour palette of the tadpoles will be green but each tadpoles variant of green may be different. Each tadpoles size, speed and direction may be different too so they have their own character. However not every single tadpole will be entirely different. There will be groups of each one. Having different characters for the tadpoles will make them seem more natural when put into a group together. Having them all identical would seem very unnatural. 

When the mouse is clicked and held down the tadpoles will begin to move towards the mouse and group together, staying as close to the mouse as possible as if feeding off it like bread in a tank of tadpoles. When the mouse is just moved through the code but not pressed it will break up the flocks of tadpoles as if they're scared and swimming away from the mouse. By the user doing this they can interact and change the tadpoles movements. 

Flocking codes

A list of flocking codes that I have found to take inspiration from and to see how they've made their code.

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

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


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

I found none of them to be particularly special or interactive so I won't over analyse them. The last one had a very cool, 3d aesthetic but no real flocking interactive options.

Tadpole coding inspiration

I went onto openprocessing.com and searched for 'tadpoles' to try and find what other people have made for inspiration and so I can see how they've written their code.
This is the results of what I found.

Found from: http://www.openprocessing.org/sketch/49581

The tadpoles in this code move very slowly and aren't very clear (qquite pixelated looking.) However I really like their swirly movements and the blurs on their tales. Gives them very angelic and graceful movements which is an aesthetic I enjoy.

Found from: http://www.openprocessing.org/sketch/8407

I found this code to be very successful.

I really love the shapes and life like movements of the tadpoles. Unlike the previous tadpole code, they have their own shape and aren't just circles with blurs. They also swim off the screen which gives a very natural feel as if you were just glimpsing at one spot in the sea.

One of the best parts of this code is when you hold down your mouse an drag it through the tadpoles it interrupts them and their swimming patterns which I thought was pretty cool. This is an interactive code and I want to build upon this type of code and make it more interactive.

Scetch I drew on Photoshop

Just a really quick design of the type of shapes that I woudl use to represent the tadpoles. This picture will help me for when building my code to keep the main idea in focus. The tadpoles are eating bread at the top of this image.

A photograph of a real tadpole to draw inspiration from.
Found from: http://www.google.co.nz/imgres?num=10&hl=en&biw=1680&bih=845&tbm=isch&tbnid=EpkdA2DNxYyr2M:&imgrefurl=http://realmenrealdads.com/2012/03/16/traumatizing-tadpoles/&docid=GPy6ZIUB6qvMMM&imgurl=http://realmenrealdads.com/wp-content/uploads/2012/03/tadpole.jpg&w=325&h=365&ei=Du5bUMv8DpGwiQf-2oFY&zoom=1&iact=rc&dur=320&sig=101123237934194788256&page=1&tbnh=144&tbnw=128&start=0&ndsp=32&ved=1t:429,r:25,s:0,i:214&tx=95&ty=97

Project 3 idea

Tadpoles eating bread - inspiration found on youtube.

An idea for project three is to take on the aesthetic of tadpoles eating bread. I'm finding inspiration from they way the swim and gently interact with each other and their flowing tails. I was thinking for my project that maybe their is an interaction of trying to feed them and they either grow larger or morph. I will still need to think about this idea some more

From last lecture I learnt what type of interaction the markers are looking for. It can't simply be the mouse causing an interaction nor can it be total control of the interaction. When moving or clicking the mouse an interaction needs to happen but it must be unexpected and slightly different each time. The user can't expect to know what's going to happen.

I will draw some sketches and brain storm this idea further.

I've also had a second idea drawing inspiration from a spider web. I'm not sure what the interaction would be yet though.

Lesson Reflection

I have been told by my tutor that my canvas idea is too simple. I need a more 'interactive' idea such as the sea monkey idea shown in the lecture.

I will sketch a new, interactive idea out and begin to make my first prototype.
He is right and I want a more interesting interaction.

Maybe I wil involve a character type idea to mine also.

Lecture Reflection

Lecture Reflection -
A useful website for ideas in code - yugop.com

Three questions to remember:
- What is the person learning from this interaction?
- How long would it take a user to completely learn this system?
- Will it still be interesting once they've completly learnt it?


I found this lecture really helpful as well as the examples of code given from last term.

Project Three, Lesson One

Class Reflection:
Today in class we learnt how to code mousePressed and mouseX mouseY. I changed a few of the colours and I think I understand it a little. I'm not sure if we have to add loops to our code but I think it will start to get very confusing when that happens. I will try really hard to understand the code as I write it, so I can make the interaction exactly how I vision it.

INSPIRATION

http://openprocessing.org/sketch/68756
I really like this coding as it paints a picture with code, the background acting as the canvas.
It also gave a lot of different options in interactions:

press
z = stop
x = go
r = change colours
t = restart (black)
y = restart (white)
left-click mouse = points go to where mouse clicked

I really love photo manipulation and colour editing on photoshop (it's one of my hobbies) creating very fantasy and surreal images. So this is one of the reasons why this type of image appeals to me. With the black background it almost has a "space" type of feel to it. It creates different sized circles at the ends that really adds to the "space" feeling. I like how you can change the colours and by clicking the mouse you can control where the lines go to. It must have 'random' code in it as the lines don't touch the destination in an ordered time or place. The colours and circles sizes also appear to be constrained random variables.

http://openprocessing.org/sketch/68760

What I really like about this code is as the lines follow your mouse around the begin to fade out, preventing from a big build up on the screen. The last inspiration I looked at however, has got me thinking about maybe creating a type of canvas through my coding as this is something that really interests me.

http://openprocessing.org/sketch/68772

"Click the mouse to start the dot, move the mouse around, click again to stop the dot, and press any key to clear. "
I think this coding is visually very nice, especially the way it layers and fades. It would have been more effective if the dot that began was smaller and there were possibly more translucent colours involved. I also think that the background could have been larger and maybe even a different colour. More random controlled random variables could have been used to make this coding more visually appealing.

http://openprocessing.org/sketch/68805

I choose this as inspiration to research in as this code also creates a very interesting, visual "canvas" type effect. The lines follow the mouse around, allowing the user to create curves using straight lines which is very interesting. I think the colours don't go together very well. I would like to produce something with a very good colour palette to really make the coding a piece of art.

http://openprocessing.org/sketch/68961

This coding is NOT AN INSPIRATION. This is just an example of a code I really don't like. The design doesn't do much interactive (just follows the mouse around from the top left point.) The circles and flashing colours are very hard on the users eyes and this isn't very pleasant at all. I do not want my design to induce seizures. I will use complementing colours and not make my design heart other peoples eyes.