Processing Workshop #3

In this workshop we experimented with loops and rotation some more. We also looked into using functions and using variables with functions.

3.1 Triangles and Functions

Firstly we created a house. We did this by making a series shapes and putting them together to make them form a simple house. There is no house function built in to processing which creates a house for you such as rect() and ellipse() so we had to make the house ourselves. We did the by creating a square for the main body of the house, then we put another smaller rectangle inside that initial square to replicate a door. We then used a function we hadn’t yet used called triangle. The triangle function works like the line() function in that you have to declare two values (one each for the x and y position on the canvas) but unlike lines there are 3 positions for the 3 points of the triangle. An example of the code and the resulting output can be seen below.

Screen Shot 2014-10-29 at 12.03.11

Screen Shot 2014-10-29 at 12.09.49

What we then did was created a function and put the code for the house inside that function. This is useful because if you want to create numerous houses you can just insert the function into the void draw() function and it saves you the time of having to write out the code and also minimises the amount of code which makes the document easier to navigate. Below shows how we created a function using void and then the name we want to use for the function, which is usually based on what it is or what it does. In this case the name of the function is house.

Screen Shot 2014-10-29 at 12.14.20

The output is exactly the same as before except now we can declare the function multiple times, which means we can have multiple houses in different positions on the canvas. However, to make the house be in a different position when we declared the function we had to add some variables in the parameters. We created two variables called x and y which would act as the x and y positions of the three shapes which made up the house. We then changed the parameters of each x and y position in each shape so that they would correspond to the two x and y positions which we declared in the house function. This is shown below.

Screen Shot 2014-10-29 at 17.27.21

3.2 Manipulating Functions

In order to make sure the shapes still formed a house when moved we had to add numbers to the two variables. x + 12 for example, means that the position should be 12 away from wherever the x variable is declared in the void house(), function.

Screen Shot 2014-10-29 at 17.27.53.

Entering different numbers in the void house parameters results in the house being in a different position.

Once you have created a function you can put as many variables into the parameters as you want, you can also change those variables to make the function do different things.

Screen Shot 2014-10-29 at 18.18.29

Here we have created another variable (c) which allows us to change the colour of the house in the variable, we have also changed the x and y variables to mouseX and mouseY which makes the house follow the mouse pointer as we did in a previous workshop.

We then put the house into a nested loop (discussed in workshop 2 blog post ) and made the colour random so that each house flashed a different colour.

Screen Shot 2014-10-29 at 18.43.38        Screen Shot 2014-10-29 at 18.43.47

Above: some nice flashy houses in a nested for loop.

We then looked into rotation as I have already discussed in the workshop 2 blog post . We rotated the first for loop of houses at a 45 degree angle. An example can be seen below.

Screen Shot 2014-10-29 at 19.27.27Screen Shot 2014-10-29 at 19.27.38

We then used translate to make the line of house rotate around the centre of the canvas (as discussed in workshop 2). And then we made the background fade by placing a rect across the entire canvas and making the colour black. The result of this can be seen below.

Screen Shot 2014-10-29 at 19.46.10 Screen Shot 2014-10-29 at 19.45.19

In this example I’ve moved the position of the rect to 400 on the x axis. This is so the difference can be seen between what the output looks like if there is no rect over the canvas. It’s also important that the rect function comes before the rest of the code otherwise it doesn’t work because the rectangle is always ‘behind’ the other shapes and nothing happens.

3.3. Arrays

In this workshop we also explored arrays and how to use them. In this example we created an array which contained different colours, the use of this was that when we wanted to call a colour we could simply use the array to determine which colour a certain shape was. To demonstrate this I created a series of shapes and assigned them a different colour from the array.

Screen Shot 2014-10-29 at 21.14.57

You can see the array at the beginning of the code. It contains each colour that will be used.

Screen Shot 2014-10-29 at 21.15.03

Here we can see that in the fill() section a different number is used for each shape. An arrays works like a list, if you use p[3] the colour of the shape will be what the fourth colour in the list is (arrays count from 0).

In the workshop we used an array to change the colour of the rotating objects.

3.4 saveFrame function

What we did next was use saveFrame() make a video of what we had made in our workshop. This was relatively easy and consisted of using the writing in the function “saveFrame” followed by the name the images would have once they are saved in the folder. Once this had been done we simply had to run the code and wait for as long as we wanted the video to be.

