Week 6 - Ecosystem [DRAFT]

THIS WEEK… I am working on the draft for this class’ Ecosystem project. We’ve been told to design a “self-running” digital environment composed of multiple classes/objects that interact with one another to produce a work that feels alive. There was a video project I made last semester that I have been wanting to expand into a generative piece of sorts, so I believe it is the perfect subject for this project’s guidelines. You can see a screenshot from the video above. I created a graffiti wall that would morph into new configurations every now and again using displacement maps, and I aim for this project to keep that regeneration running indefinitely. Please allow me to bullet point list the concept for this project:

• Every 30 - 45 seconds (haven’t worked out my preference yet), there will be a painter who walks across the canvas and creates a new graffiti wall using images pulled randomly from an array
• Just before he walks on canvas, there will be a “cleaner” who comes by and sprays the wall down. Simultaneously, the graffiti will be dragged off of the canvas

STEP 1 - DISPLACEMENT MAPS

The first thing I wanted to do was test that displacement maps work in p5.js and therefore, I got to searching the web. I found this sketch by @shawnpeters, and it’s an excellent foundation for what I’d like to ultimately build. I am going to modify this code using my own displacement map and assets, and make sure that the paint droop effect I have in mind can work properly. If not, I have a backup idea that involves scaling the images in a particular fashion, however, I think the distortion from a displacement map will ultimately look better.

STEP 2 - SCRATCH THAT

It doesn’t look better! In fact, it definitely looks worse! I’m glad this isn’t just a cope that I have absolutely ZERO understanding of p5’s pixels, especially how to manipulate them according to the displacement map. Here’s a side-by-side comparison: Moving forward with this simple sketch, I am going to try to manipulate a class build that Professor Tusman made with me surrounding my idea. In it, a tiny “painter” comes by and paints on the canvas after 5 seconds. I’m going to Frankenstein some stuff together and get back to you in Step 3.

STEP 3 - ARRAYS CAME FIRST

I spent a lot of time trying to get my large 40 image folder to preload properly. I saw a few suggestions regarding potentially uploading them to a file hosting site, like Google Drive, and I pursued those avenues for quite a while to no avail. Ultimately, the solution I came up with was to create an ugly, super long array of images. Any for loops I tried simply just gave me headaches. I couldn’t figure them out at all. Here’s what this first experiment looks like. Every 5 seconds, 5 random images from the array are drawn onto the canvas to create a new wall of tags. Some end up looking really cool!

STEP 4 - Stopping Here I can’t figure anything else out at the moment. This is all I have currently for this week. No working demo but we’re getting there, sorry.

STEP 5 - UPDATE DURING CLASS Got a good combination sketch running. What I’ve done here is combined the random graffiti wall generation with the image drag code, however, with one fatal flaw. Each time the images are dragged offscreen, they do not keep regenerating from origin.