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].

Advertisements

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].