Contextualising the Final Ouput

Contextualising my final output has been rather difficult for me. This is due to me looking at something and trying to make something rather complicated. After a long discussion with my sister, who I may say is into a bit of biology and design, the idea of making it science related came upon us. The way we saw it as was the part of the brain or another body/organ part that attaches and detaches itself from these nodes. Looking closer at the code I noticed that visualising this could become rather easy.

I have googled around for any events related to the nervous system and came upon this one: http://www.fens.org/About-Neuroscience/Calendar/Meetings/2015/011/Assembly--Disassembly-of-the-Nervous-System/ My idea is to create a poster related to this event.

First quick poster. Putting into context. 

Week 11 - Developments

Developments of getting nice shapes of the fonts. This time with screenshots of the code. Even though I have played around with so many different specifications I didn't always take screenshots with the image and the different variables. I did note down what numPoints and maxDistance works with which font size. (Font, numPoints, maxDistance). 100, 250, 55; 200, 300, 75; 300, 300, 75; 300, 100, 250. With some letters I had to adjust the variables again as like the N or S is bigger than a lower case a or e it had to increase slightly the numPoints and with it sometimes the maxDistance. This is also includes i or l where I had to decrease it slightly. 

With the number I was looking into if I should gather the context of when and where through the code as well but through further development and exploring it looked cleaner with just the title as the main focus point generated through the code. 

In the next image I was looking again into creating the full text in Processing but found the same result again. Also since the different sizes of each word I would have to scale them either up or down and would look very uneven. Through the single type I can easily increase and decrease the font size, but most important can keep it consistently with one font size. Also putting into Photoshop I can looking into kerning and leading which Processing can't do.

Just another colour example for the line colour. Changing the colour of the circles around can be quite confusing as you create one colourMode(); and the actual colour which changes when you mouse click to generate another set of circles and lines from the font.

This could become an interface for a website. Using the random() function to create different stroke weights for the shape. 

Development to the Final Output in Processing

Exploring the code towards my final print was a very long process a I had to figure out the best possible way to read the text. It involved getting each letter out of the text the best possible way in regards to the dots, lines and colours. Then taking all the pdf's into Photoshop to create the text.

With the following examples I have experimented with number of dots in regards to size of the letter, size of dots in regards of size of the letter, line distance and colours. From a selection of about 3 for each I chose 1 I liked most (not all are visualised are). As part of the exploring process I looked at sections of the words, especially ones that are repeated such as 'ss', 'em' or 'bly'. With this i found even though the letters were clear it looked a bit odd without being able to kern it.

Some full size ones as you can't really see the differences with the collected letters representations. Here you can also see the different sizes I was working with, this I scaled often down to actually work on the poster but to get a nice shape working with a larger size was easiest. Also I looked for connected and disconnected parts the most when choosing the letters linking it with the 'Assembly and Disassembly' of the poster. 

New Context Idea

To put the letters into context I had to step away from circles with letters and just look at either/or as together they have nothing in common. Instead of using single letters I looked at 'events' or conferences that could be happening about the nervous system. Through developing it in Processing with the geomerative library and using the lines and circles to establish the type I noticed that having long words isn't that great or easy to make it readable. I had to adjust a lot with the number of points generated and max. distance for the lines. I liked the whole connecting the words but that it isn't readable wasn't what I was looking for. Also played around with how big the dots will be. Making them smaller was a big factor in making it readable. If I wasn't looking into making the text readable it definitely starts to create some interesting shapes and dimensions with the over lapping lines.

Therefore I started looking into just using each letter or create segments of unto 3 letters. This meant that it is a smaller space to create all of the points and closer together. The width of the words made a big impact on the point generated. Here I dug deeper with the number of points, max. distance, size of the dots and colours. 

Putting into Context

Any of the code outputs generated can have any kind of meaning put into various context. Simple designs can be created and the variables set in the code would suit each design. Therefore this design is great for user customisation. Can put the algorithms onto a website/ other user interface (iPhone or Android App) and the buyer can customise to their preference.

Creating a new bottle design for a drink, such as lifestyle drinks, water, etc..

A simple invitation design as in for the background, each invitation can be generated differently. You can set the specs suited for your occasion. Similar to the invitations posters, flyers, brochures, etc. are easily created. You can adjust the colours, sizes of the circles and max number of circles created.

Week 10 – Entourage

After playing around with one of the type examples I noticed that when adapting it and changing it to the point the text is sometimes (un)recognisable a different kind of pattern appears. To me it looked like a new approach on creating a development housing plan.

I looked again at putting the dots into context and came up with an interior design aspect. It is only a subtle way, especially if using no colour (as in same colours as the blinds, shaded on). What I was thinking that it could be reproduced to the users wants, as in size of the dots or stroke weight of the lines and colours. Also the overlaying factor. Here I was playing with two or more layers generated from the code.

Another quick entourage of one of the folded objects. Here representing a interesting structure in the city.