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


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s