So I went a bit off track this week. I wasn’t really sure what to focus on for this week’s assignment, and over the weekend I was talking to a photographer friend of mine who wanted to do some video art of one of his photo series. He has an art book full of giant prints of real estate ladies he’s gotten from newspapers, flyers, and bus benches from around the country, and they’re all super zoomed in so you can see the CMYK printing dots and it’s really beautiful:
Basically imagine that but 2 feet wide. Anyway, so he was talking about wanting a video where the CMYK dots in one face move and morph to become another face, in an infinite loop between all the faces. He said he talked to someone who said they could do it in about six months, and then I piped up and said, “Well, I bet I could do it by Thursday?”
Oh, the hubris.
Before I could even start coding, I realized I needed to completely learn from scratch how CMYK printing even works, something I had no idea about before last week. It was cute how excited I got when I realized the colors were just all on grids set at different angles. It was fun imagining how I would code these arrays to show up at different angles (but less fun actually trying to). I figured I could just replicate the process from the slider sketch last week and just have four arrays for each image fade the values between all of them — little did I know how hard even just getting the values would be.
It’s 2 am and I’ve been working on this for way too long, so here’s the sparknotes of how the process went this week:
Step 1) Take a small part of the picture into photoshop and use the CMYK tool to grab individual images for each color. Here’s the “Y” of the mouth:
Perhaps that might’ve worked had the image not already been printed with the CMYK dots — trying to do this was like filtering it twice. I figured I would be able to read a brightness value of each of these images and just assign them to an array of ellipses for each color, but I couldn’t find a function in p5.js that worked the way I wanted it to, since the array of each image has 4 elements per pixel (r,g,b,a). I think processing itself would be much better for this, but I wanted to stay with p5.js for the sake of the class and the ability to eventually send my friend a website link.
So then I tried learning about all the different pixel functions built into p5.js, finding a bunch of fascinating things about group pixel processing and convolutions, but eventually landing on a page that Dan Shiffman wrote about color. While reading it, I had a sudden realization that I was paying a lot of money to be able to talk to this guy in person, not on a screen, so I quickly scheduled office hours with him for later that day. It was so surreal, it was like I walked into my computer and got one-on-one help from someone who lives in YouTube.
He basically said don’t do it haha. Or rather, that what I wanted to do would be really insanely memory intensive for p5 and javascript didn’t have the best functions for the job or something like that. I don’t remember a whole lot because I was so star-struck. But he did send me a sketch for a “brightness mirror” that took video pixels and turned them into ellipses, and that was enough for me to totally start over with a better grasp on what to do.
So I took a lower-res version of the face and rewrote a sketch with Dan’s sketch in mind, but for some reason getting the pixels to match the canvas took foreverrrrrr. But I ended up with some pretty artsy looking accidents
Then once I finally got it lined up, I tried making individual ellipses for each color, instead of just greyscale:
Then came the biggest brainbender of the week: Converting RGB values into CMYK values….
I like math. I do.
I couldn’t find a pre-existing processing sketch that converted RGB to CMYK, and though I could find online calculators that did so, I really wanted to figure out the math behind it so I could easily replicate it in my code…. Three full pages of equations later, I stopped and realized I was literally trying to figure out how to invent CMYK printing and decided to suck it up and just use a calculator. I ended up having to translate the calculator into p5 variables/functions and whatnot, so I did end up understanding it (more or less). Definitely would have helped to have a better grasp on how CMYK values are actually used (I didn’t know until a good while in that they were percentages and that one would pretty much always be 0….).
So after finally getting the RGB values from the pixel array and feeding them into my expertly crafted conversion loop, I triumphantly pressed play and got this horror-show:
Luckily, I understood enough about the RGB CMYK difference at this point that all I had to do was change the background to white and it fixed it.
So then, with a decent image using my fresh CMYK values, I decided to start getting more into the tricky parts of the process: shifting the arrays at an angle and having them morph into the next image. I figured for both I would probably need the ellipses to be objects instead of static images like they had been, so I tried to make a class and convert all the ellipses in my pixel for loop to objects. That’s when I came across the most beautiful accident in my short career as a creative coder:
That is the distilled essence of a real estate lady, metamorphosed into a happy fly, dancing across the canvas. It’s like a haiku.
I almost cried I was laughing so hard. I really do think it’s beautiful.
So here’s where I gave up for this week. I don’t understand why the loop wont push the new objects into the array — it’ll only do the first loop (four ellipses, aka the fly). I had moved it up to setup because I didn’t want it creating thousands of ellipses every draw, I only wanted the original ellipses and then have them change in draw. So I tested moving it back down to draw and giving it a jitter effect just to see, and it was clearly on the verge of blowing up my computer:
So I just took out the jitter move() and let it loop in draw infinitely. Below you can see where I ended up, I have the different colors offset by an arbitrary x, y (all horizontal), and the picture gets steadily darker as the sketch goes on and keeps drawing the same image over itself.
I really want to figure this out and help my friend, so I want to keep working on it this weekend.
First I have to figure out:
why why why does the loop not push the objects into the array in setup???
how the hell do I get the arrays at an angle??? translate??? go back to the original idea of making the ellipse array first and then mapping the color values to them?
is it even possible to move/morph that many ellipses in p5.js or will it be so slow to be practically useless?
full screen:
https://editor.p5js.org/full/rJv6hM7cX
editor:
https://editor.p5js.org/DeadAugust/sketches/rJv6hM7cX
Sketch (above)
Original (below)
