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