DSDN 142: Final Interactive Mouse Toy

So, I've gotten there. It's as complete as I can manage with the time I've been given and the knowledge that I have.

The interaction that I've created revolves around one element of control. The user only has one input. All they can do is create suns, by holding down their mouse button at any given point. The suns cause the little tree to become enlivened, and it starts to grow.

The user has a degree of control over the plant growth. The more suns the user has on screen at any one time, the faster and higher the plant will grow. Once the tree gets to a certain stage in its growth, it starts to sprout leaves, and then when it reaches the ultimate point of growth, it starts to sprout flowers too.

While the user has complete control over solar creation (a nigh-on godlike power), they are limited too. The creation of the tree is only partially controlled by them. They have one input which controls whether the plant grows, and also a remote control over where, but overall, they don't control the tree.

Having the tree grow remotely towards the suns (as long as they aren't placed below the highest branches) gives the user a sense that they know what's happening, but at the same time sometimes that won't always work, reinforcing the idea that Nature isn't our servant.

I'm pretty pleases with the project as a whole, but there are somethigns I wish I had had the time and knowledge to add.

Major source of code: Gaia Beta

Below is the code! Play!

DSDN 142: Final Alterations

Wish hand-in now looming, the project has taken on a significant amount of changes. Once of the things that I was told about my project was that the tree simply wasn't a big enough feature. It lacked a degree of prominence that would elevate it to the next level.

I solved this lack of presence by means of  adding leaves into the element of the trees growth. Once it splits into different branches, the leaves begin to appear. I tried some leaves that were attached to the branch, but they were far too regular and it looked really, really bad. So I made them a little bit more random and also much smaller, so that they added to the overall tree shape, as well as what a tree generally feels like in our minds.

Another element that I incorporated was a background that seems far more becoming of a tree-on-a-hill-in-sunlight. Having a background steeped in darkness just doesn't seem right. I wanted to try and have a dawn-type change, but ended up running out of time and knowledge of how I could alter my code to allow for a background that refreshed in the draw function.

Another thing that I added was a sort of ultimate goal for the user. Despite the fact that we were warned to not go for an interaction that has a definitive end, I kind of think it seems like it should for mine. The tree matures, and then if the user wants they can destroy the trees leaves and flowers. So ends the trees instance of life.

For the flowers, I wanted to create something that is both subtle and simple, so it doesn't immediately become a ridiculous feature. I want it to be a part of the tree, not something that overrides the tree in terms of importance.

So I created these little puppies. Okay so maybe they aren't puppies. But they're pretty cute.

DSDN 142: We Have Bark! And Working Suns!

So, I've managed to meld the two codes, and get the suns causing the trees to grow. We have a success! However, I'm still working on the issue of the suns relying on a refreshing background while the tree does not. This is however only an aesthetic decision, so that's something I can leave till a little later.

One of the things that I want to have functioning as well as the tree growing is that when it ages, it also changes colour from green to a more bark-ish brown. This was easy enough to set up in the ageing loop, and I got a tree that went from green to brown and then went on into red and then hot pink. 

While this did make me laugh, it's not exactly what I wanted. Mistakes make learning so much better though! Without this mistake, I wouldn't have taken the initiative to adapt the code further to suit my needs!

So, to rectify that issue, I placed some lines of code that inhibited the growth as soon as it got to the colour that I wanted. This resulted in a very pleasing brown finish when the tree reached "maturity".

Another part that I discovered when implementing this is that each branch ages separately, rather than each individual segment of the tree ageing separately, as I had anticipated. This actually looks really cool, because then there are little green segments that show new growth!

And now to the major clincher. I managed to fix my suns! That's so damn exciting. After thinking about it long and hard, I figured out that if I had a growing black circle that was drawn first before each frame of the sun, it would be just like if my suns were being refreshed! 

Managing to mitigate the problem relatively simply without having to re-write masses of code is great, and I can definitely say I'm very happy about that. The suns look great, however, because they are refreshing 60 times a second, there is a slight problem when they overlap with the tree.

What happens is that the tree flashes at a much slower framerate than the suns, causing it to feel very erratic and almost as if the tree were in pain. Now that's really interesting, because one of the things that I wanted to do in the beginning (when I had no idea quite how hard this all was!) was to make the tree die when the sun was placed too close to it. Now, I still don't know how I would code that, but this might be a simpler alternative to work with.

For some reason, you feel quite bad when this little tree flashes like that. It feels really painful, so it actually fits perfectly with my theme of care and prevention of damage. The suns don't actually damage the tree at all, it just flashes in an awful sort of way! Now, to make the flower!

DSDN 142: A Growing Tree!

V = Victory!

if  (code looks like this){
V = true
}

Yay! Success has been achieved in the solar linkage to the plant! I now have a plant that grows due to the existence of suns on the canvas. This is really cool, because it's exactly what my interaction is about. Having been able to get the suns into my main code, this then allowed me to link the growth of the plant to the duration of the suns existence.

Another element I was able to shape to my will was the Sundrive code. That code forced the tree to grow upwards, but I reshaped it to grow in the direction of the existant suns. I also incorporated a random element into it so it's not entirely clear that the tree is gravitating to the suns, so that the user feels like they have an element of control, but they in no way really control how something can grow naturally.

This sense of the natural creation process being something not entirely controllable means that the user will feel also an odd sense of disconnect with the plant, and realise that this is the way nature works. Plants grow towards what they need, but at the same time there is an inherent sense of randomness to their patterns.

The main problem that I still have at the moment is that the background needs to refresh for the suns to disappear again and actually look the way that they should, but if I refresh the background, the tree disappears. I don't want that. So that'll be something to figure my way around.

The battle with the code rages on, so having a small victory like this is important to me. The tree is lookng good, but the next thing I had to do was get some colour into it. Compared to the rest of this, this is the easiest thing I've had to do in a very long time.

Now that there is colour in the tree, I need to make it look more like a tree by linking a colour change to the aging of the tree. I want the trunk to go browner as the tree reaches maturity. Not the easiest thing in the world, but not the hardest either!

DSDN 142: Transitioning The Code

Slowly I'm starting to integrate my two pieces of code together; melding them so to speak. It's not the easiest thing in the world, and in particular getting the actual tree to work in the stage I've set up is proving to be a mission.

However, that said, that which I do have is very pretty. The interaction itself at present is merely clicking and having a tree grow in stages, which isn't really much of an interaction at all. I also definitely want to nail down the actual aesthetic of the tree, and put some leaves/flowers on it. It's a little bare at the moment.

I've still got to come up with the design for the leaves and flowers!

DSDN 142: Altering & Shaping Stolen Goods!

To my eternal amusement, I've managed to use my wits and endless (yeah right) charm to reshape this code to do my bidding (for now). Altering code that isn't your own can be really tricky, because often other people have a totally different "style" of writing their code. For example, it aggravates me when people don't leave spaces between calculations. Despite the fact that it saves space, I find it makes things harder to read and structure.

I managed to re-write the code so that now only one tree grows, in the background format that I want, and the tree progresses in growth based on mouse clicks, rather than the whole tree growing instantly based on one mouse press.

In theory, this should allow me to connect the growth element to the presence of suns beyond a certain size, encouraging the tree to grow based on that. It should be relatively simple, but with coding you can never tell.  I'm still slowly working towards a stage of ultimate synergy with Processing, but I predict that with the current amount of time spent on learning it, that could be a few years out.

Having the single tree also grow from the point that I have decided is the top of the hill is also really useful, because in theory then I should just be able to copy this code over, and with some small alterations, apply it to my solar creation code with the awesome setting that I have.

The only concern that I have so far is that this code here that I've re-written is due to the background refreshing itself in my solar creation code, while in this code, the background doesn't refresh. I can see this causing some issues, and at present I'm really not sure how to rectify it.

DSDN 142: Plant Designs

I'm having massive difficulties with creating a tree growth code, so I'm thinking I'll look into other peoples code, since there is some simply fantastic stuff out there in terms of what people come up with.

The way that a lot of trees are coded I've found has to do with fractals. However, I want a much less uniform plant, so looking at fractal trees really won't be the best option. The way that I see trees growing is relatively random, with some fractal-based elements.

I found this code here, which I find is so simply beautiful.  When you click on the screen, a tree grows from where you click, before fading away after about 6 seconds. It's actually really really fascinating and I'm very intrigued by how the code functions.

The creator of the code built the code into many classes, with a class controlling the branch point creation, a plant controlling the growth, a class controlling the branches themselves, and then a final class that ties all of the other classes together into a coherent whole.

I've decided to splice some of the elements of this code in with my sun creation, because the way to actually create the trees and write that code is a little beyond me at present. What I'll take from this code is the bare tree growth, but I want to slow down the way the tree grows. I want it to be a very slow, more visible and controllable growth.

One of the things I have to create however is the code that will make the plants grow towards the suns in an aesthetically pleasing way. It shouldn't feel too contrived, nor should it feel way out of control. I might need help from the tutors for that part.

You can find the original code here.

DSDN 142: A Refined Scene

So, after the interim presentation, one of the things that came out as a critique was the slight lack of congruency between my design for my sun, and the design for what is now a hill. I've decided to ditch the asteroid idea that I had before, since it feels a little bit contrived. One of the things I've also decided that aren't going to work for me is the idea of having the stars in the background lighting up the night sky.

Having that amount of stars refresh every sixtieth of a second would cause massive performance issues, and boy it did. So the stars have been scrapped from the code, and replaced with a much more simple black background.

Since another issue was a bit of a lack of  congruencies between my designs, I decided to abandon the smooth gradient of my hill and make it similar to the stars, resulting in a definite designed similarity. The design definitely feels much more thought out now, which is definitely beneficial.

Another element I decided would be a good idea to implement would be a splash of colour to the suns. This immediately livens up the scene and makes it feel more alive and successful as a place for things to grow. This should play with the human perception of what situation is ideal for their precious plant to grow in.

I also flicked around with the colour of the hill, which is a much more inviting green colour The main reason for changing the colour was because the brown was ridiculously tricky to get looking good on a variety of computer screens. It would always come out more yellow on one and then more red on another screen.

Green seems to be a lot more consistent, so for those reasons I've revamped the hill, and the slight yellow tint makes the suns feel slightly warmer.

DSDN 142: Why Classes?

So, apparently classes will assist significantly for the plant creation, because it would allow me to create something very specific many many many times over, kind of like arrays, but allowing many more elements to be defined much better.

I also need to look as to how to apply some techniques as to how to generate plant grother that looks reasonably accurate. I don't want it to look photorealistic, for obvious reasons, and I want it to feel like it belongs in the scene. So in a way it has to be stylised, but not ridiculously so.

Image acquired from: http://www.morphogenesism.com/profile.html

So yes, figuring out just how plants grow is going to be essential. On the other hand though, I don't want to be creating a fractal tree. Those are littered all over the internet. I'll definitely have to incorporate elements of a fractal tree, but on the whole it will definitely have to be something that still feels like it could be real.

Image acquired from: http://www.katecartwrightart.com/kate_blog/?paged=4

I definitely have to convey the truth of the growth in the plant. It's got to be something people can relate to and feel like they need to care about. It's all about creating a relationship for the user to cherish. The plant therefore needs to feel vulnerable and unprotected. The user can't just look at it and then say "Oh, that's just a useless worthless piece of grass.". That wouldn't be what I'm going for at all.

But anyways, I'm still getting my head around classes.

DSDN 142: My Pseudo-Code

For coding we have to create a sort of pseudo-code. This is to help us understnad exactly what we want to achieve. The pseudo code is a sort of recipe for planning out our Processing code, that's written in plain English.



Main_Reaction: Plant Growth
{
A plant sprouts from the hill surface.
It grows slowly as its first sun dies.

If Sun_Creation is called,
   The plant grows towards the sun that has been created.
  
   If the plant is close to a sun for a long enough time,
      It grows leaves and a flower.
   Else it splits and grows in two directions.

   If the plant is intersected by the edge of the suns heat,
      It turns to ash and fades away and a new plant grows from its ashes.

Else the plant waits for a sun to be created.



Main_Interaction: Sun_Creation
{
Repeat() {

   The user moves the mouse to the desired location for the sun.
   The user clicks and holds the mouse at said location.
   A sun slowly grows from users mouse.
   The longer the user holds the mouse, the larger the sun grows.

   The user releases the mouse after an arbitrary amount of time.
   The sun now begins to decay and dims and gets smaller.
   The sun disappears.
   }

}

DSDN 142: Interim Code Submission

So, this is the code as it stands presently. Still a lot to do, but I know what I have to do, just not how. But I'll figure it out, for sure. I really enjoy creating the suns, but it will be so much better once the plant has been coded and added.

DSDN 142: Storyboarding The Solar System

So, since for the interim hand-in I haven't got completed code, I have come up with a storyboard detailing how I want the interaction to progress. I want the plant to feel really vulnerable and quite delicate, so the user has a feeling of resposibility for the little 2-D creation.

At first the plan grows very slowly, because there is no light around. The little things grows and shows its meagre beginnings.

The user creates the first suns, and night on immediately, the palnats growth accelerates. A noticeable change happens in growth too, since the plants now starts to grow to the nearest, largest sun. I branches off at randm points, so as to seemingly attain even more sunlight.

The more suns are created, the faster the plant grows. It reaches high into the heavens to get closer to the precious sunlight. The conditions are almore right for the plant to bloom. It jsut needs a little bit more light and then it will be perfect.

A perfect sun! A large celestial being that will provide tremendous amounts of energy before it expires! The plant reaches higher and higher as the user with the cun-creating hand lets the sun grow. The plant has enough energy now to sprout a flower and maybe some leaves.

And it blooms! The plant can create what it has always wanted to create! It seeks the light with its petals, and the little leaf harvests all the solar rays it can.

But no! What is this! A burning celestial entity has been created half way down the stem, and the plant begins to be cooked. Slowly as the solr rays reach the critical point its stem turns to ash and the plant disentegrates. But from the ashes of one plant, another is born.

DSDN 142: Enhancing and Furthering

So, since I've got my sun creation under control, I now turn to combining the different elements I have so far for the interim hand in. So far I've managed to combine the sun and the asteroid surface, which surprisingly wasn't nearly as easy as I anticipated.

Another problem I had to overcome, which is actually quite a basic, simplistic element of the code, was understanding why when I wanted to activate the saveFrame() function, it wouldn't work quite as expected.
The realisation that it was just an extremely simple element of the arrangement of my code actually made me feel quite stupid.

I've slightly adjusted the height of the arcs at the bottom that form the planet, because I want to give the plant more space to grow and I want to give the user more room to create suns with.

This is the current look and feel of the space. I am a little bit disappointed with the colour of the planet on this screen though, because on my screen at home, the planet is much browner, which is what I want. Damn RGB incongruencies...

DSDN 142: Enhancing the Radial Gradient

So, after intense work with my tutor, we managed to combine my solar entity creation function with an array,  so that it would allow for multiple suns to be created at any one time.

One of the main problems we had was getting the system to reset the value for the size of the sun each time a new one was created. In the end we solved this and have 4 arrays that decide the creation of suns. This now allows the user to completely create each sun from the beginning. The suns still slowly get smaller and smaller, and then disappear. It's great. :D

They looks really good as a collective too, and now I've just got to combine them into the environment. Another step on the list of doom down! 

They almost remind me of colourless fireflies! Or maybe a parade of alien spaceships.

They have an omnipresence in a way, a feeling of silent watching and waiting. And also they still seem like they are moving to me.

DSDN 142: Plant Growth Precedents

 So, the most difficult part of this interactive project is going to be creating the code for the plant that tracks where suns are, since I have to create some sort of algorithm for the plant growth, connected to a sort of distance meter, telling it to grow towards the light. It's going to be tough.

So rather than stress about that, I decided I would visit OpenProcessing and have a look at the masters of coding. That way I can just tell myself how awesome there stuff is and how I'll never make it to that level.

Spiral Growth by Sasa Zivkovic

Sasa's work is amazing. It's so simple and yet the interaction is pure joy. The mouse, moving from left to right, decides how large the circles are that emanate from the centre point. When the circles get bigger, the angle they leave the centre at is increased. When the mouse button is held down, the rotation reverses, and yeah...you just have to try it out for yourself. The patterns you can make are awesome.
You can find it here.

Roots by Greg Kepler

This is a totally different processing sketch. This sketch draws randomly generated roots when the user presses the mouse button. Each root created is unique and separate from the previous one. The result is very realistic. This was over 50 clicks down the line, and it really does look like what would happen in real life. Definitely worthy of a look at the code for some help.
You can find it here.

Still searching for more!

DSDN 142: Creating The Radial Gradient

This is the next section on my list of things to do for my coding project. The radial gradient development for the solar entities. This was definitely one of the hardest things so far. The nested for loops making up a function that wrote the circles creating the illusion of a gradient is rather cool, but might not be the best way of doing things.

I also managed to significantly advance it from what I had in lesson, so that now the location of it is linked to the mouseX and mouseY values. This allows me to move and manipulate the sun on the fly. I have the sun set to expand and brighten the longer the mouse is held down, with the effect slowing down the larger the sun gets.

However, being me, I wasn't satisfied with this result. It just really doesn't get across the effect that I really want to achieve, so I continued developing the code. Since at present my work is rather stylised, I decided I should stick with that current track record and continue onwards to make the solar entities even more awesome looking. 

Having the banded gradation actually makes them look far more awesome. I really like this look, but it still feels like it's lacking somehow. Not sure how.

This is immediately so much better. The actual central light makes it feel like a sun caught in some sort of foreign nebula. Having a bright point at the centre just makes sense too, and having the central point get slowly larger while the bands for the gradient move outwards with the mousepress makes this a very dynamic entity.

Now I just need to make them part of an array!

DSDN 142: The Environment!

Since I'm starting to actually develop the code now, I decided I would make my life significantly easier and break down all the components I need to get done for this project to work. This strategy was suggested to me by my tutor, because it's easier to develop the code segments individually than it would be to develop them all together.

The pieces that I need to develop are:

-The Environment (Setting)

-The Radial Gradient (For the sun aesthetic)

-The Array System (For sun creation)

-The Plant System (For plant growth)

-The Sun-Plant Interaction (Distance tracking, growth alteration)

-The Flowering System (Distance-time tracking, growth alteration, aesthetics)

-The New Plant System (New plant creation)

And yes, these are pretty much arranged by difficulty... Yay. But I have to start somewhere, so I started with the top thing on the list. The environment, drawing from my inspiration of the Little Prince, is going to be set in space on an asteroid.

So, I started working out the basics of the environment, as in the background and how it would look aesthetically. One thing that I really want to do is have an elongated, portrait-oriented screen, since the whole thing is about growth, so there needs to be plenty of space vertically for the plant to grow.

I created a little nested for-loop for the stars in the background, and then made a huge circle in the bottom end that is the planet. One thing I think I might try is to add a gradient onto the planet, It might make it look a little more realistic. A splash of colour might be nice too, although the black and white aesthetic is rather pretty!

I added some fun colour to the planet, which makes it feel a little bit more real and tangible. I wanted to capture the idea of a sun rising over the edges of the planet, and giving it a shadow side, caused by a separate sun we can't see. The browns still feel very red though. Since I'm going for something a little bit more stylised, the colours I choose will be absolutely crucial.

Here I too the brown into a much more brown territory, away from the red a little. This definitely benefits. I also made the stars a little bigger and a little bluer. I think I may have made them a little too blue now though, so for the actual scene I will roll that blueness back a little.

But yeah, this is my scene! :)

DSDN 142: Learning Functions

So, today in class we learnt all about functions, and how immensely useful they would be in this project. A function essentially lets you create your own little sub-program inside your processing sketch, which you can then loop and do all kinds of crazy things with.

This was a really simple function that I made. The rectangle set at the top is what I used as the base function, and then I made a little loop to make the set in the middle. I allowed for the function to have three variables: x-position, y-position, and width.

So I started looking at how I could incorporate this concept of functions into my next project, and I realised it would be an invaluable asset to my program, since I want to have the ability to create multiple suns as well as create multiple plants that can be created with a range of variables in mind.

The best way of creating multiple suns in Processing though is going to be to use arrays, a skill I have not yet mastered yet, sadly.

DSDN 142: A New Hope...

So, I've had some brainwaves as to for what to do for my project, a bit of an advance on my last little preliminary sketches. The idea that I've come up with is a little more fun and is dependant on a bit of a different sort of control & interaction.

The idea that I've had is a little inspired by the short French novel "Le Petit Prince" (The Little Prince). This little prince lives on an asteroid and he has to defend his little asteroid from the "Baobob" trees that grow there.

Image acquired from: http://abitmoreofme.blogspot.co.nz/2012/01/avec-le-coeur.html

However, rather than destroying the trees that grow unrequested, I want the user to grow these little things that spring up out of the planet. I want the user to feel a little bit attached to the plants in a way. But rather than manipulating the trees through the mouse, I want the user to provide what is the nourishment of the plants.

The user will have the ability to create miniature suns for the plant to grow towards. The longer the user holds down the mouse button, the larger the suns get, and therefore the longer they last. Because stars have a limited amount of fuel, the suns will fade with age and then cease to exist. The plants won't die without the sun, but their growth with be significantly increased when there is a sun in proximity.

Also, the plants will grow towards the suns if they are present. However, if the sun is too close to the plants and it touches the plant, the plant will burn and die. This is a problem that the user will realise if they are careless. Another function that I want to build into the program is that when the plant receives enough sunlight, it will bloom or grow leaves.

I want to create a sense of commitment to the "life" and to raise a question about what is life?

DSDN 142: Ideas In Motion

So I guess it's time I started getting down and dirty with some ideas for this class. I've got lots of techniques I can use that I worked out in the holidays, so realistically I should be decently far ahead. Sadly I'm not, so it's time to step on the accelerator.

Some of the ideas that I have revolve around the concept of some sort of physics-related interaction. These could be a lot of fun, as the base physical laws that we know and live by could be warped and twisted to make the interaction more innovative.

The idea of playing with physics gave way however to the idea of appreciating something a little bit. We see plants around us all the time, and yet they grow too slowly to make us stop and appreciate that growth a little. We see the growth as a change from day to day. However, what if I accelerated said growth so it was visible, and then give the user the power to influence said growth.

I came up with the idea of a plant that shies away from the mouse, but still has this perpetual urge to grow upwards. You could influence how the plants growth progresses, and then potentially by clicking, you could influence where flowers were to grow along its length, thus having the ability to create your own plant on screen.

Making the user appreciate the slowness of growth would be crucial, but I have to make sure that the interaction isn't so slow that the user feels like that they could walk away. Another function that could be fun would be to allow the user to terminate the growth of a plant, which would generate a new growth!