Inspiration
Chinese movable-type printing follows a grid system strictly. When you look at the printing panel, you can see every character fit in one square behind it, like one pixel on the screen.
Idea Description
I created the first character pixel painting in Illustrator for the first assignment, making a “physical” image using non-traditional “pixels". Although I like the final result, the process of making it was very time-consuming. I adjusted the color of each character manually. So, I started to wonder if there is a way to make this process automatically, and also have a more responsive effect according to mouse or key control.
Left - Café Terrace at Night by Van Gogh, Right - Character Pixel Replication
Process
01 Testing character display and grid system
building the grid system for squares and characters, adjusting pixel size
loading Chinese character font file
02 Adding clicking effect and sound
combining squares and characters, for only the colored characters look too saturated
the painting will start with a bigger pixel size, and gradually become more detailed with mouse clicking
the background music with fade in when the mouse is clicked, and fade out when mouse is released using minim library
03 Adjusting color
to separate the color of square pixels and character pixels, the square pixels, are saturated
square pixel color - (x, y), character pixel color - (x, y+pixelSize)
04 Adjusting character placement
to further enhance the diversity of the pixel, the clicking loops of square pixel and character pixel are separated, creating 12 x 15 possible combinations
Next Step
Adding text input box - users can load whatever image, text, and background music they like to customize their painting
Improve the sound effect when clicking - even with the minim library's shiftGain function, the fade in and fade out doesn't sound very smooth yet.