Because each frame is saved separately, we had to put the images together so that they were a video instead of a bunch of frames. We did this by using the Movie Maker tool which come with the processing application.

Screen Shot 2014-10-29 at 22.57.46

Here we can see the saveFrame function and at the top is the array.

Screen Shot 2014-10-29 at 22.58.09

This is the final house function. As can be seen in the video at the bottom the ellipse is controlled by the mouse pointer.

Screen Shot 2014-10-29 at 22.59.14

What the file looks like after the saveFrame function is initiated.

Screen Shot 2014-10-29 at 23.00.40

A screenshot of the moviemaker tool and options.

Final Video

Advertisements

Conveying Meaning in Design

For my design iterations poster project I looked into art and design that conveyed meanings through analogies. I found a number of different designs in which the artists/designers use a number of different methods. I feel that for my iterative process it is useful to discuss some concepts that I think these designs use.

I recently discovered an artist named Pawal Kuczynski whose works are particularly interesting because they convey current political or societal discourse and philosophical ideas through art in a way that makes the audience think about the idea through metaphor or semiotics.

Kuc1

The drawing above depicts a man in front of a wall. There is a ladder to get over the wall in which some of the steps have been used to make a fire. This suggests that instead of climbing over the ladder to the other side the man is using up the resources he has to temporarily keep himself warm, where as he could use the ladder to climb over the wall. This is quite ambiguous as you don’t actually know what is over the wall (this could represent taking a chance) though it is brighter on the other side of the wall where as he is in darkness which suggests that whatever is on the other side of the wall is better than the side he is currently on (remaining in the dark).

The “other side of the wall” could represent enlightenment (the light) or knowledge or simply a better world to live in. The wall is also a well known symbol for confinement and isolation which has been used in art such as Pink Floyd’s The Wall (as I discussed previously in a blog post from the first year). The ladder could represent resources being wasted or a decision or a chance to overcome challenges (societal or personal). To me it suggests that the man is wasting the chance he has been given to get past obstacles that are in the way which are within his power to overcome; but out of ignorance or greed he has opted for the less rational decision. The man could either be personification of government or society or could even represent the self.

Because of the ambiguity there are a number of different ways that the text can be depicted. This can sometimes be useful because it means that people will apply the text to something which is personal to them and give it their own meaning, it might not be the same meaning as the designer had intended but it could mean that more people can relate to the design because they interpret it in their own way which applies to their individuality. To me this is more artistic (subjective) because it allows the audience to make up their own decision as to what the meaning is, as opposed to functional (objective) design which is supposed to only have one intended outcome, and any other interpretations are considered a “negative response”. Both are useful in different ways.

Kuc2

Not all of Kuczynski’s designs are as ambiguous as the first one described. For example this one (above) has a clearer meaning. The fishing wire and hook are a metaphor for addiction (“getting hooked”). The text suggests that the person is getting reeled in to the “bottom of the bottle” – an expression which is used for alcoholism when somebody is at a low point of their addiction (“You can’t find happiness at the bottom of a bottle”). I think that this design doesn’t necessarily have to apply to just alcohol addiction as it personally made me think about all addiction but when compared to the other drawing the meaning is much clearer.

kuc3

Here is another work by Kuczynski which is less ambiguous and more direct. It depicts the United States Capitol building and Washington Monument – two very famous American buildings. The Washington Monument is the nose of Pinocchio, a fictional character most famously known from the Disney Film Pinocchio. This suggest that “America was built on a lie” – a radical, anarchistic view on the history of America. The use of the Washington Capital building is symbolism for the Government (and I would argue capitalism). The “Pinocchio” puppet suggests that the lie has been buried and forgotten.

kuc4

This is another work by Kuczynski which shows a man looking out at the world from a prison through the Facebook logo. This suggests that Social Media has entrapped society and they’re now looking out at the world through social media instead of experiencing it in person. This deals with modern discourse on new media and how we react with media, and what affect it has on society. The Facebook logo is a periscope and contains both symbolism and metaphor. It can also be related to spying, as periscopes are used on submarines to see without being seen. The door suggests that we have a choice to go out into the world if we want but we’d rather stay in our ‘prisons’ and view the world from afar. The meanings are quite ambiguous but also the use of the Facebook logo makes it clear that the artist is describing social media and the prison applies negative connotation to the concept of social media.

