Sunday 17 August 2014

Refining Finals: Processing - 'Draw Your Own Composition'

I have taken inspiration from a couple of my experiments in the fact that I wanted to create a composition that was forever changing and when the user moves the mouse the pattern overlays and covers the pattern that is underneath. I wanted to use my circle experiment as my basis in which the circles form are dependent on the mouseX and mouseY values and they continue to overlay one another to create interesting forms. However I wanted to add a element of the composition in which it will be doing something even whilst it is not being interacted with by a person. 

A link to my files are at this address:
https://www.dropbox.com/sh/zfjzhspcuphz1v5/AAAl1Xnb39Jv63svknZbM9_ca?dl=0

A video of my final Processing composition is as follows:



I have started off my code by finding an example that uses a rotated popMatrix and have used this as a starting point for my own composition. Presently the boxes spin around continuously however do not do anything else other than that. The lighting code that is implemented in this example creates the tonal differences and gives the model another three dimensional element. 


A couple of screenshots of the example composition in action. 

My next step was to set up the canvas size and the colour mode. I have decided to extend the canvas to 800x800 pixels in order to allow for more room around my composition - thus bring even more emphasis on it. I also wanted to make my composition look a lot more eerie and mysterious therefore I have added the colorMode line of code.

Last thing that I have done in this screenshot is to remove the noStroke line of code so that my composition has a cartoony look and feel to it now. It also makes each of the boxes stand out a lot more bringing the focus back to the pushMatrix. Below are a couple of screenshots showing where I am at this stage..




I have now changed a couple of things to the composition. Firstly I have increased the number of boxes within the pushMatrix from 12 to 25 in order to try and create a really funky looking composition. With the stroke back on, this is starting to look really interesting if I do say so myself. Secondly, I have added the code that Tim open sourced us earlier on in this project which allows one to save a jpeg straight from Processing.

A few images of what my model looks like at this point are as follows:



At this present stage, I feel that the background is slightly too dark so some of my model is getting lost as it bleeds into the background. I will lighten this up slightly however keeping within the monochromatic colour scheme..


In order to ratify the above statement, I have decided to remove the background colour line of code. This has resulted in the canvas returning to its default colour. This is not ideal either, however it is better than before due to the fact that I can actually see what's happening in my model now..


Adding Scaling to Composition:

I have looked back at the example that I have actually posted on my blog in which as one moves the cursor along the x-axis, the shape gets larger or smaller respectively.. I have grabbed the two lines of code that could be used within my own composition and pasted them in. The float zoom and scale zoom lines enable the user to scale the pushMatrix large enough to fill the screen and then repaint the pattern on the canvas as it is forever changing - thus the title of this work.. Due to the lighting in my composition, the tonal differences that then become part of the background are quite beautiful. I have included at the bottom of the following images what the composition looks like with the noStroke code put back in, however it does not retain the same level of cartoony, mystery that it has with the stroke on..









noStroke Implemented Again:

As you can see, there just isn't the same mood or aesthetic that is created in the previous composition. It looks very soft and delicate, however I want to create the opposite - sharp and dangerous. I think I will put stroke back on and progress from there.



Speeding up the Rotation Speed:

My final:
As the heading suggests, I have changed the integer 'a' value from 0.01 to 1. What the integer 'a' codes for is the angle of rotation between each box. By increasing the angles respectively, the result is the boxes looking like they are spinning a lot faster. The pattern that is created accordingly also changes into something that I feel is quite beautiful. I will use this composition as my final. 






















No comments:

Post a Comment