Monthly Archives: October 2014

Processing: Learning Time

Last week we were challenged with making a clock in Processing that will display the time and date.

for this it uses 6 basic functions which access the clock on the computer it’s running on:

  • hour();
  • minute();
  • second();
  • day();
  • month();
  • year();

These functions are pretty self explanatory, they look into the system and give you the current values for each of them.

The first step here was making a simple clock for the time. To do this I got made a variable for each hours, minutes and seconds and then the values were converted into strings to the text could be displayed. To display the text a string is formed which combines all the values and then is saved another variable to make it easier to read

String timevalue = hwith0 + “:” + mwith0 + “:” + swith0;

The string is then printed using text() and the background is refreshed each frame to make sure the numbers are written on a clean slate and not on top of each other.

The problem here was for single digit values it only showed a single digit. With the usual clock format we’re used to, it uses 01, 02, 03 etc. until it reaches 10. All credit here goes to Joel Trew for solving this problem simply. It uses an if statement to to check the length of the value of the seconds for example to see if it is equal to one (i.e the numbers 0-9). If this statement is true it then just adds a string (“0”) to the beginning to make them display at the desired 00, 01, 02, 03 and so on.

Screen Shot 2014-10-30 at 16.02.45

Having a basic understanding of how to make a clock i wanted to develop this further by making it into a class so it is neater and easier to read. for this I made a class called time() which took the variables timeX and timeY so when putting it into the main body of code it can easily be placed without editing the class. The clock here uses the same code as above.

Screen Shot 2014-10-30 at 16.15.44

Along with the clock I wanted to display the date, this was simple enough using the same methods as before to get the values from the computer’s clock, convert them into strings and display them as text. Obviously this was too easy and I wanted a little challenge. The first thing I went for was displaying the day of the week alongside the clock. My first thought here was to use an algorithm that worked out what day of the week it was based on the date itself, but this proved to be a lot harder than i thought. I found a Wikipedia article which outlined the methods but they were far too complex and I couldn’t be bothered to work them out.

Then I remembered that Processing is based on Java and that I could just import the utilities I need to use. There is a Calendar java utility which conveniently has a method for finding the day of the week and then give it as a number value. For example today is Thursday and it returned the value ‘5’ meaning it is the 5th day of the week (starting Sunday).

From here I created an array which contained a list of strings which were each the week days starting with Sunday to match the Java calendar. As when accessing an array the first value is 0 I had to subtract 1 from the value the calendar gave me to correct it.

When including this text I thought why not display the month as text as well to keep with the theme. This used the same method of having an array store the month strings and then just accessing them with the month value, but subtracting one to make sure it starts at 0 as with the array.

Having the date display Thursday 30 October 2014 didn’t really roll of the tongue very well so I wanted this to then be displayed as 30th to match the way we usually speak and write the date. The obvious hump here was the ones that stand out, 1st, 2nd and 3rd. The way around this I found was just to use ifstatements to see if the value for the day is 1, 2 or 3 and then add the appropriate suffix to string. An if statement was also used to add a ‘th’ to all the values greater than 3.
Screen Shot 2014-10-30 at 16.32.22

For the sake of simplicity I made the time and date functions in different tabs but still within the same processing document. This meant that the main body where we have our setup and draw is clear and isn’t cluttered with too much text. It was just a simple process of making sure the background is drawn each frame and then the date and time being placed in as the desired coordinates. 
Screen Shot 2014-10-30 at 16.15.20

Obviously the clock here doesn’t look very interesting, but hey it works and took a fair few hours to get my head around making it work. The next step from here is to develop upon this, experimenting with shape and colour like I have before to make a more visually interesting clock. For example I can have it change colour for each second or minute, or change location around the screen. The clock information could also be used to create a visual representation of the time rather than a digital clock, much like an analogue clock. This will be my next course of action to play around with different ideas related to this.

Screen Shot 2014-10-30 at 16.39.25

More Processing!

Over the week I’ve been busy practicing with processing, making some new experimental sketches to come to grips with how the if statements and for loops work.

One of my first ones was pretty similar to what i’ve made before, it was basically a spinning triangle which changed hue; nothing too interesting. I made the triangle using beginShape() as it allows you to plot the location of each vertex of the shape and lets you have as many vertexes as you want. Putting the frame rate up to 60 make it better for a drawing tool as the shape was drawn twice as many times a second as the default.

Screen Shot 2014-10-11 at 14.50.20

