ICM Week 6 - Spooooky Classes, Objects, and Arrays

In the spirit of Halloween this month, I wanted to explore an idea I've had ever since I saw this example of the atan2() function in P5.Js on the first week of class. The goal this week was to create an array using classes and objects that is not only easy to modify, but is also as efficiently written as possible. To interact with the drawing you can press and hold down the left mouse button to change the scene. Once held, you can move the mouse around to see how the drawing changes. If you reload the page, the pattern changes.

The reason why it works this way is to get around an issue I had earlier in the sketch. I'll explain a little later...

What Worked

I have to say I'm actually a little proud of myself this week. I went from being completely dumbstruck when looking at this new "style" of programming in p5.js to at least understanding the basic structure and syntax of a few simple animations/interaction using classes and objects. I managed to get the rollover function to work in the array after about an hour of tinkering around and failing the first few times. I was trying to construct the boolean operation inside the draw function when I realized it could exist as a function inside of the class. I'm still getting used to this new way of object oriented programming.

This is the heart of what allows the pupils to change color when the mouse is located inside the radius of the pupil

 hoverover(mx,my){
    let d = dist(mx, my, this.x, this.y); //distance between two points
    if (d < this.r) { //radius of pupil
      this.color = 'red';
    } else {
        this.color = 0
      }
  }

The colors are hard-coded now, but if I wanted to more easily change the color, I could pass the colors as parameters through the class and call them as arguments the draw function.

What Didn't Work

I am still for whatever reason hung up on using the mousePressed function. I never get it right the first time and it takes forever for me to get it work. In this sketch I wanted the background to change from white to black when the mouse was pressed and then go back to white when pressed again. Well I got the function to work, but it was drawing the background over the array (which is kind of partially what I want). But when the background went back to black, it was covering all but one instance of the eye. I guess for some reason the mousePressed function was overriding the object array in the setup? I'm still not really sure why it didn't work, but I'll try to work on it some more this week to get it working.

This is what I ended up doing - because I new I could get it working. Big surprise as I did the same thing in my second drawing.

    if (mouseIsPressed) {
    on = true
  } else {
    on = false
  }

  if (on === false) {

    background(255)
    lightbulbOn();
  }

What I Learned

I'm definitely feeling more comfortable with the content we learned this week, but I'm far from feeling comfortable writing classes or objects from scratch without referring to examples of the syntax. And I'm still very slow at understanding how it's working. I've started to generate smaller independent sketches that I can incorporate into my larger sketch as a way for me to understand what's happening in the code a bit better. That has been a big help. I think it's a bit daunting staring at a blank canvas whenever I fire up the p5.js web editor.

My goals are to continue with this sketch and add some object communications code so that the eyes don't overlap each other so much. Ultimately I wanted these eyes to blink, but I couldn't figure out how to create an animation that works randomly in the array, and one that is slow enough. I tried making something using the frame count and modulo operations, but I ended tabling the idea until I could get the eyes spaced apart better.

Happy Halloween!