Experimenting With Processing

In order to be able to advance my coding knowledge in processing, it is important that I fully understand all the basics that we have explored in previous workshop. However, as I didn’t feel entirely confident in my understanding, I have been watching lots of Daniel Shiffmans’ videos. Focussing on the skills I need to produce my idea, I further explored object-orientated programming. I felt that the knowledge I gained from the workshop was sufficient but felt I didn’t fully understand it. In specific, I looked at videos that taught me about classes, what they are and how to create them. As well as looking at arrays, what they are and how to use them, whether it be for 3, 100, or infinity amount of objects. From watching the videos I feel my understanding of object-orientated programming has developed, and I used this knowledge to produce a piece, that consists of 3 classes (circles, squares and rectangles), which continuously gravitating towards the bottom of the sketch. I produced an array of each class and set it so a certain amount of each shape appears. I also randomised the size of each so you get lots of gravitating shapes of different sizes. As well as setting up an if statement so that when the objects reach the bottom of the sketch, they start descending from the top again. Here is the outcome:

By carrying out more research on processing, I have been able to develop my skills and become more familiar with object-orientated programming. Classes are a template for an object, consisting of unique data and functionality, and an array is a list of data. What I learnt and have produced will be useful towards my final interactive piece. Next, I will further research video capturing, motion and thresholding.

Shiffman, D, 2014. Vimeo – Shiffman’s Videos [online]. Available from: http://vimeo.com/shiffman/videos/ [Accessed 24 November 2014].

Processing Workshop – Vectors

In todays workshop, we learnt about Vectors. A vector has both a magnitude and direction, and represents the movement from one location to another. In processing PVector is used to describe the position and velocity (the speed of movement). Within the PVector class there are multiple different methods, the methods we used were add(), mult(), get() and sub (). Here is the code…

Screen Shot 2014-11-17 at 11.50.30

This code created a bouncing ball, which moves direction dependant on the mouses location. I can edit the velocity methods in order to speed up/slow down the balls movement. In order to ensure the ball stays within the sketch, I had to use existing knowledge of conditional statements, to set it so the ball reverses direction when it reaches the width/height of the sketch size. It was important to learn about vectors as if I want anything to move within my interactive piece, this knowledge will be required. From this workshop, an idea that I developed for my interactive piece is to have a ball that gravitates to the bottom of the screen. When people move into the camera, they can then obstruct the ball from falling and can interact by hitting it in different directions. The concept that this could apply to is audiences and ideas relating to audience passivity to activity. I am going to watch some processing tutorials in order to ensure that I fully understand vectors and movement within processing, as this is something I am interested in exploring further.

Processing (2014). Processing: PVector [online]. Available from: https://processing.org/reference/PVector.html  [Accessed 14 November 2014].

Processing – Experimenting with Images

Throughout Reading Week, I have been experimenting with processing and have been looking at several different processing examples. This has enabled me to gain more ideas for my piece and possible concepts that I can explore. I have edited the examples used and will briefly analyse each one to explain how I could possibly make it interactive within the public space.

  • Image Layering (Transparency)

Screen Shot 2014-11-04 at 19.09.55

This idea relates back to the previous post about Palimpsest, and the idea of layers. In the above example, I loaded 3 images onto processing and altered their opacity so you can still see all 3 images layered upon one another. I could make this idea interactive as I could set it so every few minutes, the camera takes an image of the public space, the images are then layered on top of one another, with the opacity reduced so that previous images are still visible. This idea could relate to the concept of representation, as the layers of images blur what each image represents as it kind of merges the images together. Also, different people depending on when they are in Weymouth House would see different layered images on the displays and individuals may interpret the displays differently. Some may notice the past images whereas others may not, hence the representation of the piece will be open to arbitrary decodings.

  • Image Pixel Distortionoutput_TbebgC

This idea comes from one of the processing examples – Explode – The mouses horizontal location controls the breaking apart of image and maps pixels from a 2D image into 3D space. I could make this idea interactive as each time someone walks past the camera, the pixels could move, hence the busier the public space is, the more distorted the image will become.

  • Pointillism

Screen Shot 2014-11-04 at 19.28.24

This idea comes from another processing example – Pointillism – The mouses horizontal location controls size of dots and it creates a simple pointillist effect using ellipses coloured according to pixels in an image. I experimented with editing the coScreen Shot 2014-11-04 at 19.29.40de so that it used rectangles instead of ellipses, thus creating a different effect. To make this idea interactive within the public space, I could set it so it captures an image of Weymouth House and then each time someone walks past the camera a certain number of pixel ellipses/rectangles appear.