I play around with opacity and changing size for the shape to make it a bit more interesting, clearly it looks a bit more fun than the above image which is cool.Screen Shot 2014-10-11 at 13.25.10

With this tool i found that if I just held it in one place it would make some things which looked like flowers, but due to the way the size changed and the hue changed it limited the colour ranges of the flowers when making them, meaning I was only able to get some greeny/blue ones and some pink/yellow ones.Screen Shot 2014-10-11 at 13.24.22

This one is my first foray into using bezier curves. With these curves you plot a start point and an end point, as well as two other ‘control’ points with change the shape of the curve. As with before I started simply by making it rotate and change colour to see what patterns I could create. The bezier curve is a really good way to make more interesting shapes and I went on to experiment with it further.Screen Shot  2014-10-11 at 12.50.22

I decided I wanted to set myself a design challenge. Starting relatively simply I went for making a flower. For this flower i split it into 3 main classes, the stigmas, the petals and the leafs. Each class is the method for drawing one stigma, one petal and one leaf. In order to make the flower I had for loops running on click with various amounts in the loop. Having 3 different loops that ran meant I could have different numbers of each thing, e.g. 5 stigmas, 5 petals and 3 leaves. The loops randomly rotate each element each time its ran meaning the flowers are sort of randomly generated.Screen Shot 2014-10-17 at 14.38.54

due to this random rotation it also meant that sometimes the flowers didn’t really come out as intended and it sometimes took multiple attempts to get a flower that looked someone normal.
Screen Shot 2014-10-17 at 14.40.34

Because of the randomness making horrible looking flowers, i looked into a better way of working out the rotation of the shapes to get a more evenly spaced flower. I came up with a method that creates an evenly spaced flower but now I think each time its make it looks too similar to the last. Here is where I need to develop this idea and add an element of randomness back in, but limit it to keep the petals and leafs more or less spaced evenly. Screen Shot 2014-10-17 at 15.07.20

Design Iterations: Final Poster

After receiving feedback on the first iteration of the Dorset independence poster, we went on to develop and improve our idea for the poster. We came up with our idea for the slogan ‘An independent Dorset is a better Dorset’ as it is simple and quite clearly gets the point across what the poster is about. As for typography and layout we were inspired with a Bauhaus style and using two contrasting fonts to make it a bit abstract and eye catching. It’s interesting to note that new idea of ‘new typography’ came from the Bauhaus movement, considering typography to be a communications medium concerned with the clarity of the message in its most emphatic form. Typography became more than just away of communicating words it was a way of putting a deeper meaning into the message though imagery with the type, looking at what the letter forms might connote rather than just their depictions.

As for the image itself, it remained largely the same but I remade it at a higher resolution and put a bit more care in when cutting out the shapes to give cleaner edges. I also decided to desaturate the background a bit to make the figure and flag stand out a lot more. This is a definite improvement on the last iteration as before the background was too colourful and distracted from the foreground.

You might be thinking “Hey, why are there only two iterations of this poster?!” That’s because I don’t have the files for the final version so don’t have the screenshots of the iterations. Hopefully at some point I will get ahold of them and add them in here. For now, you can use your imaginations.

In one iteration we toyed around with different fonts for the tagline, trying a variety of serif and sans serif fonts to see which best suited our imagery and message. The combination we came up with can best be described as a mixture of ‘old style’ with the serif style font, and ‘new stye’ with the more modern and clean sans-serif font. I feel the combination of the two best exemplifies the focus on traditional Dorset heritage and the future and more modern side of the county.

The next stage of iteration turned to designing a logo to be placed on the poster. The idea behind the logo was to make an image that could be used to potentially tie together a series of posters by uniting them with a common, recognisable logo. Again, logo employs Dorset related imagery with the three hills and sunset behind. It’s a relatively simple logo but I feel it still manages to get the idea of Dorset across. The logo ended up on the top right of the poster as to balance out the text near the bottom left.


First Project: Processing

As I mentioned here, the first project we are doing is going to be made using processing. The ultimate aim is the create an interactive information graphic about 21st century media to be displayed on the screens in the foyer of the media building at uni.

For those who are keen viewers of this wonderful blog, you’ll remember that I’ve already done some work in processing, experimenting with generative design and the Twitter API. In friday’s workshop we got to grips using more complicated methods in processing such as for loops, if statements and even the odd modulo.

