Second Year Media Design http://loxyreid.posterous.com Lachlan Reid posterous.com Mon, 25 Jun 2012 19:29:00 -0700 Musical Lineation http://loxyreid.posterous.com/musical-lineation http://loxyreid.posterous.com/musical-lineation

Screen_shot_2012-06-26_at_2

My project Musical Lineation is a data visualization of musical scores by New York musicians displayed through a New York skyline. My idea behind it was to display the music of New York through the beauty of New York City.

I used Processing to create a program that takes input from an .xls file. To create these I took .midi files and passed them through another program, MIDIanal, and then converted from .csv to .xls using Microsoft Excel. 

I used the XlsReader library by Florian Jenett to parse the input and read the score. 

With this data I created a skyline in Processing. Each building of the skyline represents one bar of music. The height of the building is worked out due to the number of notes in the bar, complexity of the notes and a few other factors. The width of all the buildings was based on the temp/time signature of the music. Each building was given a roof. These roofs were designed by me and were based off real roofs of New York skyscrapers. 

Once this skyline was created I then took it into photoshop to add all the extra effects. The lights of the buildings were created by taking 3 different aerial images of New York City and filtering them. The first filter was the Glowing Edges filter which highlights the edges of color and removes everything else. This was then accentuated by applying a patchwork texture onto the images. These images were then cut out into the same shapes as the skyline code. I then duplicated these images and applied a Gaussian Blur to the one underneath. This just removes the harshness of the edges of buildings, allowing them to fade into the background, whilst preserving the light boundaries. 

The background color was created by using a gradient from pink to a darker pink, not quite black. The entire image was then dulled down by applying my own texture on top. This texture was created by taking 100 album covers from New York artists and layering them on top of themselves at 1% opacity. This created a really interesting unique texture which symbolized the music industry of New York. Some artists included: The Velvet Underground, The Wu Tang Clan, 50 Cent, The New York Dolls, H20, Anthrax, Yeah Yeah Yeahs and many more. This texture dulled down the background and unintentionally created these cloud/smog looking patterns in the sky. It also dimmed the lights on the buildings and made them look more sporadic and sparse.

The three songs I used for the final composition were Empire State of Mind by Jay Z, Antisocial by Anthrax and You Only Live Once by The Strokes. These songs are very different from each other in genre, style, tempo and structure so they complement and contrast very well.

 

http://www.tima.uk.com/midianal.htm

http://bezier.de/processing/libs/xls/

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Mon, 25 Jun 2012 18:19:00 -0700 Filtering Examples http://loxyreid.posterous.com/filtering-examples http://loxyreid.posterous.com/filtering-examples

Here is two examples of how I created the pattern texture for the lights on my buildings.

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Thu, 21 Jun 2012 18:47:00 -0700 Presentation Composition http://loxyreid.posterous.com/presentation-composition http://loxyreid.posterous.com/presentation-composition

Heres a shot of my composition so far which I will use for the presentation today.

Screen_shot_2012-06-22_at_1

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Wed, 20 Jun 2012 19:26:00 -0700 The color of new york music http://loxyreid.posterous.com/the-color-of-new-york-music http://loxyreid.posterous.com/the-color-of-new-york-music

Wow. Just got really excited about this since it worked perfectly.

To get a nice pattern which was the color of music is a really wierd concept.

This picture here was created by layering 100 new york made album covers on top of oneanother at 1% opacity, therefore creating a unique color which represents new york music.

Not sure if I will use it in my work but I wanted to share as it took me bloody ages to make. oh and its pretty cool.

Screen_shot_2012-06-21_at_2

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Wed, 20 Jun 2012 16:18:00 -0700 Which songs? and what style? http://loxyreid.posterous.com/which-songs-and-what-style http://loxyreid.posterous.com/which-songs-and-what-style

I need to decide what music to use to generate my citites and since I want to use inspiration from New York city I am going to take different famous New York artists.

So far I am looking to use some or all of: The velvet underground, antrax, H20, New York Dolls, The strokes, the yeah yeah yeahs, 50 Cent, or Jay Z. These are all popular famous artists from New York who span a wide area of musical genre.

I will probably take 3 or 4 of these artists and recreate my NY skyline from them.

I also need to decide how the piece will look. After talking to Elle we decided that the simple vector flat colors werent working. She says that the simpler the shape, the more complex the graphics as a general rule. This seems to be a good idea. 

There are a few possiblities of what I can do. Use Art from New York, albums covers, live photos of the musical artist, pictures of places around new york. I will then layer these on top of one another to create a weird complex pattern.

I am interested in doing all of this outside the code in Photoshop.

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Fri, 15 Jun 2012 04:17:00 -0700 Lights or no Lights http://loxyreid.posterous.com/lights-or-no-lights http://loxyreid.posterous.com/lights-or-no-lights

