Creative Coding, Project Three, Blog Nine

After getting to the stage I was at last time I have since reviewed that and looked at seeing if I could refine that into a single/main interaction. It became apparent that perhaps being able to 'collect' the snowflakes onto the mouse position wasn't particularly relevant to the main interaction, so for now I have cut this out.

This is the result of being able to remove snowflakes, I have since removed this feature.

I have also decided to 'invert' my interaction idea, so instead of using the mouse to increase the spinning speed it will instead decrease the speed, while if you leave them unattended they will increase in speed then shake then explode unless attended to.

So far I have the snowflakes becoming faster and faster when unattended then once the mouse is within range their speed dampens down until it has completely stopped.

I am now going to reintroduce the shaking and explosions, then I will look at introducing colour.

Here's the link to my current progress...
http://www.openprocessing.org/sketch/63598

Design Visualisation, Project Three, Blog Five

I have now completed my storyboard...

I ended up breaking away from using traditional squares and instead tried to show my clip as one images. I attempted to use the 'Kraca-Kola' advert as a means of showing the direction of the story/clip in the storyboard.

I also decided to use a made up soda brand for my advertisement named 'Kraca-Kola'. This brand is based on a dominant existing brand. I decided to do this as I thought that the soda/softdrink/juice industry is a very competitive industry with this one dominant brand, and this is what I wanted to show, how dominant and aggressive advertising is in order to gain consumer attention to influence their spending. In my clip as shown in my storyboard I plan to have the dominant brand 'Kraca-Kola' cover up it's inferior rival 'Lepsi', showing the competition there is to gain attention over each other and ultimately gain sales.

I have also made a little test clip, attempting to create the first few seconds of the clip.

I found I made a fair few mistakes in this clip such as not realising my leg was in a few of the shots as well as other things. Also moving the advert within the rubbish bin proved difficult as it was hard to make it stay in the place I wanted it and hard to not knock the other bits of rubbish out of place. Also of course with using my cellphone camera it is hard to keep it still creating a very shaky picture, however when I film my final I will use a better quality camera and have a tripod to keep it steady.

I have also had a go at looking at the lighting effects I would use, I edited the previous clip in iMovie...

I used a greater contrast and a blueish tint, to create a slightly ominous picture, as I want to portray advertising as a 'bad' invasion.

Creative Coding, Project Three, Blog Eight

After not having a lot of ideas of how to progress my application further I decided to have another brainstorm, which this time was successful and gave me somethings to achieve, I found going back to the application progress I showed during the interim presentation useful to remember what was fun about it, so I could reintroduce it to my current progress.

I previously had it that when the snowflakes are within a certain range of the mouse they disappear, I decided to change this so that when within this certain range instead of this I have it so they spin, while the other snowflakes remain stationary. I also further added to this by having it so the spinning snowflakes  shapes spread out also as seen in the image below...

However I didn't like it how once a snowflake was out of the mouse area it just stopped rotating instantly reseting to the default position as seen in the above image. Instead I wanted it so that as they move out of the mouse area their rotational velocity eases down to zero. To fix this problem required the use of more arrays as I needed each snowflake to have its own set of rotational data as well as velocity data. So I created an array for both of these variables with a capacity of 100 as there are 100 snowflakes. I then made it so the snowflakes are always able to rotate however they only speed up when they are in the mouse area otherwise they slow down and eventually stop. 

Here are my array set up variables with the 100 capacity.

This is the result of using the arrays for individual snowflake rotation values.

I then looked at continuing to play with the spec between the shapes for each snowflake and thought it could be interesting that instead of having the this space go back to the original space gap once the mouse moves away from a particular snowflake, to have it stay the same instead, this was the result...

This was pretty fun to play with in terms of the way the shapes interacted with the mouse movement, it's hard to explain but it was quite cool....Here's the link....
http://www.openprocessing.org/sketch/63596

However it didn't lend much opportunity for the direction I was heading in so I removed the function of the shape space increasing when the mouse comes near. I instead looked at having explosions again like I had before. I currently have it so that now if the mouse does not come close enough to a snowflake for long enough it will begin to wobble, if it is still not attended to it will then explode, meaning the shape space will increase rapidly until the shapes of the snowflake are no longer visible on screen. This feature is working awesomely, the screen shot below shows a few snowflakes exploding...

