Processing Workshop – 4 (Part 1)

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).Jade Lauran Design

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:

Jade Lauran Design

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:

Jade Lauran Design

Jade Lauran Design

References:

– Processing.org, 2014. Images and Pixels. Available From: https://processing.org/tutorials/pixels/ [Accessed on: 24 October 2014].

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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