Another artist’s work that I have looked at is Banksy’s. Banksy is a street artist whose art is quite similar to that of Kuczynski. The main difference between the two is that Banksy relies on physical space more (or at least in a different way). Where as Kuczynski’s canvas is paper (or whatever he uses to draw his art on), Banksy’s canvas is the landscape itself. This relates to the Independent Dorset project because when we showcase the posters in Weymouth house we have to take into consideration the space around us. Banksy is also a good example for the posters because it could be argued that he uses unconventional methods when creating his design/art.

banks1

This image of a boy manufacturing British flags is a good example of this because it doesn’t just use stencils and spray paint to convey the message but also uses objects (in this case the flags) as part of the design. This is interesting because it makes the artwork come to life as it’s no longer just a 2d image and instead of recreating the object the actual object is being used. This is effective because if the flags were also spray painted they wouldn’t have as much meaning. Because the audience might associate flags with patriotism and flags are often hung up on walls during certain events (such as Royal anniversaries etc) the audience can associate this with actual events which they have experienced so if the flags were spray painted it would be harder to make that connection. The downside to this however is it can lose its meaning easily, as if someone were to tear the flags down then the meaning would be lost, so it is more temporary (except when considering that the use of the internet brings more permanence).

ukip

An example of using both semiotics and analogies in political campaigns is shown in this UKIP poster. The poster shows a British flag being burnt with the EU flag behind it, suggesting that the EU is destroying Britain, or “tearing a hole through” Britain. In this example the flags are used as the symbols. This allows the audience to associate the symbols with Britain and the EU quickly because they are ubiquitous (this is similar to the use of the flag in the Banksy example except it is being used here in a positive way as opposed to the Banksy example which creates negative connotation). The fire and the hole in the flag is a metaphor for destruction. Some text is added just to confirm what the imagery suggests and to provide some information once the images have grabbed the attention of the audience.

I think these designs are related to the poster project we are currently doing because they use semiotics to put images into people heads, this is important because in order for the posters to be efficient in their intent they need to be able to communicate ideas quickly, using semiotics and analogies is a better method for this than words because it requires less effort in a shorter timescale to get the intended message across to the audience. Using text is useful to get more information across but images capture attention quicker and are more affective at making connections between ideas. They are related to media because they communicate ideas through images.

References

Kuczynski, P., Website of Pawel Kuczynski. Available from: http://www.pawelkuczynski.com/.  [Accessed 24 October 2014].

Banksy, Banksy’s website. Available from: http://banksy.co.uk/menu.asp [Accessed 24 October 2014].

Processing Mind Map

For the work we did on the Independent Dorset poster I created a mind map  in Processing out of the notes I took in the seminar. The reason I did this is because I wanted to become more familiar with simple concepts in processing and programming in general. The mind map contains rectangles, lines and text. For each one I had to define the coordinates where I wanted the shape or text to be placed. It was useful because it made me think about functions and variables and how I could have saved time in defining each line and square. I came to the conclusion that using variables wouldn’t save much time as I would still have to add or subtract numbers to each one. Even if I had created a function I would still have to define the coordinates in the parameters. Maybe there is a way to do this but it is not something I am aware of.

I also explored the mouse hover effect and used this example on processing.org. In the example it shows how to create a square and a circle, if you hover over the square the background changes colour and the same happens for the circle. I had to mess around with the code to make it suit my usage. I changed the size of the rectangle to fit in with my mind map and I got rid of the circle. Messing around with the code was valuable to me as I found it useful looking at somebody else’s code and changing things to see what happened. It helped me understand functions better and introduced me to the boolean variable which made me think about situations that boolean may be used.

If you hover over the “Dorset Independence” rectangle in the middle of the mind map, every rectangle changes colour. This is because each rectangle is assigned the same variable and the coordinates of the variable are set to the centre of the canvas, the result of this is that the rectangles change colour but only when you hover over the rectangle in the middle. What I wanted to do is make each rectangle change colour separately when hovered over. I’m trying to work out a way to do this where I don’t have to create a function for each rectangle as this is time consuming and would result in a lot of code.

Although this isn’t something which you would generally use processing for (it’s much less time consuming to use Microsoft word or Powerpoint or Photoshop) it wasn’t really the reason why I did it. I knew that it would take longer and I wouldn’t have even bothered to make the mind map had I not wanted to mess around with something on processing. It introduced me to new concepts and made me think “what will happen if I try this?” and that was useful to me.