Now added with lights, I'm not sure whether or not I like them.

The lights are effectively the notes of the bar, so if you rotate the image clockwise 90 degrees you should be able to read the notes left to right top to bottom.

The colors of the lights are the same as the colors from the very first score piece I did for p4. However, they are quite bright, not in light but in color intensity. The very obvious primary colors seem to make the city look like a game of tetris. I might contrast this by making the colors very similar in shades of grey or white with a tint of a change of color.

I hope to make the gradient (the purple background) the same color as the most used note in the score. Since a city would illuminate the same color as the most of its own lights.

Screen_shot_2012-06-15_at_11

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Fri, 15 Jun 2012 02:20:00 -0700 New direction for project 4 http://loxyreid.posterous.com/new-direction-for-project-4 http://loxyreid.posterous.com/new-direction-for-project-4

So I have taken a new direction with project four. Whilst being similar to ones in the past I am taking it back to a more literal representation of music rather than an abstract, which was getting a little ridiculous. 

So new idea. I draw a city skyline which seems random at first but is actually built by the musical score that is inputted, as before.

Each building represents a bar of music from the score and the building is generated from this bar. The height is based upon how many notes are included in the bar, the number of windows representing different notes in sequence (so you should be able to read it bottom to top, left to right, though it might be very tricky). Rooftops are, at the moment, randomly generated but I'm sure I can get them generating from the octave of the notes easily or other similar musical effect. Colors of buildings and windows are yet to be implemented and the width of the building has yet to be made. These are things that will be done in the next week.

However, the real tie between the music and the city is the choice of music, and the choice of city. To bring both parts together, to make a truely musically generated city I have used inspiration and real images of skyscrapers of New York as my buildings, and as an accompaniment I have chosen the music of Swing Jazz, the music invented and thouroughly inspired from New York. The decision to use this city and this music was just coincidental. I could effectively create a village scape similar to an African village and put in African music. However, the music of Swing Jazz and Bebop was the music I had wanted to work with as it is my definition of pure musical art, and I wanted to take this further and create a piece of generated art from the music.

Here is a screenshot of the current project from the music "Night and Day". I hope to develop and improve on the graphics, increase the generative aspects and try different muscial pieces to see how it all falls together.

Screen_shot_2012-06-15_at_9

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Wed, 13 Jun 2012 18:37:00 -0700 Wavy Lines http://loxyreid.posterous.com/wavy-lines http://loxyreid.posterous.com/wavy-lines

This one now includes wavy lines. The image indicates where different midi channels / instruments are used in the piece. Along the middle is a timeline of the music and colored lines are pulled from this to seperate nodes. Each node is seperate for different instruments.

 

Screen_shot_2012-06-14_at_1

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Wed, 13 Jun 2012 04:02:00 -0700 Ooh Colorful Lines http://loxyreid.posterous.com/ooh-colorful-lines http://loxyreid.posterous.com/ooh-colorful-lines

Some p4 development. Now with nice neon colors!

Screen_shot_2012-06-13_at_11

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Sun, 10 Jun 2012 03:40:00 -0700 It's the Thrill of the Fight http://loxyreid.posterous.com/its-the-thrill-of-the-fight http://loxyreid.posterous.com/its-the-thrill-of-the-fight

Here's a more complex track than Ode To Joy: Eye of the Tiger.

I really like what is happening on the right half of the screen. All sorts of interesting patterns are emerging.

Screen_shot_2012-06-10_at_10

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Thu, 07 Jun 2012 23:40:00 -0700 242 Lines http://loxyreid.posterous.com/242-lines http://loxyreid.posterous.com/242-lines

Changed the code so it creates lines of different colors for the octaves.

Here's one where they are placed on top of one another:

Screen_shot_2012-06-08_at_6
And another where they are combined into one easy to manage loan, I mean image. This is how I had originally intended the piece to end up and will now need to adjust to suit all types of midi files.

Screen_shot_2012-06-08_at_6

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Thu, 07 Jun 2012 20:36:00 -0700 Comparison of code and original score http://loxyreid.posterous.com/comparison-of-code-and-original-score http://loxyreid.posterous.com/comparison-of-code-and-original-score

Just a quick pic of the code and score. The similarities are obvious so we can see how the code takes the score and places it on screen. Next up: making that s*** look sick.

Ode_to_joy

Screen_shot_2012-06-08_at_3

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Thu, 07 Jun 2012 20:27:00 -0700 242 Development 8/6 http://loxyreid.posterous.com/242-development-86 http://loxyreid.posterous.com/242-development-86

Managed to split the notes according to their octave. this allows no overlapping (vertically) of notes. This makes it easier to read. 

