top of page
Writer's pictureAlina Liu

PXP: Pixel Painting with Chinese Character




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

  1. Adding text input box - users can load whatever image, text, and background music they like to customize their painting

  2. 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.

14 views0 comments

Recent Posts

See All

ความคิดเห็น


Post: Blog2_Post
bottom of page