From looking at examples, I may decide to do something that relates to the concept of representation, and the idea of how contemporary audience decode multiple different meanings and messages from pieces. I would definitely like to make it interactive by basing it around motion and movement within the public space. From this, I need to decide what images to possibly use or whether to base it on video capturing. Next, I am going to look at some video capture examples to help me develop my ideas and experiment further with processing by learning more about how to capture videos and track motion within a public space.

Processing Workshop – Object Orientated Programming

Today, we learnt about object orientated programming. We learnt how to create and use classes within processing. A class  is a blueprint that allows us to create an object. Within a class, it needs to contain class data, constructor and class methods. The class data is unique to each class, and within this you have to declare the variables of the particular class that you are working on. The constructor is where you assign the variables to the class. Class methods are the interface of data, and these functions are shared. In the workshop, I created a class named ‘Agent’, that consisted of data, constructor and methods and a draw function of a square. I then incorporated the class into the main tab by using an ArrayList. An array is a block of data and an arraylist is a block of object data. I set up the basic void setup and void draw and incapsulated the class ‘Agent’ into these. I also used existed knowledge of mousePressed and mouseX mouseY, so that each time the mouse is click it creates a new agent(square). Here is the code…

Screen Shot 2014-11-03 at 12.32.06 Screen Shot 2014-11-03 at 12.32.57

Here is the outcome…

output_7t07FN

From this workshop, not only did I Iearn new skills regarding classes, I also developed my existing knowledge from previous workshops, about integers and floats, variables, for loops, arrays, mousePressed and random functions. We also briefly explored how we could convert images to agents in order to create some interesting motion effects to the image pixels. Using for loops, it iterates through the images pixel array to create an agent for each pixel, and by altering the class update methods, the motion of the pixels changes. To convert the image pixels to agents, I had to use previous knowledge from Workshop 4, in order to obtain the 2d array of pixels, using a nested for loop and the formula x+(y*width).  Here is the outcome…

output_L4wFLq

When the mouse is pressed on the image, the agents(pixels) are updated, and in this instance they move randomly in a brownian motion. I would like to learn more about this and experiment with some different motions. Representation is a a possible concept I could explore for my final interactive piece, of which this could relate to as the moving agents blur the images representation. Next, I am going to look at some processing examples, in order to help me to further my understanding of processing and also to help gain more ideas for my interactive piece.

Processing Workshop – Images

Today, I learnt how to add images into processing, and how to scale and tint them. To begin, I learnt the basic of how to add images to the sketch and load it. I used existed knowledge of mouseX, mouseY so that the image followed the mouse around the screen and I applied a blue tint to the image…

Screen Shot 2014-10-29 at 14.06.11

I then learnt about image pixels and how to use them in two dimensional as pixels are normal stored in a one dimensional linear sequence. I used the Processing tutorial in order to understand how pixels work and this diagram is particularly useful.

pixelarray2dTo get the pixels of my image, first I had to load the pixels. Then, I had to set up a nested for loop of so that it will continuously loop through all the pixels. I then had to use the formula x+(y*width) to calculate the one dimension locations from a two dimension grid and colour each pixel according to the image. I set the size of the pixels as an integer so I can easily change the value of ‘s’ and the pixels size will change.

Screen Shot 2014-10-29 at 14.59.48

I loaded another image into the sketch and used a conditional statement so that when the mouse pressed, the image changes. I also made the pixels shake by using the random() feature. I added text to each the images, of which I set the fill colour and positioning.

output_PbbFAX

Gaining this knowledge of pixel was useful and it is something I could incorporate into my piece. The use of text is also a good skill and something that I would possibly like to explore further.

Processing (2014). Processing: Images And Pixels [online]. Available from: https://processing.org/tutorials/pixels/ [Accessed 24 October 2014].

Processing Workshop – Functions and Arrays

In todays workshop, I developed my processing skills and learnt about functions and colour arrays. Here is a video of what I made

Screen Shot 2014-10-27 at 14.48.23I learnt how to draw basic shapes, in this case a square an triangle in order to make the house. I then used existed knowledge of for loops and rotation in order to made the houses and ellipses rotate. I learnt how to setup an array of colours, which I did using different hex values. As well as well learning about using functions and arguments, in this case the house was the function and the arguments were the sizes and colours. I also learnt how to make the video so I clearly show on the blog what I have designed in processing.

output_qer8gM

This workshop was useful as it allowed me to develop my processing knowledge. The use of arrays is particularly useful as if I want to create an array of colours/objects for my piece then this skill will be required.