This is the link to the original code I used – https://processing.org/examples/rollover.html

This is a link to a live version of the mind map –  http://lukemonetdesigns.com/processing_js/

Design Iterations Seminar #2

For our 2nd seminar the group has been asked to come up with a basic sketch of our ideas. From the work we have previously done we have come up with an idea of some hands holding a beach or location in Dorset with the tag line “It’s in your hands”, or something similar to that. We started to write down a list of the tag lines which we thought would be appropriate for that imagery and we came up with a number of slogans for the campaign poster. This is a list of the ideas for a slogan that I wrote down.

  • It’s still in your/our hands – lets keeps it that way.
  • Go back to your roots.
  • Be Independent, Be Dorset

The justification behind the hands idea is that it has a deeper underlying meaning, which we feel could be quite powerful if presented in the right way. Claudia originally came up with the idea and the rest of the group agreed that it was a possible approach we could take. After looking at reasons why Dorset hypothetically might want to become an independent county (you can see some of the reasons in the processing mind map which I created) we decided that the main routes to take would be the preservation of agricultural traditions and of natural landscapes. Dorset is quite known for its seaside, cliffs, wooded locations, rural landscapes and ‘areas of outstanding beauty’ which are designated areas across the UK that the Government has deemed worthy of preservation.

keepdorset              beckydorset
This is the sketch that Tom drew              This is the sketch that Becky drew.

Photo on 03-11-2014 at 00.19

Here is a very draft idea of the idea I had for the poster.

When we presented the idea to the rest of the group we got some good feedback. Some of the group liked the wordplay and the intended meaning that we hoped to put across to the audience. There was some discussion over what would be a better tag line to have as we had chosen different taglines for each sketch. Some preferred the “Don’t Drop Dorset” tag line where as others preffered “Keep Dorset in our Hands”. Although personally I’m a sucker for alliteration I felt that the “Don’t Drop Dorset” didn’t make it clear what the campaigns intentions were. I felt that the “slip through fingers” or “it’s in our hands” worked  better as a metaphor for saying “The Dorset we know and love is disappearing but it’s not too late to go change it”. A good point was also pointed out that “don’t drop” and “slip through” have slightly more negative connotations than “it’s in our hands” which suggests that “it’s up to us to do something and we can do it if we work together”.

What I found interesting is that we all came up with different interpretations for one suggestion of ‘hands holding Dorset’. The particular thing that was different in all our interpretations was the positioning of the hands. Tom pictured the hands from a first person perspective, looking down. I pictured the hands as if someone was standing opposite to me holding them towards me and Becky pictured the hands similar to Tom but to me it looked more as if the hands were raised up in the air (although this could just be my interpretation).

This made me think of the different ways in which semiotics can affect the audience. Although they are essentially the same symbols in different positioning, they have different meanings. For example, a raised fist is symbolic of power, rising up, courage, rage or hostility. Where as a flat palm from a first person perspective is more symbolic of being human, which may be something to do with ‘looking down at your hands’. Held out, stretched hands are symbolic of begging, or the poor. Thumbs up is a sign of good. Middle finger up is a sign of rudeness. A flat palm in a high five gesture suggests agreement. Shaking hands is symbolic of friendship, peace, respect etc. This shows the power of gesture and body language and also how we associate certain concepts with our own self and others.

It also shows that there can be many different meanings portrayed by a different formation of the same thing. I think that one of the reasons why there are so many variations of meaning for the hands could be because the hands are very personal and are a very human characteristic (opposable thumbs). Here are some examples I have looked at where hands have been used in other variations.

rage-against-the-machine-fist-fabric-poster-51052

The band Rage Against the Machine use a raised fist which reflects their anti-establishment lyrics and their powerful anarchistic style of music.

Mailbag-Communist

The raised fist is also a famous communist symbol and represents the power of unity (a common theme of socialism).

briatin

The pointing finger in this famous World War I poster is said to have been created because wherever one stood in a room it always seemed that the hand was pointing at them. This is known as ‘differential rotation effect’. It was so successful in it’s goal that the image of the pointing hand has been used many times over.

Are_You_doing_all_you_can_1942

The hand was used by America in World War II because it had been proven so effective. The word ‘you’ is the important word. The poster tries to create guilt in individuals by singling them out and encouraging them to do more for the war effort.