Doing this meant creating more arrays, as I needed separate wobble values and other data for each of the 100 snowflakes to make this possible.

I then added another feature to add even more fun interaction. This time I thought it would be cool that if the mouse position was in a close enough proximity to a snowflake for a long enough time at a fast enough speed the snowflakes x,y position would change to the mouse x,y position. I managed to pull this off as you can see in the image below...

I think this is a really fun little interactive feature which I will definitely keep and perhaps develop on. I think what makes it successful is that it is quite hard to do interns of the interaction not the coding.

I have now also looked at making the shapes of the snowflakes grow as the mouse passes over them, as seen in the image below...

I think this is a fun interactive feature as it brings more diversity to the overall image, however it didn't work so well when the shape size kept infinitely increasing, so I put a cap on how much it could grow...

As you can see above the shapes cannot go past that size, also when the mouse moves away from them they shrink back down to the original size.

So this is where I am currently at, I think I will continue to further develop these features, then I will look at polishing up the applications appearance.

Design Visualistaion, Project Three, Group Assignment Two

Nana technology aims to facilitate the technologically challenged in becoming savvy and up to date in their communications. They offer social networking tutorials and have developed a series of app's for senile geriatrics. Our advertisement aims to attract interest from our target clientele by displaying relevant aesthetic and media. Appropriately clear in meaning and product, for an elderly audience with failing eyesight and hearing. An audio sample from the wizard of OZ soundtrack, which is easily recognisable to our audience, aims to be attention grabbing through its sense of nostalgia. Our slogan ‘making it easier to connect’ simply states the purpose of our range of services, literally making it easier to understand what we provide.

Within our animation, we depicted a nana confused by technology. This relates to the struggles that the elderly face. When “Nana Technology” appears her problems are solved. Showing that our company can help the elderly find joy in technology.

We used the same visual features in both the TV commercial and the poster so our audience can recognise our company in both medias.

Images of Nana retrieved from http://www.123rf.com/photo_2866853_senior-woman-using-cell-phone.html

Signed Brief

Locovisual

“The Vic”; Former Lotus Restaurant

"The VIC" (Klee, 2009)

"The Vic" (Wellington City Council, 2012)

“The Vic” building designed by James Bennie, built in 1935 is a clear example of Art Deco architecture, located on 154-156 Cuba street. The Art Deco style is very present in Wellington, particularly down Cuba Street. Between the great wars Wellington architecture boomed with the predominant style being Art Deco. Art Deco became an internationally fashionable style in the 1930s after the 1925 Industrial and Decorative Arts Exhibition in Paris, France.

Art Deco is a design style which was “characterised by simplified ornamentation and an emphasis on geometrical decoration”(Kelly, 2005), it was also influenced by new advancements in transport of the time, such as trains, planes and cars. This often resulted in a lot of design being 'stream-lined', to create the illusion of speed. Another key feature was the use of motifs such as sunbursts/sunrises, fountains and footlights as well as patterns such as zig zags and chevrons. Art Deco also made reference to other design styles such as Classical design, in particular the use of Classical columns.

“The Vic” building uses a lot of these features. Firstly a sunrise motif is used as a central feature created from basic triangular geometries. Zig zags are used above the window frames, whilst basic geometries are stacked on the concrete 'Classical' columns. The use of tall vertical columns creates an “exaggerated vertical emphasis”(Wellington City Council, 2012), which is also another feature of the Art Deco style, creating elongated design. It is these features which class “The Vic” building as a clear example of Art Deco architecture.

References:

Kelly, M. (2005). Art Deco Heritage Trail (2^nd ed.). Wellington, New Zealand: Wellington City Council.

Wellington City Council. (2012). Heritage. Retrieved from http://www.wellington.govt.nz/services/heritage/details.php?id=199&m=search&street=Cuba%20Street

Petty, J. (2012, May 9). Alt-Modern. Unpublished lecture notes, Victoria University of Wellington, New Zealand.

Klee, A. (2009). The VIC (Lotus Restaurant Building). Retrieved from http://www.historic.org.nz/TheRegister/RegisterSearch/RegisterResults.aspx?RID=5356

Creative Coding, Project Three, Blog Seven

After presenting my application as it was I have since stripped it back in order to rework it and improve it so it is even more fun and interactive.

