In a workshop a few weeks ago (only getting around to writing about it) we learned how to import and use images in processing, a welcome change to using the basic shapes we started with. My first attempt playing around with images was experimenting with a for loop to get the image to shrink in each iteration of the loop. The hight and width of the image are divided by the i number as it increases in the for loop, i.e. 1/1, 1/2, 1/3 etc. to make the image shrink. To get the image to stay in the bottom corner, the Y-coordinate uses an alteration of the same number to make sure it changes at the same time.
In the workshop we did some stuff that was a bit more advanced. The basic principle of what we did was reading the colour for each pixel of the image, and then using that data to colour in a grid to create a pixelated version of the same image. In order to grab the colour from the pixels, we needed to know where that pixel was in the image. To do this we calculated a 1 dimensional coordinate to associate a number with the pixels in a 2 dimensional image.
Location = x + y*width
Below is the code used to create the image. When drawing the image, the x and y coordinates have a random value between 0-5 added on to is, so to add a shimmering effect to the image. When the mouse is pressed, the image is swapped with another one on top of it, to show how it is possible to have more than one image in processing. We also added text to the sketch which is swapped alongside the image.