Facebook-Like-Button

The Facebook ‘like’ button uses a thumbs up symbol which suggests that if the user enjoys or agrees with the content they’re giving it a thumbs up in agreement.

glasses_john_lennon_v_sign_men_1024x1024_wallpaperhi.com

John Lennon was famous for promoting peace, the ‘peace’ sign was adopted by hippie culture in the late 60s. During and after the Second World War the two fingers meant ‘V for Victory’, the same signs can change meaning over time (the swastika for example) or have different meanings for different cultures.

palmback

Where as the same gesture with the hand turned around the other way has a totally different meaning altogether. As this picture suggests however, sometimes the facial expressions are just as important as the hand gestures.

Processing Workshop #2

In the second workshop we explored a range of different programming concepts such as variables, if statements and for loops. This is my attempt to explain the processes that were undertaken in the workshop and some justification as to why the particular types of syntax used are useful in those situations.

2.1 If Statements and Modulo

An if statement is a conditional statement. In short this means that under a certain condition a program will execute the code written within the statement. An if statement is useful when you want the program to perform one action under a certain set of requirements and another if it doesn’t meet those requirements.

To become familiar with if statements we continued to explore the system variables mouseX and mouseY. We wrote a number of if statements which outputted different shapes to the gui depending on which mouse button was pressed.

Screen Shot 2014-10-11 at 00.39.26

Here we can see that the value of LEFT is set to the system variable called mouseButton. We have also added a rectangle under the coordinates of mouseX and mouseY, which we explored in the first workshop and then set the size of the rectangle to 100 by 100 pixels which actually makes it a square. Also we randomised the fill colours to make them change randomly each time the left mouse button is clicked, you can see an image of this below.

Screen Shot 2014-10-11 at 00.47.09

We experimented with these if statements to make different shapes appear depending on what mouse button was clicked. Next we used the ellipse tag to make a circle appear when the right mouse button is clicked. This time however we used modulo to make the ellipse larger by a 1 pixel circumference each time the mouse button was clicked and then reset back to it’s original size after it had reached 400 pixels in circumference.

Screen Shot 2014-10-26 at 18.11.42

In this screenshot I am dragging the mouse from left to right and the circumference of the circle is growing as I hold down the right button of the mouse, the code can be seen below.

Screen Shot 2014-10-26 at 18.17.13

2.2 Nested for loops

A nested for loop is a loop within a loop. A nested loop is useful when you want to add more variation to an existing loop. You can also have as many loops as possible which allows you to keep on adding different parameters on to the same loop.

In the workshop we experimented with for loops by firstly making a 10 by 10 pixel square to extend until it reached the full width of the canvas. We did this by doing a single for loop and defining a variable, in this instance called ‘i’. Firstly we had to tell processing where we wanted the loop to begin, which we set to 0, which by default is in the top left corner of the canvas. Then we had to tell the loop when to stop, we did this by i < width which in short means “until i is less that width”. The next stage was to state what we actually want to happen when the loop runs, in the case we wanted the 10 by 10 pixel square to move horizontally by ten pixels each time until it reached the width of the canvas.

line repeat

This is just a single for loop which makes the squares duplicate until they reach the width of the canvas. The next thing we did was create a nested for loop, we did this by creating another for loop, for the height, and did the same thing as the original loop except changed < width with < height. We then put the original loop inside the new loop so it covered the whole canvas.

In order to demonstrate the usefulness of variables we then set a variable called ‘s’ and gave it the value of a number (in this case 10) and then changed all the dimensions with the number 10 to the variable ‘s’. This is useful because it means if we wanted to change the size of the squares later on we could simply change the variable which would save us from having to change each individual value in the code.

Screen Shot 2014-10-10 at 22.34.44

above: example of a basic nested for loop. The x and y variables within the rect function are defines within the for loops.

Screen Shot 2014-10-10 at 22.35.24

This shows the variable called ‘s’ is assigned the value of 10. This means that every part of the code which includes the variable ‘s’ adds the value of 10 pixels.

Screen Shot 2014-10-10 at 23.06.07

and this is the resulting output of the code. The colours randomise at whatever frameRate is defined in the void setup() section.

What we then did next was experiment with randomising the size of each of the squares. We did this by changing the variable ‘s’ to random(10,100); this made the size of the squares change size anywhere in between 10 pixels squared to 100 pixels squared.