The first thing we made was a simple drawing tool which used an if statement to see if the mouse was clicked, and if it was it would then draw the circle and follow the position of the mouse. Obviously this was very basic stuff so we experimented a bit further by making the size of the drawing tool increase. For this we used a modulo e.g. x=(x+1)%50. What this does is adds 1 to the value of x over and over again until it reached 49 and then the modulo resets it to 0 so the counting can start again. I used a similar methods for the value of the hue which increased its value making the colour move up the spectrum and then loop back around. I like the effect this gave as its a gradual change in colour rather than just random values which we experimented with before.

Screen Shot 2014-10-11 at 12.17.50

Next up we played around with nested for loops in order to create a grid. This method is great for creating something which looks visually complex but can be written with very few lines of code. In my example below, I again added an element of interactive as the mouses x coordinate influenced the size of the grid and the colours. This meant that depending on the position of the mouse, the grid would be animated with waves of colours passing over it which looked pretty cool.

Screen Shot 2014-10-11 at 12.18.50

The final thing we did in the workshop was to play around with rotation. For this started by creating a rotating square around the centre of the canvas. This then progressed into making the square change colour with the same process i had used before to get the gradual hue changes. In this one the opacity of the square is lower so when it is redrawn over the old shapes, they can still be seen slightly, creating a different effect. We also made the square increase in size using the same modulo statement which resulted in the pattern created constantly evolving and moving. This created a rather psychedelic effect which I like a lot and will try to improve upon in the future.
Screen Shot 2014-10-11 at 12.14.48

For next week we’ve been tasked with playing around with some of the methods we’ve learned about and to make something cool to showcase in the workshop. So the plan for this weekend is to sit in the dark in my room, write a little code and watch some colourful shapes dance around on my screen.

Tagged ,

Design and Design Movements

We start our journey through Design Iterations thinking about what is design? Design is a method used to find solutions to problems. It is influenced by many external factors such as personal taste, cultural/political contexts, business activity and by enjoyment of craft itself. These different approaches to design result in the multitude of design ideas and design movements which have gotten us where we are today in terms of the objects we use and love, and the clothes we wear.

Design is the specification of an object within an environment. The object affords actions and interactions with it, based on influences with the external environment in which it exists. Affordance is both actual and perceived properties. The actual properties usually related to the intended or imagined use of an object through its design and the perceived properties being new, unthought of ways of using and interacting with a device which weren’t originally considered in its creation. Objects afford actions. Prime examples of this would be a button which affords pressing, or a door knob which affords turning. Affordances has various implications for design, human computer interactions  ergonomics, etc. It is widely believed that good design has explicit affordances; it is obvious how the object is interacted with.

Within all areas of design, user requirements play a big role with requirements gathering being an integral part of the process in order to define the problem to be solved. Design problems often requires negotiation with a client (who the object is being designed for). The problem here is that the client doesn’t always know exactly what they want and adopt an “i’ll know what i want when I see it” approach, making the design process far more difficult and lengthy. Requirements can be gathered through a numbers of ways such as observation. This method was used for collecting requirements for the Dorset independence poster, finding out information about the intended audience and how they interact with the space where the poster is going. Other methods include interviews with either the client or the intended audience/consumers of a device, or questionnaires to gather more specific/targeted information when collecting requirements.

I mentioned above how design can be influenced by cultural and political contexts, this is where the idea of a design movement stems from. A few examples of design movements include the Arts and Crafts movement (1880-1910), Art Nouveau (1980-1910), Bauhaus Modernism (1900-1939), Art Deco (1925-1939), Streamline Moderne (1935-1955), and Postmodernism (1975-present) which are a few that i’ve learned about in the past and are interested in. These movements often exemplify popular cultural and political ideologies of the time period in which they take place. Often movements, or elements from movements, are repeated time and time again throughout history. For example, the Arts and Crafts movement was an anti-industrialist movement which focused its design style on traditional craftsmanship and decorative arts. It often involved simple forms and emphasised the qualities of the materials used. A similar thing can be seen in modern technology as there is a great focus on aesthetics and quality of materials used in computing such as phones and laptops, going against the cheap plastic ones which were so popular just a few years ago. Contemporary design in my opinion is largely modernist and minimalist/reductionist. It often exhibits a simple, clean and uncluttered look with clean lines and artistic flair. There is usually a focus on quality of materials and then showing off those qualities in the way the material is finished.

