So today’s task was to display the pixels from an image onto the screen. This was putting all of the different tasks we had done in the workshops so far together, slightly changing and adding different functions to make it different.
Pixels was the focus, and to to this we started by loading an image into processing and then drawing it onto the canvas. Then, to determine the pixel value, an equation is used (as seen below).
This means that each pixel from an image has its own individual number that refers to each one, using this it allows it to manipulated in different ways so that it can change the way they are displayed on screen. The code that was used to do this was as follows:
In this there is a ‘for’ loop and by loading the pixels from the image the individual pixels can be located. The attributes have been changed meaning that they could move between the lines of the created square which displays the output. By giving the ‘x’ and ‘y’ axis a random number between -30 and 30, it will give the pixels slightly blurry.
I then as an extension from the workshop, to change the code in some way. After a bit of thinking, I decided to change how the pixels loaded, instead of the image already being pixelated when the canvas is loaded, they would appear at the click of the mouse. Below is the result that I got from this:
– Processing.org, 2014. Images and Pixels. Available From: https://processing.org/tutorials/pixels/ [Accessed on: 24 October 2014].