Screen Shot 2014-10-26 at 19.45.48

2.3 Rotate and Translate

What we then did was learn how to make shapes rotate. We started from a new document and created a rectangle as we had done before. This time however, we assigned it the variable of ‘rot’ and then used the rotate function to make the rectangle spin.

Screen Shot 2014-10-26 at 21.08.13

Here is the code for the rotation. In the variable named ‘rot’ we have assigned it the number 1 which means ‘add one degree of rotation’.

Screen Shot 2014-10-26 at 21.36.19

Above we can see the result of this code.

As can be seen above, as the rect value has been assigned the x and y coordinates 0,0 it makes the object move off the screen when we rotate it. Changing the x and y coordinates to width/2 and height/2 for the rotated rectangle does not position the shape in the middle of the canvas like it does when we do the same with a standard rectangle. This is because the centre point in which the rotation occurs around remains at 0,0. If we were to do rect(100,100,50,50) it would make a 50 by 50 pixel square which is a 100 pixels away from the centre (which remains at 0,0) at a 100 degree angle. The use of rotate makes the values entered in the parameters output different results. It is easier to show this at work if we make the rectangle move by 1 pixel each frame.

Screen Shot 2014-10-26 at 22.09.20

Moving the rectangle along the x and y coordinates merely pushes it further away from its centre (0,0). This is basically what happens with any other shapes (by adding pixels to x and y axis your just moving a shape away from its ‘centre point’) but it doesn’t matter with a square or a circle because it’s easier to move it to the centre of the canvas.

With rotation we have to use the translate() function if we wish to make the shape rotate around the centre of the canvas. The translate function allows you to ‘reposition’ the (0,0) coordinates anywhere you want on the page. You can see the translate function at work below.

Screen Shot 2014-10-26 at 22.28.52 Screen Shot 2014-10-26 at 22.29.11

Now the rectangles are rotating around the centre instead of the top left corner. This is because of the addition of the translate function as seen above.

2.4 Modulo In Depth

In this workshop we also used modulo. What modulo does is return the remainder of a divided number. So for example if you were to do put 15 % 5 the output would be 0 as 15 divided by 5 is 3 with a remainder of 0. However if you were to 16 % 5 you would get an output of 1 as 16 divided by 5 is 3 with a remainder of 1. The important thing to remember with modulo is that you receive the remainder as opposed to the division.

We experimented with modulo in the workshop to make some groovy shapes, here are some examples of what we did.

Screen Shot 2014-10-26 at 23.15.54

These are a series of variations of what is essentially the same thing. There are differences with each one and I will talk about some of the different techniques that were used below.

Screen Shot 2014-10-26 at 23.52.52

In this example we assigned one of the colours a variable (h) and changed that variable using modulo, as well as the shape you can see that the colour uses modulo also.

One of the things I discovered with using modulo in these particular examples is that there were other ways in which you could do exactly the same thing, here are some examples.

modulo1 modulo2

Here I used modulo to do one thing and in the second example I commented out the modulo and just assigned a number to the float variable called ‘sq’. They basically do the same thing except the colour and size is slightly different.

work

This is another example where I used an if statement instead of using modulo which produces the same effect.

I am yet to understand the significance of modulo in programming but I’m sure there is a reason why you would use modulo instead of just assigning a variable a number or using an if statement etc. Possibly you could use modulo to discover if a number is even or odd and depending on which you could use an if statement or something to make a program do one thing if a number is even and another if a number is odd, but I’m just speculating with that. I wish to understand how modulo works properly in the future as at the moment I am struggling to understand how modulo changes values particularly with the colour of the variable named ‘h’ which I used as an example above.

Design Iterations Seminar #1

