This week we were asked to pick a palette of our own for the Visual Language class, and try to use functions and objects to draw a sketch with P5.js. I combined my works of both and made an image editor that can assign a 5-color palette to any given image. To begin with, I’ll start with the palette I’ve chosen.
Now that I have a palette, I would need an image editor to help me automatically transform photographs I love into this anti-classic theme. So I made my own editor to do the works.
P5 Image Editor
The idea of this editor is basically to compare the source image’s color, pixel by pixel, to each color in the palette. The color distance algorithms can be used to determine which palette color is “closest” to a given image color. After that, the editor will replace the color of a source image’s pixel with its closest color in the palette. Tow color distance calculation algorithms are used in my editor – Euclidean, and CIE76. Here is the URL to my editor: YG’s 5-Color Palette Image Editor.
Here are the final six compositions of my palette. They are famous graffiti walls I visited in six different cities across the world: Guangzhou, Hongkong, Shanghai, Beijing, Penang, and New York.
—- “Paletted Walls” —-
Added a bonus yellow: