Pixel Manipulation

Published October 31, 2017

Using the p5.js image object’s pixel array, I attempted a number of different image manipulations:

reduceColors():  in lieu of a proper “posterize” effect – one which finds a set of color averages from the value and frequency of each color in the image – this function simply maps each pixel’s color to a reduced set of possible colors.

Original Image:


thresholdChange(): this function takes three thresholds (one for each color value) and takes any value above that threshold in each pixel, and bumps it up to 255:

Finally, I made a slightly different version of the pointillism effect from class, using a different method to iterate through the pixels.  As in all of my functions this week, speed became an issue and I began to understand why certain techniques (such as using modulo to spread the load out across multiple frames) allow an animation to run much faster despite the appearance being nearly identical.

Setting up a github workflow:

Finally, I spent some time this week following along with this set of videos and spent some time figuring out how to work locally using the command line tool http-server and store code in github.  While it doesn’t appear much different to me now than Dropbox / Google Drive / etc.,  I imagine once I begin working on more collaborative coding projects, that will change.