Today we were assigned our first project. We were put into groups and the task is to design a poster for an Independent Dorset political campaign. The project is entirely fictional and it is an interesting concept. My group consists of Becky, Tom and Claudia. In our first seminar we were asked to begin to formulate an idea of what we think would be a good strategy for promoting the idea of an independent Dorset. We were asked to consider the audience and how we could get a good message across using images such as in the poster for Scotland’s independence referendum. In two weeks we will be showcasing the final designs in the foyer of Weymouth house. In the “Scotland Be Brave” campaign poster it was pointed out that there is a lot of symbolism of Scottish culture. Firstly, the woman is dressed in traditional Scottish clothes and is holding a traditional Scottish musical instrument. Also the woman has red hair. This suggests that the poster is aimed at people who are hereditarily Scottish or respect Scottish traditions, as red hair is a stereotypical feature of a Scottish person. This makes the target audience for the poster people who can relate to ‘being Scottish’, probably patriotic people who value their countries traditions and who are more likely to vote for an independent Scotland. url-1 However, the fact that the person in the picture is a woman makes the poster suggest that Scotland is a nation that is moving forward as historically the kilt and sporran was typically worn by males. This suggests that although Scotland doesn’t want to forget its heritage they are still progressing and value equal rights and ultimately those who vote for an independent Scotland are voting for progress. The ‘brave’ part of the text also signifies patriotism and reflects the emotions in the film Braveheart, where the main character Mel Gibson depicts Scottish hero William Wallace (the leader of Scotland in the war of independence) who stands up to a powerful enemy (England) and doesn’t back down and doesn’t let go of his values even when he faces death. Braveheart is arguably the most famous film ever made about Scotland. It also relates to Scotland being independent. groundskeeper-willie1 A kilt and sporran and red hair are all typical traits of a traditional Scottish person. The stereotype is even known as far as America, as is shown by the character Groundskeeper Willie in The Simpsons. braveheart-freedom Some of the themes Braveheart explores are freedom, honour, identity and bravery. In the seminar we started to come up with some ideas for our poster. For next week we need to have a rough sketch of our final idea. We wrote down a list of things that relate to Dorset and independence and I have put these into a mind map using processing. Screen Shot 2014-10-30 at 01.26.07

References

Braveheart, 1995. Film. Mel Gibson. USA: Icon Entertainment International.

The Simpsons, 1989. 20th Century Fox Television.

Processing Workshop #1

In our first processing workshop we explored how to setup a basic workspace, how to make different shapes, how to randomise different effects, and how to use get shapes to follow the mouse pointer.

void setup, void draw, and shapes

The first thing we had to do is set up the page. This is important because it allows you to create a custom working space. An example of this is defining the size of the canvas (the space) with which we were working in. We did this by using the size() attribute and then entering the width and height of the canvas with the parenthesis. Processing works in pixels so each number represents a pixel, so “size(500,500);” will create a space with a width and height of 500 pixels.

What we did next was create a shape. We did this in the void draw() section as this is where any code that is to do with content within the canvas will be outputted to the screen. We created a rectangle by using the rect tag. The rect tag had 4 parameters which we had to define to get the shape to be outputted onto the screen. The 4 parameters were position-x, position-y, width and length. Below is a screenshot of the code and the output of that code to the screen.

Screen Shot 2014-10-12 at 18.08.27

Screen Shot 2014-10-12 at 18.07.55

Randomise

We used the random attribute to make a circle change position around the canvas. This was done by using the random function. We created a shape exactly the same way we had done before only this time we set the x axis to random(0,width). this mens that the ellipse can appear anywhere between 0 on the x axis and the entire width of the canvas. The height on the y axis was set to height divided by 2 which meant that the ellipse would appear in the centre of the y axis because the canvas is 500 pixels high and 500 divided by 2 is 250.

Screen Shot 2014-10-12 at 17.50.26

Screen Shot 2014-10-12 at 17.49.22

Lines and mouseX, mouseY

The nest thing we did was experiment with the line attribute. In order to make lines you must define 4 parameters. The first two define the position of the first point of the line and the second two define the position of the second point of the line. So if the size of the workspace is 500 by 500 pixels, and you wanted to draw a diagonal line accross the whole workspace, you would enter the parameters (0,0,500,500). An example of this is shown below.

Screen Shot 2014-10-12 at 19.26.07

The Result of the code.

Screen Shot 2014-10-12 at 19.26.17

What we then did was use the mouse to change the position of the line. This was done by setting the coordinates to mouseX and mouseY. What this did was tell the program to set the first point of the line to the x axis and y axis of the mouse pointer. This resulted in the line tracking the mouse pointer wherever it moves on the page. We then set the second two parameters to random(0,500) which made the second point of the line able to appear anywhere on the 500 by 500 pixel canvas. An example of this is shown below.

Screen Shot 2014-10-12 at 19.18.10

Below is the result of the code. Although it can’t be seen in the screenshot the mouse pointer is in the middle.

mouseymousey