I decided to strip it back so it was easier to work with and so I can navigate my way through my code easier when adding more interactive functions. In terms of what I stripped back, I have removed the different 'levels' and colours that went with that. This made my application look like this...

Stripped back version of my application.

Here is the stripped back version...

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

I also had a go at stripping away the background as well which created a pretty cool effect, creating the ability to create some cool looking patterns...

One of the cool looking patterns I was able to create.

                                     

Another cool looking pattern

I could possibly have this as a feature in my application as it is quite a fun interaction to play with.

I then reapplied the background and tried some other types of interactions...

I looked at having the layers of shapes separate along the x-axis as the cursor speed increased, this was the result...

I don't think this was particularly successful, it's not greatly fun or awesome.

I then experimented with decreasing the size of the shapes, increasing the size of the snowflake and decreasing the number of snowflakes, I then added a flashing effect to them so the overlapping shapes spread out quickly then go back to being stacked on top of each other...

...As seen here...

This created quite a cool effect however it was quite rough on the eyes, however it could be a cool effect that results from interaction.

In order to make each shape layer stagger as the flash out, I attempted to use an array...

 In the end I found that I couldn't make the array work particularly efficiently as I still had to write out each different value (diffgap[0], diffgap[1]...etc...) and in the end I couldn't get it to work. However since then I have learnt how to make it efficient by using a loop to create the different values using a variable to replace the number in the brackets (diffgap[variable]) and just increasing by a given increment using the loop.

I also looked at decreasing the size and increasing the number of snowflakes...

I further added to this by making it that wherever the mouse position is any snowflake within a given radius disappears as shown in the images below...

I think this feature is quite interactive and with a bit more to it it could be pretty fun too so I think I will keep experimenting with it.

I have also had another look at some applications on open processing and found this one....

This starts the way it is on the left, then when you press a letter on the keyboard it forms into that letter. I think this could be a cool idea, maybe in mine if the mouse is clicked the snowflakes could combine together to make different formations.

Design Visualisation, Project Three, Blog Four

I have decided to change my storyboard slightly now I want to start it with the flyer/poster screwed up in the rubbish, then it unscrews-up itself and continues the things it did in the previous storyboard. I decided to do this as it shows that even when you think you have disposed of an ad or 'put it to the side', it still has an effect on you as if you see that ad again perhaps in another form of media or the product you will recognise the brand.

I also made a test clip of a piece of paper 'unscrewing-up' itself.

I am also currently reworking my storyboard in a less conventional way, breaking away from squares.

I found a few examples of storyboards with protrude the set squares which I thought was interesting and perhaps a feature I could have in my storyboard. Such as this one...

 I think this really helps show what the action is like for this shot by having the images come out of the frame.

Design Visualisation, Project Three, Blog Three

I have now decided on an idea for my stop motion clip out of what I have brainstormed. I have decided to go with the idea of how advertising covers a wide range of media in order to get consumer attention. So far I have made a storyboard for it which involves a poster on a wall destroying another poster next to it to show the competition with advertising, the poster then enters a laptop,appearing on the screen, it enters a cellphone, radio, covers a bottle logo then enters a wallet, the wallet is then picked up by its owner, suggesting the influence that ad will have on that consumers spending.

I have also had a few attempts at making some stop motion clips. I have been using the camera on my cellphone so keeping it steady has proved difficult and these clips are pretty shaky. But I think the motion of some of the objects in these clips is ok, I think I will have my frame rate at 12fps as these clips are, any less than this I think is not smooth enough, but anymore will be too much of a mission with photo numbers.

For the clip above one thing that doesn't work and that I will have to consider when doing my final clip is the light reflection in the poster in the background, I will have to make sure I am in a space where I can control lighting.

This clip is really shaky because I was just holding the camera for a lot of it. When I do the real clip I'll make sure I use a tripod.

Creative Coding, Project Three, Blog Six

I have now made my application even more interactive, I also altered the colours a little but too.

