Creation of Final Display

Since this is an animation staring the Amazing Zamama (my little Tadpole character) I decided to try and create every frame of his little dance (and sleep) with the simple (and apparently complicated) Paint application.

 This is the layup of the start of the dance when his stamina is full (see his cute energetic smile there?) this was all done on paint and then edited on Photoshop to fix the pixelated look Paint produces and fix the sizing.

This is the layup of the middle of the dance when his stamina is getting low. as you can see by his face and wobbling arm (which will wiggle in the animation) Zamama is getting tired and weak, his movements will become slow in the animation as it drags on in this stage.

 This is the layup of the last part of the dance where Zamama has fallen asleep from exhaustion. The snot bubble is a typical anime gimmick for a sleeping character and since he's based on an anime design I decided to use it for more movement (an added loop display maybe?) the end picture is of him waking up since the bubble popped (again an anime gimmick for some humor) this is only at the end though but it suggests that the dance could dance again

I do have to admit that I cheated a bit with making these frames on Paint, I used a template to create the first model and just traced him/edited him for each movement (that's why he's standing while he's asleep)

Concepts for Fianl Project

So I decided to go with the loop function and so I was made to think (OMG) about what I could do and how I could do it to express this processing function in a different way that speaks to people who don't understand (like me) and/or do coding

My first idea was to have something simple like a slinky falling down the stairs (we all use to do it)

My Delmar with this idea however is it's almost too simple and rather predictable for describing the loop function term (it's even shaped like a loop so that's two in one) I don't even know if I should make an interaction model or a movie


My second idea was trying to get a little more complex (somewhat) but still simple. A wolf of a lion running to catch it's food. The action of running continuously until catching it's prey is a very straight forward example of loop in processing
The way I would present this is with a little animation of a predator chasing it's prey (make it cute) and almost make it childish looking in both display of characters and storyline (if you can say it has one)

Loop Function
The loop term in Processing reads - Causes Processing to continuously execute the code within draw(). If noLoop() is called, the code in draw() stops executing.
 Basically it means that with the loop function the code will continue to copy itself over and over again visually until it is no longer able to due to no more room or other cause. It’s commonly used for interactional programs and pattern coding.
My display of “the Dancing Tadpole Zamama” expresses this term “loop” in a slightly more entertaining way. Zamama is based off typical anime styles and was created using the simple program Paint and edited with Photoshop to take out the over pixilation look paint gives. I then used Nero Vision to add all the slides together give speed and fluidity to his movements.
By having this animated character dance it shows the loop work as he repeats the move of a simple Disco dance (so simple). As the dance drags on and Zamama’s energy goes down, the dance slows down and Zamama begins to look tired until eventually he falls asleep. 
This display of dancing till ones energy runs out and then falling asleep from exhaustion is a simple way of expressing the loop function as it is used in processing.

Improvement on loop project

after re-reading the function of loop in processing and some help from Ben (thanks mate) I made a few changes to my dancing idea
I now understand that the object (tadpole) is the main influence to the loop and that something to do with him must affect the action rather than an outside element (music) so I decided to have my little guy dance till he gets tired and falls asleep
As he gets tired he will slow down and sloop until he falls over and begins to snooze

My character - Zamama the tadpole

Project 3 start and third concept (final)

for this project since we don't have to use processing to express our term I decided to try and do a flash animation expressing my chosen processing term "loop"

there are two different computer loop terms that I think contribute to what I have in mind

 - Control flow loop - a sequence of commands that is executed repeatedly 

 - Infinite loop - a sequence of instructions in a computer program which loops endlessly

My idea is to create a flash animation or a mini flash game which involves a dancing character

some examples of what I could do

this is the most simple example with having two moves repeated over and over again throughout the whole song (and it's sooo cute)

with this example it shows how the moves change and repeat with the beats of the music (also having different characters doing different things reflecting different parts of the song)

concept 1

my first ideas for this project were to go basic but unique (at least I hope it is)

My idea is to use circles (oh how original is that) and have them create chain reactions of sound when you click on one.

each circle is different in size, color and the sound it produces. when a circle is clicked on, a "ripple" will start as it admits it sound across the screen. when the ripple hits another circle then it too will activate therefor creating a chain reaction of sound.

to avoid never ending loops and massive headaches (which sounds like a guarantee with this idea actually) the ripples will fade the further out they go as not to activate some circles and hopefully allowing the chain reaction to cease (so everyone can breath before they explode)

Reflection and frustration

the last day of task 2 has drawn to a close and I couldn't attach any sound to my interactive design sketch.
I still have the file I tried to re-write (god knows how many times) just in case
I decided to submit and upload what I had accomplished so far and maby try to solve my little bug problem with my code as a pet project.

the link to my final sketch on open processing is here - http://www.openprocessing.org/visuals/?visualID=27997

I must admit that this assignment was much harder than the previous as I was not use to having to account and code for movement, interaction etc within a sketch (I must have spent hours looking up help sites for advice on what to do and I probably still did it the hard way knowing me)

I rather like my final outcome (despite the small issue of not being able to add my little sound) I'm rather glad I decided to have the placement of the little dots the interaction of the program and not the main circle (it was just too much chaos personally and I already had to restart because of lags caused by overload)

last minute remake of final design

After much frustration with my final sketch I decided to redo the whole thing and make it more simple (shape and sound wise to prevent lagging, the cursed lagging)

I stuck with having a circle as the centre point of the interaction but instead of bouncing off other objects to make sound, when it bounces of the edges of the screen would make one single sound (sort of a futuristic bounce sound)

the interaction of this sketch is that whenever the main circle bounces off an edge, it will create a bunch of random coloured little balls which will appear whever your mouse is on the application.

Personally, I prefer this sketch much more than my original as it's more fun and simple (all those different  sounds and shapes would get annoying fast) and efectively simple (to prevent the horrible lagging and viral effects on my mind)

All I need to do with this sketch is to attach the sound file and upload it to Open processing as well as the R drive for marking (and I'll be done "Banzai!!!")

final design look

I finished the movement layout of my final design and got everything to move around randomly

this sketch consists about 30 random squares and circles of different size, colour and transparency with the big orange circle as the main attraction of the whole thing. the black background brings attention to the interloping shapes and the small details as well.

I just need to fix a few bugs, get the big circle to be in sync with the mouse and add the sounds to it all (each separate shape has it's own separate sound so there's alot there to do over the break)

I've actually begun to wonder if it's a bit too much since it keeps freezing while loading. Maby I should simplify it more so there isn't so much to load or just start again.

Seccond to last Friday before the break

well, there's only one week before the break comes up and I realise that I still have loads of work to do. I'm playing around with all the things I can do with Processing as well as looking up examples ant tutorials in order to improve my present skills and meet the requirements.
I've been looking through all these personal tutorials over the net as well as the basic ones found on the processing website to give me ideas on how to code my final as well as give me tips on how to do awesome interactive things (since I suck at coding and all)
So far as to date I have failed most of my attempts with making the code interactive (I can only just make things move as it is) but I'll keep trying to get the interaction part right then move to adding the sound (one step at a time since I'm still slow at this) I'll keep trying over the weekend so I get a good frame to show on the last Friday before the holidays.

concept 2

Well this is my seccond concept (I know that my first isnt up yes and I'm obsesed with presentation) after this I'm going to start expermenting with simple code and expand it to get some of my own results I could use for my final.

Project 2 - Getting started and music inspiration

Well it's now the start of the second project for "Creative Coding" and I've started off by searching through my Techno music for inspiration. I actually find techno music rather relaxing as it seems to create an image in my head (regardless of lyrics) so to start off, I chose a few songs to share as my first step of finding inspiration towards my storyboard and my final sound to the interaction coded design..

my first music inspiration is the theme music for two characters from a chibi anime series (which I better not name)

I really like the beat this song offers as it's very easy to move to. every time I listen to this song I get the image of almost rolling and jumping (have to forget what the song is from to get a non predigest image though) the layering off all these different beats is also a huge inspiration to how I could do the sound  for my final with the visual interaction.

My next music inspiration is the theme music of Seymour (one of the "bad guys") from Final Fantasy X

The way the tempo is raised with layering of different sounds is very cool and really inspires me with the idea of creating shapes, each with their own sound layering on top of each other as they are added, creating a techno melody.
I also used this tune as part of the same inspiration (as it's also scales and layers of sounds)

This tune is at the start menu of almost every single Final Fantasy game ever but I find the older versions more inspiring as I want to go for a techno sound to keep the overall design linked to its computer creation.

Reflection

After this assignment I have learned that I really need to take the time to learn everything about coding since I still don't understand everything I did with my finals (I just kept referring to the references)

I have decided to practice coding and read the language dictionary in my spare time during this short break between this assignment and the start of the next "transformation" as well as durring the weekends.

I have also been told that I should work on reducing the ammount of text in my blog entries to make it easier for the markers (that's right, I'll try to make it easier for you) but not skip on all the detail needed in explinations. I must admit that this is a re-occuring problem of mine with over-describing all my works and being unable to simplify everything so I really will try.

To end it all off, I would just like to say that I still have a lot to learn in order to get the skills required for this course and not just rely on dumb luck to get results worthy of submission. I will try to improve my skills and myself to match this course and this University.

Final Wallpaper Designs

well, it's the end of the first assignment for Creative Coding and I must say that even though I am still completely hopeless with Processing, I am very proud of my final four designs.

I experimented with contrast and colour to express my "theme" of illusion (seeing a different thing in the picture every time you look) and discovered that fire tones (Red to Yellow) stood out the most and captured you eye from afar (good for having the design on the wall no?) and decided to use those tones along with the ever old winning combo of Black and White.

I used the ideas from some of my drawn concepts (see previous blog)  but mainly used the idea of using curves to create borders for squares and began expanding with Ideas, all the while making sure they weren't too different from each other in order to keep them a set of four.

Now since I still get easily confused with all the coding language my designs are rather simple looking in both code and image, but I actually discovered that simple is very effective and just work with what you've got (you may get a splendid surprise)

the first of my four designs was personally the hardest (and the longest) to do as it meant making a solid blueprint from scratch (but I could use it as a base for the other three so it was good to get it done) after looking through the references and experimenting with different effects with curves I decided to use a "bezier" command and create a solid 8 shape, despite the fact that all the drawing commands are these "bezier's" it was a rather difficult shape to control so I decided to keep it  constant in all four designs to see the different effects I could obtain with different formulas. I used seperate commands to get the colour gradient since I completely frogot how to do the lurp thing so experimenting with different colours was rather anoying, I tried purple and blue tones first and despite how beautifull it looked, I wanted the image to wow the viewer and make them stare at it repeatedly. I also tried multi coloured but the overall design was too busy and rather putrid (pluss it gave me a major headach to both look at and create) In the end I decided to go with the fire tones (not just cause orange is my favourite colour mind you) which made the entire design stand out from the black and almosed forced you to try and decifer what it really was. The final touch was adding a bit of a hidden white line in between each shape to give it a 3-D look when you look at it from a cretain view. It also makes it look rather unique and adds to the changimg image.

The seccond of my four designs was much easire to do since I just used the code from the first and modifyed it from there (it made it easier on me to keep them as a set of four) I experimented with the different limmits I could get with these "bezier" shapes and created a kind of grid of red and black which I faded to allow the illusions continue. I also increased the white and played with the sizes and arangements of all the leftovers which created a kind of cherry shape pattern. It may be a big difference from the first one save from the white stripe over the black, but I keeped the colour constant to keep the bond between the designs.

Now the third design was rather tricky to get as I expanded on the whole grid look while keeping a bit of the illusion look to it. I decided to try more bold shapes to create a grid around the black. Each colour can be seen clearly and the fading on the white has decreased a bit to reveal a shape within the overlay. I wanted to keep using the same colours all the way through. Most of the illusion feel look may be gone but it still keeps that whole image hidden within feel while going more into the grid look.

My last design expanded on my origional concept and used all the red tones as "shadows". the shaping resemples that of some basic 4-sided flower designs while keeping that whole image within an image look. 

 I know that latter on I will be able to do better designs as I get more acustom to this new software and language but for now, I think I did a prety good job for a newbie (not the best ever but I'll take it)

I hope to improve and learn from all my expermients and mistakes 

 P.S - for some reason the PNG files didnt want to load on here so unfortunatly it's just J-peg files for now, I will upload the PNG files once I fix whatever is wrong or just give the files directly.

Concepts for final wallpaper design

Well, to help me understand my own ideas I sketched 5 concepts to try.

My first idea was inspired from the Chinese symbol for balance or "yin-yang" which consists of 3 circles of black and white.

Having two smaller circles partially covered by a larger circle which reverts their colour inside. The sketch is only partically done because I ruled the grid too small and it would have taken me days to finish it completely (plus I didn't have a compass which would have made it look better)

(full layout)

(larger picture of design)

My next concept was inspired by tartan (family tartan)

Since tartan is predominantly square orientated I decided to use A diamond basis. adding in random thickness of lines to keep it a but more busy but still simple (not too complicated since I'll have to make the final with Pattern maker) I've chosen not to colour the concept as I'm not sure of the colour orientation I wish to use.

Next concept was Inspired by pop art using random placing of overlapping squares and rectangles.

I believe using only 3 colours (excluding white) gives it a more dynamic look than using a whole mess of colours. I may decide to change the colours but the idea of only using 3 main block colours in random sequence is a great idea I believe.

The next concept was inspired by common line illusion where you are made to believe the image has 3 dimensional properties and not just a flat image.

I'm not sure yet weather to use a solid Black and white orientation or have a multi colour gradient where each colour fades into the next.

My final concept, which is the most likely one I will use to finalise, was inspired by tiles commonly used in old church ceilings. I always find myself in awe (and with a stiff neck) every time I enter a church, the great detail that is put into each inch of the interior designs always amazes me.

 Each space between the designs creates a square which is a completely random colour. The frame itself is black.

I keep using grids to help with my designs so unfortunately all my ideas are rather plain and restricted but I find it easier to work within boundaries and sometimes find myself bending or even breaking the simple rules I create for myself. Hopefully I will learn to fully break my silly little habits and make my designs all the more awesome in the future. For now though, this is fine.

Small Note: Photos of concepts taken with laptop web cam due to lack of scanner and absence of good camera (so there is a good reason why the photos look real bad)

first attempet on pattern maker

trying to wrap my mind around using numbers to translate patterns rather than draw them myself was at first (and even still) a bit of a head ache, but as I start to get use to this new computer design language it starts to become easier.

my first attempt was nothing short of simple and pathetic, but a good start when experimenting with using colours and stroke weight.

my next attempt was a bit more bolder when compared as it contrasts both two different colours and shape structures (still using different stroke weight)

my last first attempt with experimenting was using layering of shapes to create the illusion of depth (3D shapes) making my overall layout look a bit like green cheese