Design movements come in handy when looking for inspiration for a piece of work, they usually outline a set of rules and guidelines which can be followed to make something visually similar. Design movements may prove useful in future projects as I decide upon how I want to layout and present information. One of my favourite design movements is Postmodernism due to the abstraction of ideas and images as a response to the perceived blandness of modernism. Robert Venturi, a renown postmodern architect famously said “less is bore” as a play on Modernist Ludwig Mies van der Rohe known phrase “less is more”. While I still love the minimalism associated with the modernist movement, in certain contexts the style does become very bland and boring, which where the eccentric style of postmodernism picks up the slack.

Tagged ,

Design Iterations: Dorset Independence

The aim for the first project in second year is to create an interactive information graphic using Processing. The graphic will go on one of the in the main foyer for the media building which has a lot of people passing through it every day. In order to get us started thinking about how to make an eye-catching display for this place we’ve been tasked to come up with a poster to be displayed in the area to promote an imaginary vote for Dorset to go independent (much like the Scottish referendum).

A good starting point was looking at posters and flyers which were used for the referendum which promoted the idea of independence. One of the best examples (shown below) uses a lot of familiar Scottish imagery. The female figure in the image has bright orange hair which is stereotypically associated with people from Scotland and is dressed in traditional Scottish garb, be it a traditional male outfit. She is holding bagpipes which again is another symbol associated with Scotland as their national instrument. The call to action is short and sweet, getting the message across in the simplest way possible to get people to vote ‘yes’ for the independence of Scotland. The use of the word ‘Brave’ is a play on Braveheart, a film which is centred around a Scottish revolution against the English; a similar but more brutal circumstance to the revolution.

The first plan of action was to research about Dorset as a county and find out as much information about it as we could. Learning about its history and stereotypes associated with the area formed a good platform to build upon and combine ideas to make a similar call to action poster.

The design process involved brainstorming ideas of how we can combine certain symbols and stereotypes to get the message across that we want. We ended up focusing on the agricultural side of the Dorset area, and the natural hilly landscape that it is so famous for. We also want to include use of the Flag of Dorset as flag are a very good symbol to incite pride in people for their homeland.

Initially we sketched a few ideas on paper while we still had time in the seminar, coming up with two main ideas. They both focused on the rolling hill imagery often associated with the county of Dorset and also incorporated a farmer figure to highlight the agricultural connotations. We felt that the loan farmer helped convey the ‘independence’ imagery we were going for, placing a lone, powerful looking figure connoting power and strength to protect Dorset and its independence.


Everyone in the group (4 of us) came up with their own individual interpretations of our brainstorm and went away to design a poster or two at home. I’m just going to talk about my own work as I know my own design process behind the idea. My first point of inspiration was Nazi propaganda. Initially this might seem a bit extreme but if you think about it, the propaganda they used did a great job as promoting Nazi pride and amassed a large following, which is exactly the kind of thing we’re trying to do. I based my idea around the poster below as it has good use of nazi imagery. The figure is stereotypical of a nazi soldier, which were seen everywhere so it would’ve been a familiar sight and he is holding a flag which again, helps to incite pride and familiarity of the flag and message.

So, this is my take on a Dorset independence poster (below). The character I used is a young looking farmer which utilises the agricultural imagery we brainstormed about. The location where the poster is to be displayed influenced my choice of image for the farmer. As most of the people passing through the building are students (young adults) it made sense for the poster to be relatable for them. With the farmer looking straight forward it will hopefully draw in people’s attention, as the gaze could make people feel intrigued or uncomfortable and go in for a closer look to see what the poster is about. The chicken in the image adds a sense of humour so the poster isn’t too serious or boring (as I’m sure people love chickens). Originally the farmer was holding a pitchfork but I used a little photoshop wizardry to change it into the Dorset flag, similar to that of the image above. The flag is used to increase familiarity with the imagery and instil a sense of pride about the flag as the intended audience all live in the Dorset area. The background of the image was also changed to an iconic Dorset landscape. People who pay attention to the poster may recognise the image on the hillside to the left of the poster as the Cerne Abbas Giant. The giant is a large part of Dorset history and lore, with records dating back to the 17th century. It is also one of England’s best known hill figures and is a major visitor attraction in the region.

This version isn’t yet completed as we haven’t decided on a good tagline/call to action to put on it. This version was also a very quick mockup so some of the photoshopping is a bit dodgy and will be improved in further iterations as we decide on what works and what can be improved with the idea.