Now when you hold down the mouse clicker the 'snowflakes'(which don't really look like snowflakes anymore) begin to shake and expand in size, then once the mouse is released the shaking stops however the shape size remains and is only reset if the flashing red screen is reached and it is clicked and reset.

I've also now made that even if there is no cursor speed the shapes will remain on the screen, this way you can create patterns with the rotating shapes and view them and also take screen shots. Here are some of mine...

Here is a picture of the original code without any interaction.

This is the second screen after vigorous mouse movement.

This is the third after even more mouse movement.

And this is the final screen, if the mouse is moved too fast after this one it goes to a flashing red screen.

Here is a shot of the first screen with the mouse pressed down, as you can see the shapes have moved out of place and have grown.

Overall I think this has made the application more fun as there are now even more elements to it.

Here is it so far...
http://www.openprocessing.org/sketch/63597

Creative Coding, Project Three, Blog Five

(I appologise for any random formatting in this post it is not what I intended 'Blogger' has a mind of its own)

I've decided to now do a bit more research into other interactive applications to see what I can take from them to further improve my application.

I started with the 'sea monkey' application, a previous first year students work.

Why is it fun?
Because the sea monkeys interact with the cursor when it moves they also move in an organic way.
What does the person learn over time?
They learn that the 'sea monkeys' will not react if the cursor does not move.
How long does it take to learn?
Not very long.
Is it still fun once you’ve learnt it?
A little bit, it is fun dictating the direction of the swarm movement and seeing them move organically as they do this.
How is it similar/dissimilar to a game?
This is fairly dissimilar to a game as it does not reward you with any achievement, there are not levels etc. You do not gain anything.

I then looked at another previous students work, this is one I have looked at a lot over the process so far.

Why is it fun?As by interacting with it you gain more from it.
What does the person learn over time?That the fatter they click the more the picture changes, and if they don't click fast enough what they have achieved is reversed.

How long does it take to learn?A little while.
Is it still fun once you’ve learnt it?Yes, it is still fun as you can try get further and further through, however once you get as far as possible a lot of the fun has gone.
How is it similar/dissimilar to a game?This is fairly similar to a game as it rewards you the further you interact with it.

I also looked at this application I found on open processing, which every time you click it alters the shapes slightly, and uniquely every time.

Why is it fun?Well it isn't really that fun, but the thing that makes it a little bit fun is how the shapes continuously evolve into something new and different each time, however the evolution isn't that significant.
What does the person learn over time?You learn that with each click the shapes change.
How long does it take to learn?A very very short amount of time.
Is it still fun once you've learnt?The fun of this game doesn't really come from learning you must click it comes from the randomness of the result of the click. I away you can never learn exactly what is going to happen next but you have a rough idea, and when you get that rough idea of how much the shapes will evolve it isn't that fun.
How similar/dissimilar to a game is it?Not very similar at all, there isn't any 'skill' factor involved.

Another application I found on open processing was one with a lot of 'crazy squares'. It involves a whole lot of squares moving fast around the screen and if you manage to click on one it changes colour.

Why is it fun?It provides a challenge, it gives you the incentive to try turn all the squares purple, but it makes it hard to do, so if you were to achieve it there would be a sense of achievement.
What does the person learn over time?You learn that by clicking squares they turn purple.
How long does it take to learn this?Well that depends, someone may never learn this, it doesn't necessarily tell you or give you a hint to click the squares other than the fact they are moving.
Is it still fun once you've learnt this?Once you learn it it the creates the incentive to achieve something, so yes.
How is it similar/dissimilar to a game?It is similar to a game as there is something to achieve I guess (turn all the squares purple) however there isn't really any reward for it.

So taking in from what I've learnt from these and reflecting on my project I think I am on the right track in rewarding users for interacting with it by having it change, however I think there is a level of interactivity that is missing from it. I would like to now look at creating some random organic movement for each of my 'snowflakes' so perhaps they move around the screen a little, or they sway in one spot.

Design Visualisation, Project Three, Blog Two

Taking what we thought up in our group brainstorm, I then looked at my own project in particular how I could relate my minor, Marketing into that.

I started by getting the definition of marketing as a starting point...

Marketing - The action of promoting and selling products or services.

My first thought was to look at old media versus new media as we did in the group brainstorm, except for me to give it a marketing twist. I thought it could be interesting to show how advertising has had to adapt to cover new media, such as digital media.

I thought for this idea I could have an advertisement in the form of a flyer, which is fairly plain. The flyer would then find its way to the scanner and scan itself to the computer where it would digitally remaster itself with colour etc (maybe the character from the advert would do this on the computer much like the stickman in the video I put on my previous blog post). The new looking digital ad would then upload itself to Facebook or email itself to others.

My second idea would be much like the first but instead of just changing from print to digital media, the advert could cross multiple different types of media such as television, internet, print etc. This would show how advertising covers multiple media. I could have a person looking across his room at different media devices and each time he looks at a different one the advert 'jumps into' it, adapting to that technology.

For my third idea I thought about portraying advertising as a virus/invasion as it spreads everywhere. I thought I could start with a forest which is slowly invaded by advertisements. I thought this could look at the idea of 'commercial clutter', destroying pure/plain/untouched surfaces with advertisements, and by using a forest it would exaggerate this.

Here is the kind of idea I am thinking of, except instead of a vine growing it would be advertisements.

I also looked at this subliminal idea of constant exposure to advertising, such as product placement in things like music videos, movies and TV shows.

Product placement is becoming more and more common these days, here are a few examples...

This is a fairly obvious example of the 'CocaCola' cups used by the judges on 'American Idol'.

The Mini has made many appearances in music videos such as this Bruno Mars one.

This is a slightly more subtle one for 'Diet Coke' in one of Lady Gaga's music videos.

 In the end what most of this subliminal advertising comes down to get consumers to buy the product. So I thought it could be an interesting idea to have logos on products found in someones room to turn into a 'Buy me' logo which would then detach from the product and find it's way into a consumers wallet, showing 'a new way of seeing' brand advertising.

In terms of possible stop motion precedent videos that are relevant to what I am doing, I found this ebay commercial which creates a 'hand drawn' computer, I thought this is an interesting concept as simplifies the idea of digital media into basic pen and paper drawings.

Creative Coding, Project Three, Blog Four

After completing my snowflake and making it explode I tried position multiple copies of it on the screen.
Here's one of my attempts...
http://www.openprocessing.org/sketch/63595
However with my code the way it was this proved difficult. I did learn some new things though in trying to do this. Such as using the brackets on voids to store variables, this came in handy when duplicating snowflakes as I could individually change each ones co-ordinates. I also learnt about the function pushMatrix and popMatrix which saves the previous co-ordinate positions (push) then reapplies them (pop). This was useful in combination with the rotate function as without it as I duplicated each snowflake it would apply the rotation around the previous snowflake, whilst with popMatrix it reapplied the previous co-ordinates so it spun in relation to its self.

However in the end I decided to redo my code as the way I had it was limiting and confused. So taking what I had learnt I rewrote it.

This is what I started with keeping it very simple, testing the latest thing I learnt putting variables in the brackets by the void...

New Beginning

I also decided to change my snowflakes a little as well, they don't quite look as snowflake like anymore. I decided to have all the layers on at once however all stacked behind each other, unless the speed of the cursor(d) increases, when this happens the distance between them increases with the furtherest layer moving the greatest distance as a result.

Layer Setup

 After completing my snowflake setup I created a double 'for' loop to make the snowflake repeat along the y and x axis.

my for loop code.

 In doing this, this is what I ended up with...

'snowflakes' positioned along the screen

Now when the speed of the cursor increases the layers of shapes spread out. I also made them rotate to the cursor speed as well, meaning the faster the cursor goes the faster they spin.

In order to make it more fun and even more interacted I decided that if the cursor speed exceeds a given speed over a given time the background changes colour and the distance of the shapes from the centre point of the snowflake and between layers increases, this creates a different looking movement between the snowflakes. I have that this can happen twice, so I have three different levels, blue, green, and red, however if red is exceeded it 'explodes' ( the distance between layers continuously increases until all shapes are off the screen) and the screen flashes shades of red, but if you click it resets back to blue.

Another thing I made to encourage vigorous interaction with my application is if a new level is reached and the cursor speed drops below a certain speed for a given time it will default back to the blue level. I think this makes it more fun as you are rewarded for interacting while if you don't interact enough you are 'punished' in a way.

Creative Coding, Project Three, Blog Three

I have now managed to make my coded snowflake thing explode!

Firstly I decided to try clean and condense my code a but as I had many repeated elements, being the layers of shapes around the cursor as each time I made a new layer I re-applied the same shapes in a different void just slightly further apart. However now I have related them using the power of voids.

Here's part of my original code where as you can see I have just more or less repeated it changing only 'prim' (the distance between them) and the 'shpsz' (shape size)

Here's my updated code. Here I have just repeated the previous void instead of the whole previous code and increased 'prim' and 'shpsz' by variables so they can easily be altered.

Also I have now been able to actually take a screen shot of my snowflake for the first time as I made it so once the cursor speed gets over a certain speed it stops spinning and won't disappear even if the cursor speed is decreased again.

Snowflake form.

However I have now since made it 'explode' instead of stop. Now, once it gets over a certain mouse speed which has been sustained for a given amount of frames the distance of the layers from the mouse position (prim) increases quickly making the snow flake explode off the screen. Also when this happens the screen turns red.

The next step is to have multiple snowflakes placed amongst the screen which interact in the same way.

Design Visualisation, Project Three, Blog One

To make a start to project three, a stop motion clip, we starting brainstorming ideas as a group on media design, with the concept 'a new way of seeing'.

Our initial brainstorm

We first looked at having reality collide with the digital world, such as having an image on the screen which comes out of the screen and into the real world. Alternatively we thought that we could even have a drawing leave the page of a sketch pad and 'jump into' a computer screen, perhaps trashing the computer desktop showing this whole idea of older media versus new media.

This is the kind of thing we were thinking of in terms a drawing attacking a computer...

Another idea we looked at was graffiti art. Having graffiti/taggings come to life. In which we could explore a 'new way of seeing' graffiti, portraying it as something that just keeps being re-done even when a lot of effort goes into getting it removed.

I think this video is a great example of our idea as it shows ever evolving wall art...

The other main idea we looked at was the evolution of media from the days of using fax, wired telephones, older cameras etc. While now days only needing one device in the form of something like a smart phone.

We then looked at the smart phone and all its capacities, looking specifically at the media devices it has replaced from the past.

We then came up with a simple storyboard with the idea of having a newspaper with the news and a letter with mail flying through the air and being grabbed by someone who puts them in their pocket. They then see something the like putting their fingers around it as you do when lining up a camera shot and it then takes a photo which they place in their pocket. They then reach into their pocket, pull out a smart phone and flick through their mail, news and images. Our intention with this idea is that it would show this whole idea of the new way of seeing media, which is mainly digital these days, and a lot of it can be found in a pocket sized device.

A video we found that was very similar to this idea was an old vodafone advert, here it is on YouTube...

Creative Coding, Project Three, Blog Two

I now have my shapes rotating around the cursor at a speed dependent on the cursor speed (or change in cursor position). 

This code shows how 'if' it is at a certain cursor speed(s), the rotation(rot) will get faster by 0.05 each time. 

 I have also added some more layers of shapes for faster speeds, it is now beginning to look like a snowflake. In discovering this  decided to change the background to shades of blue instead of red.

Another thing I have done, well tried to do, is create an 'explosion' if the cursor speed goes over a certain speed. To create this explosion I want to have all the shapes surrounding the cursor to move further and further away from the cursor really fast until they are completely off the screen. In order to do this I firstly tried an 'if' statement saying, if the change in cursor distance is over a certain amount add a certain amount to the shape layers position on top of the mouseX and mouse Y position, hoping it would make the shapes move further away from the mouse each frame. However of course when it goes back through void draw it resets the shapes back to the mouseX mouseY position. So I tried putting it in void setup and using a 'while' statement, but that didn't work either as nothing happened. So that problem is still unsolved.

In terms of ideas to push on with, I've been thinking about having the position of the shapes not equal to the position of the mouse and also multiplying the number of these forms made from shapes. I think this would make it far more interesting and interactive rather than how controlled it currently is.

This idea would be kind of like the idea in this 'sea monkey' example we were shown in a lecture. Where in mine the shapes position is currently exactly the same as the mouses, while with the sea monkeys it's randomly within a circular radius of the mouse, for my snowflakes I think it would be better if it was like this, if not more random.

Here is my current application...
http://www.openprocessing.org/sketch/63592

Sea Monkeys

Something I found cool was this processing application on openprocessing.org
In this application they have used continuously spawning circles to create what looks like roots.
I thought that maybe further down the track I could possibly use something like this instead of my currently 'snowflake' looking form.

'roots' made of circles