ICM Week 7: Death Test -- NYT Obituary API

This week I was happy to take a slight detour away from my lovely real estate ladies to approach a related topic:

our eventual demise.

When starting the data/API assignment, I pretty much immediately knew I wanted to work with some form of mortality data, especially after reading the super inspiring article by Jer Thorp where he mentions creating a website that returns the most recent drone strike victims. I had originally planned to work with some sort of actuarial table data similar to a previous project of mine, the Death Watch, but then I was reading the NYT, and I came across the obituary section.

So now we have this, a sketch that lets you check and see if you’re dead:

I just used the NYT API, though I found what appeared to be a super comprehensive API of all obituaries from all around the country that I really wanted to use, but it cost $750 A MONTH!!! what the hell! Can’t a gal just scan the endless horde of the dead for free?

Anyway, getting the API to work was a whole ordeal, but mainly just because the search query stuff took some getting used to. Then it was just tweaking and fine-tuning, adding features like a different response if no obituary showed up or having a different obit come up on subsequent presses.

editor

full screen

Sorry Chunhan! Hope this doesn’t come off menacing haha, was just testing names I didn’t know would come up or not.

ICM Week 6: CMYK Pearly Gates

Okay, so the CMYK saga continues. Really excited about the progress this week, because I finally made some milestone achievements:

• Got all the ladies to the party! Wooooo all fourrrr

• All the sliders!!! We got alpha, we got dot size, we got zoom!

• They loop! Wow! And there’s even a button to get them to stop looping!

It’s exciting because this is essentially what I wanted when I first started: A sketch that took these four portraits and got them to loop back and forth between the images, with the only thing changing being the size of the ellipses in the arrays. The other sliders were just to mess with, to hopefully find the appropriate alpha/dotsize, since that was giving me trouble.

The major issues now (if I dare to keep working on this), are legion:

• How do I get it to run faster without sacrificing image quality?

• How do I increase image quality without actually having a huge image that I have to scan for pixels? Or should I just use near-group pixel processing or whatever that thing is that takes an average of a pixels neighboring matrix?

• What alpha and dot size do I use?!??!?

• How do I zoom without getting that corner distortion? (I suspect the answer will be obvious once I take a fresh look at it, I’m currently sleep deprived and on a lot of dayquil…)

• How do I get the screen to be the right size? I suspect this issue lies within html, which I have very little interest in, unfortunately…

Editor:

https://editor.p5js.org/DeadAugust/sketches/ryCh-OGo7

Full Screen:

https://editor.p5js.org/full/ryCh-OGo7

ICM Week 5: CMYK Purgatory

This week was pretty rough so I didn’t have as much time to work on ICM as I wanted to — and I really mean that, I was super excited all week about my idea, but could only find bits and pieces of time to work on it. So unfortunately this sketch doesn’t fit the assignment yet, and the progress is pretty marginal from the last week to now. Overall though, I’m really happy with how this sketch is turning out, and I really feel like I’ve got a good grasp on the concepts now. I got the rotation issue fixed by pre-rotating the images in processing, I met with Alejandro the resident to clear up my class/object confusion, and I’m really excited to utilize the DOM stuff we’re learning about to add all the sliders to the sketch (stepSize, portraits, alpha, zoom) and a toggle button that pauses or turns on the loop. I’m also excited to test using higher quality base images, since I had originally scaled down to go easy on the rendering, as Dan Shiffman had advised.

Here’s what I have now, and though it doesn’t look all that different at first glance, I’m super proud of the small differences:

Editor:

https://editor.p5js.org/DeadAugust/sketches/HyewFYtcm

Full screen:

https://editor.p5js.org/full/HyewFYtcm

ICM Week 4: CMYK Hell

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:

1. why why why does the loop not push the objects into the array in setup???

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

3. 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)

ICM Week 3: Algorithmic Repetition (in Pairs!)

This week was really interesting! I’ve only collaborated on code once or twice in the past, so I didn’t really know what to expect from the process. I got really lucky and paired up with a visuals-minded person, since that’s not one of my strong suits at all. So it was really cool that Raaziq could come up with the look of it while I could focus on what I wanted to — the interactivity and puzzle aspect.

When we first met up, we didn’t really know where to go — I had been toying with some webcam stuff but had no idea how to introduce a satisfying element of “algorithmic repetition”. I expressed some disinterest in some of the examples from the syllabus, where it seemed like just a bunch of repeating squares with slightly different scribbles and no interaction. I tend to want things to be able to be played with, and we weren’t sure how to apply algorithmic repetition to that process without it just ending up some sort of paint tool or generative canvas. I can’t remember how we landed on this, but we ended up getting excited by the idea of a puzzle the user would have to solve by moving different images around to “put back together” a landscape that was randomly set up. Not exactly a whole lot of algorithmic repetition, but we snuck that in later, so whatever. So Raaziq said he would draft up a landscape with some flowers, and I went to work trying to figure out sliders:

This was my first attempt at a slider, and I was pretty excited to get it to work. I had used the map() function in other projects, but never attached to a web page based input, so it took a little bit of brain-bending to understand exactly what I needed to do. Then when Raaziq sent over the flowers, I went to town trying to figure out how a slider could move all of those pieces simultaneously, without a shit ton of repetitive code. That’s when things got really exciting, because I finally got to learn about…. classes and objects!!! Classes and objects have always eluded me, always being able to laboriously side-step them in previous projects since I never fully understood them. So when I jumped ahead a week to watch all the coding train videos on objects and arrays, it was like the veil being lifted from my eyes (is that the right expression? or is that me getting married? or the apocalypse?). The rest of that day was a gleeful frenzy of trial and error as I converted Raaziqs petals into var petal = new Petal (). I was pleasantly surprised by how intuitively some of the stuff came to me. I feel like in the past, with big coding concepts like this, I would spend hours trying to wrap my head around something, but with this I guess I had enough of the building blocks down that I could adapt to the new system with only a few hiccups. For example, in the code when I was trying to get the sliders to move the petals, I initially thought I would be able to just use an “object variable” in place of a variable that would be updated every time the slider would move:

so instead of — rectX = mouseX;

I thought it would be something like —- petals.this.x = mouseX;

which obviously didn’t work. But then, instead of bashing my head against the keyboard for an hour, I immediately (and almost non-intellectually, like I just felt it calling to me) knew I had to instead create a .move() function in the class Petal, that would then be called in the slider function instead.

So I had a lot of fun, and by the end of the day, had this:

The next day when Raaziq and I met up, we felt pretty good with the simple sketch and I went over how I did the sliders and objects. We decided we could add a little more to it, so we added the cloud slider (controlling the cloud haze effect from the coding train videos), changed the image variables into ones that would scale with the window, gave labels to the sliders since we didn’t have time to make actual bugs or birds, and added a win condition that would trigger if the image was put all the way back together. Overall, had a lot of fun with this, and really excited to see where we’ll go from here.

Code:
https://editor.p5js.org/DeadAugust/sketches/BkdnXedYX

Fullscreen:

https://editor.p5js.org/full/BkdnXedYX

ICM Week 2: Random Tests

So this week was kind of a bust; I had a grandiose idea that I was really excited about, but didn’t give myself enough time to figure out how to do it. I wanted to craft a sketch that would start as a blank canvas with a randomly generated color as the background, and then with each mouse click, a shape would appear and start moving across the screen. However, I wanted each of the shapes to be an element of another classmate’s portrait from last week, and for them to accelerate to a specific section of the canvas where they would reassemble into their original portrait. The end result hopefully being, if you clicked enough times, eventually all the portraits would be laid out next to each other. I also hoped to have the shapes accelerate on a rate based on the frameRate(), so that the longer it played the quicker they would move.

Obviously I started by trying to scale down the idea and start with just 4 (or even 1). The big hurdle that I ran into, which is a recurring problem from last week, was I didn’t know how to represent a list of “lines” (i.e. an array where each element is another shape like “ellipse(50,50,50,50);”). I played around with some array functions, but I don’t think I know enough about the parameters of arrays to make it work. I then realized I could probably do something similar with objects, but I didn’t have time to read or watch the videos on that to figure out how they work.

I feel like an issue I might have in this class is wanting to bite off more than I can chew, rather than keeping it simple and working on the specific concepts each week…. Anyway, so I went back to the drawing board and just did the bare minimum:

https://editor.p5js.org/DeadAugust/sketches/S1kcFNWKm

One cool thing that happened though was I accidentally signed into a p5.js editor account I didn’t remember I had, from a day-long workshop I took in creative coding in L.A. last year. (Which happened to be the exact day I decided to apply to ITP, coincidentally…). And I found this cool webcam sketch, but I don’t remember who to credit for it, just the name of the workshop. So I tweaked it a little to make it fit this week’s assignment:

(screenshot is dark because I was working from bed at 2am)

https://editor.p5js.org/DeadAugust/sketches/BJLPq3eYX

ICM Week 1: d20 Simulator!

This was SO MUCH FUN!! I’ve never used processing to display visuals on a computer screen, so all the shape stuff was very new and exciting to work with. I originally wanted to do some sort of animation with the 1 and 20, and to have arms and legs for the diceboy, but ran into a lot of issues that were just out of my depth at this point. Definitely went about a lot of this backwards; I feel like the whole code could’ve been 70% shorter. Major speedbumps I had:

— how to draw an icosahedron when I don’t know fancy maths? (I ended up just eyeballing a lot of it and basing it from the center of the canvas so it would naturally adjust to variable canvas sizes)

—is there a way to have a variable canvas size based on the user’s screen?
— how to draw arms and legs? I couldn’t seem to figure out how to draw an ellipse() at an angle, tried messing with the 5th variable value, but nothing seemed to work.

— how to simplify the loop? I tried defining a couple arrays to hold the d20 values and their corresponding colors, but I’m not terribly familiar with processing or javascript, so couldn’t figure out why something like this wouldn’t work:

var d20color = [(255, 0, 0), (255. 255, 0), (0, 0, 255)];

background(d20color[2]);

— is there an easier way to define variables by the width and height without having to declare them in each local function? I was hoping to just define them at the top like with var d, but then realized they didn’t have the width or height yet because those would have been declared after, in setup().

— when testing this on mobile, i had to be really quick and deliberate with my presses, or else it would register two presses. I figured some sort of debounce was built-in, but confused now.

It’s interesting to try and answer the question as to how computation applies to my interests…. I guess it’s hard because that first requires me to narrow down my interests… I think I’ll shoot for low-hanging fruit on this one since it’s past midnight and I still have another class’ worth of homework to do — I’m into games. If it wasn’t obvious by now, I love Dungeons and Dragons — I had my dice on me in class because some Thursday nights I’m a dungeon master for hire. So when searching for inspiration for this assignment, I took the Math.random d20 example from class and ran with it. Learning more programming excites me because I’ll be able to rapidly expand my toolset for building interactive experiences, including developing code for some live games that I want to have digital elements. Overall, excited to have this proof of concept, and eager to look back on my clunky code in a few months with leagues more wisdom (+4 WIS?). Too bad it’s too clunky to be worth actually implementing at the table, but fun nonetheless.

May you always roll 20’s,
August

code at the p5.js web editor and github:

https://editor.p5js.org/DeadAugust/sketches/SyJVKR8dm

https://github.com/DeadAugust/ITP-ICM/blob/master/d20boy