mouse click SCREEN PRINTING
This interactive piece can help demonstrate the screen printing process and emulate the randomness that goes into making a unique test print. Test prints are one of a kind prints created from many layers of different print jobs and can sometimes take years to ‘finish.’ Figuring out the mouse click interaction was crucial to emulate the print making effect that I was aiming for. The user can click over and over in one spot to make a 'print' or the user can click randomly all over to fill the entire screen with a unique 'test print.’
CONTEXT: MCAD EXPERIMENTAL INTERACTION CLASS
MEDIUM: DIGITAL
TOOLS: VS CODE, GITHUB, P5.JS, PHOTOSHOP
RESEARCH METHODS: GOOGLE, COLLEAGUES
I would like to show the layers that make up a multi-colored screen print using the mouse for interaction. I screen print my work by hand and love the surprises encountered in the printmaking process. Due to the pandemic and working through grad school, printmaking has taken a back seat in my practice. I really miss it and I hope to get back in the studio soon. In the meantime, I hope this little digital interaction piece will glimmer as a happy reminder.
(Open with Chrome)
ONE POINT INTERACTION
I initially envisioned showing how separate color layers build to make a final screen print. I screen print by hand so I typically only use two or three ink colors on a print. When I started playing with this concept as code, three images didn’t quite have the impact that I imagined. I love that our instructor Calee brought up test prints because they are my favorite happy accidents that I make in the studio. With the test print concept, a user can print anywhere on the screen while making one-of-a-kind unique print combinations.
First Draft
I used design thinking to ideate what kind of glimmer I could translate to creative code. Using an iterative process, I built several prototypes to work through my concept. Incorporating feedback and shared tutorials, I worked to make code and the concept work with my own style. Finally, user testing helped to complete the polishing touches. I intentionally made the headline a little off centered and misaligned to mimic the misalignment in physical test prints and the headline gets intentionally camouflaged when the user makes an all over ‘test print.’
DESign thinking
If I were to do this project differently, I may choose to make multiple arrays for each color (ie. array for yellow, array for cyan, array for magenta). I think doing this could be a way to add a tint only to certain colors to make them more transparent. In this version, I used a random index with 15 images (20 images seemed too many and 10 maybe not quite enough). I saved my images as transparent png files so they looked enough like authentic screen print layers as far as I was concerned. I did add a couple other interactions (beyond the one point interaction): ’s’ for screenshot and ‘c’ for clear screen. I think these could be useful for future iterations of this project.
