Hello 🙂

I’m very exited to show you what I learned about pixels last week, so let’s dive in. At first it was important to know how to access all the pixels of the drawing window or of an image one wants to use, because it’s a crucial part of manipulating the pixels later on. In order to make it possible to draw or show an image, Processing stores every pixels current state in the pixels array. Depending on the size of the window or picture, there is the current value of every pixel from number 0 up to whatever number of pixels it is. Processing counts pixels from the top left corner to the right till the edge and continues in the next line. If you want to manipulate a picture from your computer, you have to load not only the picture but you need to tell Processing that you want to get access to the pixels of the pixels array by loading them with the loadPixels() function. Now you have set up a variable to get access to every pixel by their x,y position instead of the integer from the pixels array because only with doing so you can work practical in Processing with the pixels. After doing this the fun begins, because now you can start to program your own pixel manipulators.

Here are a view simple examples:

I hope these pictures will inspire you as well as show you a little bit of what’s possible by accessing the pixel array. Maybe now you think that you can do all this in an image processing app, which is absolutely correct but bye programming these kind of effects yourself you can create ways to manipulate pictures exactly to your needs and get beyond of what’s possible in buyable apps.

That’s all for now. Thanks for reading till the end and have a nice time until next week.