Also added a check for Note On and Note Off functions and only draws on Note On functions. This stop the score doubling up.

Screen_shot_2012-06-08_at_3

I also have begun to play around with how it be displayed visually. This one is with low opacity rects rther than ellipses. The overlapping effect is really nice.

Screen_shot_2012-06-08_at_1

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Thu, 07 Jun 2012 17:44:00 -0700 242 Beginnings http://loxyreid.posterous.com/242-beginnings http://loxyreid.posterous.com/242-beginnings

I have got the XLSreader working which will read in the midi values once they are converted to XLS format. This is done through a program I have downloaded.

 

Here is a quick tester for Ode To Joy. Colors are very basic but distinguish between note differences. Timing is also shown through spacing.

Screen_shot_2012-06-08_at_12

Like I said, very basic tester but now that this is working it should only be a matter of mucking around with the visuals.

One problem I have already seen is that unless the midi file differs between bass and treble notes then they just get overlayed.

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Mon, 04 Jun 2012 19:43:00 -0700 242 - Project 4 Concpects http://loxyreid.posterous.com/242-project-4-concpects http://loxyreid.posterous.com/242-project-4-concpects

Concept_1a.pdf Download this file
Concept_1b.pdf Download this file
Concept_2a.pdf Download this file
Concept_2b.pdf Download this file
Concept_3a.pdf Download this file
Concept_3b.pdf Download this file

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Wed, 30 May 2012 01:58:00 -0700 242 Project 3 Final Composition - Element http://loxyreid.posterous.com/242-project-3-final-composition-element http://loxyreid.posterous.com/242-project-3-final-composition-element

Reid_lachlan_mddn242_project_3_2012_element_composition

Element is a 3D computer graphics image created using Python Processing.

A customisable set of variables allow for infinite variations on a simple idea. A ring of spirals are created with varying densities, radius, number of rings and distance from each other. Through the use of this program I was able to come up with a composition demonstrating its effects.

The three images I chose are shown here in one composition. First is a top down shot of a 6 spiral ring. This appears to be 2D and seems as if the image is slightly blurred, creating an interesting effect. The idea of this image is to conceal and reveal the structure of the piece.

The second image in the sequence is a slightly off angle shot of a similar 6 spirals each with only 1 ring. They are placed together creating a spiralling vortex feel. The blurring effect is more obvious in this image but the image still retains its origins by not showing too much detail, alluding again to the unknown factor.

The third and final image is a closer shot of another 6 spiral ring. This shot is taken from a much lower angle and it is a lot closer. This shows detail of how the program uses its algorithm to create these shapes and explains the nature of the blurring effect from previous images.

All together I chose these images over some of my previous efforts as I wanted to strip it back to simplicity. I felt that my code was getting away from the minimalist effect I was happy with earlier in the project. I also removed the animation from the program as I felt the interactivity was taking away and stealing the spotlight so to speak.

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Mon, 28 May 2012 18:07:00 -0700 Even more 242 Development... http://loxyreid.posterous.com/even-more-242-development http://loxyreid.posterous.com/even-more-242-development

Some more editions of my spiral code. More playing around with variables and including a rotating loop to create sphere shapes.

 

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Fri, 25 May 2012 04:11:00 -0700 More Spiral 242 development http://loxyreid.posterous.com/more-spiral-242-development http://loxyreid.posterous.com/more-spiral-242-development

Some more attempts at changing the code to create something super-awesome.

This is me playing around with the number of spirals, how many arcs in each spiral and how close to each other they are.

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Wed, 23 May 2012 03:10:00 -0700 More development 242 http://loxyreid.posterous.com/more-development-242 http://loxyreid.posterous.com/more-development-242

Heres some more development from today.

Some color development:

White on black:

green on black with mild opacity:

red (pink) on black:

green on black but with less opacity:

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid
Tue, 22 May 2012 15:22:00 -0700 242 Spiral Development http://loxyreid.posterous.com/242-spiral-development http://loxyreid.posterous.com/242-spiral-development

Here are some pictures of me playing around with variables in the code to create new exciting forms.

This one was created by decreasing the spacing between each of the 'towers' as they get further from the centre

These ones are the same as before but the distance is incredibly shortened, making the blocks fuse together and seem very long, whilst still curving around.

This one is made by making the spiral have 200 spiral lines(?) coming out from the middle. The effect is that of many many rings, as the spacing between the lines decreases. Creating these interesting semi sphererical shapes.

These ones are from inversing the colors so it becomes white on black. The opacity effect of the previous color choice is less affected and therefore does not create the same effect.

[screenshot pending]

Permalink | Leave a comment  »

]]>
http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/lC03gVtXbgMYO Lachlan Reid loxyreid Lachlan Reid