Student Name: Yueting Yang Student Non: 810226 Video URL: https://youtu.be/Aoz2NKlQthM EDUC10049_2016_SM2: CREATIVE PROJECTS-DIGITAL TECHNOLOGIES
IT ALL BEGAN WITH A SIMPLE ELLIPSE The repetition of patterns At the very beginning, I opened the Photoshop. I wanted to create something but in front of me was a blank page and I had no idea what can I do to this white page so I just randomly drew an ellipse then I found it is a little bit boring, what would happen if I create some new shapes but based on my first ellipse. Firstly, I made this ellipse to a brush and started to randomly dot them on the page. It is fun to do that because even I myself don't know where the next dot is going to locate. The whole page was then filled with some ellipses drawn with no certain rule but quite more interesting compared to the first sole ellipse. Then I try to decrease the opacity of filled colour which makes the intersection happens between the ellipses and the picture get more sense of layer. A complex and interesting patterns can be created just by simple repeating the single pattern.
Beginning
TRANSFORMING WHILE REPEATING From my first practice, I think I’ve already got some very interesting images so what if adding more changes to the repetition because the patterns from step one are formed by the duplication of the same ellipse. Therefore this time I change my ellipse’s size randomly to see what new effects will come out. Fortunately, in Photoshop the random size can be easily achieved in the attributes of brush. Another possibility of transforming coming into my mind is the colour what if I give all the ellipse different colours and they still have the some opacity, the intersection might become a another mixing colour and if I adjust the range of the colour band like cool colour, warm colour and high contrast colour, the patterns will bring people different feelings.
ALGORITHMIC PATTERNS In the previous two practices, I focused on the random creation. I feel very free when I drew them so I think how about make a regular pattern, which will still be based on the first ellipse but this time, the transformation follows some rules by combining several basic mathematical knowledges. A new possibility is awaiting me. Firstly, the simplest way that I can think is an ellipse rotates around its central point and generates several other ellipsis. Consequently, all the ellipses will form into a new pattern as a whole.
By changing the radius and the number of ellipse, I easily get different patterns as shown above. The number of 4 and 10 really give people a strong different feeling with only various density.
ALGORITHMIC PATTERNS The patterns shown on the last page are all generated by rotate around the ellipse’s central point which means the ellipse’s central point is just on the rotating point so adjusting the rotating point to another place might generate another patterns and the following pictures proved my assumption. There are plenty of elements that controlled the final shape and change any of them can lead to a new possibility.
Filling those ellipses with different colours with certain opacity, the overlapping place comes out as different colours or just changing the colour of the strokes can also create very interesting effects .
PROCESSING AS A TOOL When I am doing all those geometric and algorithmic shapes in Photoshop I found it is a little tedious and hard to control them precisely so I wander if there are some alternative ways to do those kind of algorithmic or randomly generated patterns. Then, I found Processing as a programme can be used to do animation and graphic design by coding, which means it can draw according to the command that people typed in to replace some manual work. Besides, it can make some patterns automatically. It is hard to imagine what it will look like until it is finished by the program. I found this program very interesting and has a big potential so I started to study its syntax and language which is basically a simple version of java. Processing, created by Casey Reas and Benjamin Fry, is a free software which has its open source and is a good tool for artists (Processing.org, 2016).
float theta = 0.0; void setup() { smooth(); size(400,400,P3D); } void draw() { background(0); lights(); int n=20; float X=cos(theta); float Y=sin(theta); theta += 0.05;
stroke(255); strokeWeight(2); translate(200,200); ellipseMode(CENTER); noFill(); for(int i=0;i<n;i++){ ellipse(0,0,200*X,200*Y); rotate(2*PI/n); } }
For example, by achieving the patterns as I drew above. I can simply create an ellipse by typing its radius and coordinates. If I want to rotate and duplicate by 10 times then I can rotate 2*PI/n each time which can separate 360°to 10 part equally so I don't have to rotate 10 times manually and even the math can be calculated automatically by computer.
GENERATIVE ART By reading the article What Is Generative Art and Book Generative Art. I found what am I trying to create is a kind of work called Generative Design. It is my first time to get to know this visual art category. It is distinguished from art work on paper, this type of art is defined as computational, which is accomplished by program and is a product under the development of digital technology.
Frosti (2010)
C. E. B. Reas (2008)
Jerome Herr (2016) This art can be applied in the data visualization, graphic design, film effect, music visualization, 3d modelling and even Visual Reality technology. It can be highly combined with knowledge from other fields like Mathematics, Biology, Geometry, Big Data and Architecture. Its potentials hasnâ&#x20AC;&#x2122;t been fully explored yet.
COMPUTATIONAL AND PARAMETRIC DESIGN
As an architectural student, I found a lot of similarities between the parametric architecture design and computational design. Actually, in the Generative Design, I used a lot of parameters as the example I showed above, the several parameters that determines the final shape including the number of ellipse, the size of ellipse and the rotation angles. The parametric design is also based on several of elements like size, angle, and basic shape, which means once you change any of the parameters, the overall shape will change according to your adjustment.
Galaxy SOHO
parametric and computational architecture ďź&#x2C6;2014ďź&#x2030;
The parametric design is generally based on the Grasshopper, however, the generative design is usually achieved by program like processing (java language) or Openframe Work (C language). Many examples of parametric design in architectural field can be seen as a 3D version of computational generative design because when a building is built in a parametric way, they usually focus more on the appearance or skin of the building instead of function which is the most artistic aspect in the procedure of architecture design.
MAKE IT MOVE! (ANIMATION STAGE)
As I explored the processing to further, I found the animation can be easily achieved to make my static pattern start to move. The basis of animation in processing is frame by frame just like how the traditional animation is made but in processing, each frame is created by computer.
Frame 5 secs
Frame 15 secs
Frame 35 secs
The draw() function is a loop function, which means in each frame it will start from the beginning so if adding a variable quantity like X or Y and set a change like X=X+1 so the quantity X will plus one by each frame. If I set the x-coordinate of ellipse to X, it will move along the x axis. By making use of this idea, I made the program add colourful ellipses on the page automatically and randomly just like what Iâ&#x20AC;&#x2122;ve done in the previous stage in Photoshop but this time because it is added frame by frame so people can see the processing of generation. I also set the radius of ellipses to a variable quantity and make them all come into animation. It looks like the pattern is shrinking and exploding by the time.
GRADIENT SHAPE IN PROCESSING
The processing program actually facilitates the transforming and duplication in a quicker and easier way. Firstly, instead of drawing an ellipse directly, I use two line of ellipses, decreasing the size in a gradient, to make the shape more complex. Then this shape is shrank by extracting to create those gradient decreasing circle. The mathematic equation can be finished in computer by introducing the math function. Finally, a rotation effect is used to all this range of shapes to create a sense of dynamic. float theta = 0.0; float[] xpos = new float[60]; float[] ypos = new float[60]; float[] xpos2 = new float[60]; float[] ypos2 = new float[60]; void setup() { size(600,600,P3D); smooth(); // Initialize for (int i = 0; i <xpos.length; i++ ) { xpos[i]= width; ypos[i]= height/2; } for (int i = 0; i <xpos.length; i++ ) { xpos2[i]= width/2+width/4; ypos2[i]= height/2; } frameRate(65); }
} xpos[xpos.length-1] = a; ypos[ypos.length-1] = b; xpos2[xpos.length-1] = (width*3/8)*cos(-theta); ypos2[ypos.length-1] = (width*3/8)*sin(-theta); //draw for (int t=0; t < n; t ++) { //rotate(PI/2); for (int i = 0; i < xpos.length; i ++ ) { noStroke();
} }
void draw() { int n=4; background(38); translate(width/2,height/2); float a=width/2*cos(theta); float b=width/2*sin(theta); theta += 0.05; for (int i = 0; i < xpos.length-1; i ++ ) { xpos [i] = xpos[i + 1]; ypos[i] = ypos[i + 1]; } for (int i = 0; i < xpos2.length-1; i ++ ) { xpos2 [i] = xpos2[i + 1]; ypos2[i] = ypos2[i + 1];
fill(((i*4)/35.0)*249,((i*4)/156.0)*172,((i*4)/173.0)*14); ellipse(pow(1/2.0,t)*xpos[i],pow(1/2.0,t)*ypos[i],pow(1/2.0,t)*i,pow(1/2.0,t)*i); rotate(PI); ellipse(pow(1/2.0,t)*xpos[i],pow(1/2.0,t)*ypos[i],pow(1/2.0,t)*i,pow(1/2.0,t)*i); } for (int i = 0; i < xpos2.length; i ++ ) { noStroke(); fill(((i*4)/35.0)*249,((i*4)/156.0)*172,((i*4)/173.0)*14); ellipse(pow(1/2.0,t)*xpos2[i],pow(1/2.0,t)*ypos2[i],pow(1/2.0,t)*(3/4.0)*i,pow(1/2.0,t)*(3/4.0)*i); rotate(PI); ellipse(pow(1/2.0,t)*xpos2[i],pow(1/2.0,t)*ypos2[i],pow(1/2.0,t)*(3/4.0)*i,pow(1/2.0,t)*(3/4.0)*i); }
ADD BACKGROUND MUSIC
The animation made in processing, if the changing rate is certain, it will usually have its rhythm like the several animation that I made before so I wander if I can add some background music, it will become more interesting. I did some researches. Because the processing has its open source platform so I downloaded a music library which allows processing to load the music in the folio. Therefore, the music can be played while the geometry is transforming.
(Code.compartmental.net, 2016) (Code.compartmental.net, 2016)
However, there is a problem that I havenâ&#x20AC;&#x2122;t deal with. It is the background music and the animation are separate but I want to make the patterns change according to the beat or the music rhythm.
GENERATE THE PATTERNS BY MUSIC
In order to create the relationship between music and patterns, the several attributions of music must be clear then using a syntax to detect those elements and make the patterns respond to the music when every time the signal is caught. The function that can detect the beat of music is called beat.isOnset() . At first, I set the ellipse to be seen when beat is detected every time and it will fade out and shrink gradually after the detection. It is my basic model, which successfully interacted with music as a simple music visualization.
THE EVOLUTION
I found several other possibilities just evolve from my basic project. As we all know if connect the two points, it will get a line. Therefore, I wrote the sentences that between every two points, drawing a line. When the music begins, it can be seen from video that a random is generated by following the rhythm. Finally, at the end of music a generative picture is done. If change the colour mode to HSB and the blend mode to ADD, the colour will overlap and further enrich the picture.
THE FINAL PROJECT
In the final project, all the practices from previous stages are all coming together. The ellipse comes out and fades away by the music, the lines between the points are drawn to create different patterns and the music as a background also interact with the patterns. A more complex music visualization is achieved by the combination.
The background musicďź&#x161;marcus_kellis_theme.mp3 (Marcus Kellis Theme, 2016)
THE FINAL PROJECT
All the ideas and my final project began with a simple ellipse. The flow demonstrates a clear logic of how the concept was improved and enhanced step by step. During these progress, I get to know the coding software like Processing and Openframe Work. The graphic shape can be created algorithmically by introducing different parameters and this type of art creation is called generative art. Beautiful and complex pattern can be made just by duplicating or transforming and this can be facilitated by computer. The computational art is firstly received the command sent by people, however, the final picture sometimes can be hard to imagined and even transcends the intelligence of the people who typed the command which can be over expected surprise. Furthermore, this computational technology can also be applied in the other visual expression fields, for example, it is suitable for creating music visualizing project. Although, my final project is not very complex, it provides me a way to think about how to make digital artefacts by making use of digital technology and open source. Even a single ellipse can create thousands of possibilities and there are more things are waiting to be exploited.
BIBLIOGRAPHY
Processing.org Processing.org. (2016). Processing.org. Retrieved 3 November 2016, from https:// www.processing.org/ Pearson, M. (2011). Generative Art. Manning Publications Co.. Boden, M. A., & Edmonds, E. A. (2009). What is generative art?. Digital Creativity, 20(1-2), 21-46. Parametric. (2016). Parametric. [online] Available at: http://nparametric.tumblr.com/ post/55715681338 [Accessed 3 Nov. 2016]. Code.compartmental.net. (2016). Quickstart Guide | Compartmental. [online] Available at: http://code.compartmental.net/tools/minim/quickstart/ [Accessed 3 Nov. 2016]. Code.compartmental.net. (2016). [online] Available at: http://code.compartmental. net/minim/index_analysis.html [Accessed 3 Nov. 2016]. Marcus Kellis Theme. (2016). [onlion] Dance Like There's Marcus Kellis In Your Pants Themesong.