Hitting The Wall

I was really banging my head up against the wall in a lot of ways this week. I feel like my brain is not putting the pieces together in a cohesive and methodical way.

The Donut Maker

Donut Maker w Sprinkles //
fullscreen sketch and code editor

I was able to add a slider to one of my previous sketches and get it to do some cool stuff. When I wanted to make 7 different sliders, I was able to do so using a FOR loop. But I realized that I would need different variables for each of the 7 sliders’ output values, which I did not know how to do from inside a FOR loop. I had in mind to make a bunch of interesting parameters move, a lot of which I marked in my sketch, but was unable to get to.

Here is my sketch in Code Editor and full screen mode for the Donut Maker.

sound.play(); error - Click HERE to see the sketch.

However, the most curious thing was my inability to load an mp3 file. I added it to my assets, but even though I checked my syntax repeatedly, I was kept getting the following error message >>>


As for Quiz 3…

For the quiz, I came up on a few snags in the logic. Questions 1 and 2 were clear to me. For question 3 though, I was able to change the behavior so that if you click the mouse when you’re inside one of the rectangles, it changes the background of that area to red and keeps it red until you mouse over it again.

Then I tried to make the third rectangle turn red and stay red on hover if clicked, instead of turning blue on hover. If I clicked the mouse again, the red hover color would toggle back to blue. I successfully did this like so:

if (redToggle == true) {
        rect3ColorHover = red;
      } else if (redToggle == false) {
        rect3ColorHover = blue;
      }

So I then wanted to make it so I could toggle all the squares to red if I wanted so I did this:

 if (rect1Check == true && redToggle == true) {
    rect1ColorHover = red;
  } else {
    rect1ColorHover = green;
  }
  if (rect2Check == true && redToggle == true) {
    rect2ColorHover = red;
  } else {
    rect2ColorHover = yellow;
  }
  if (rect3Check == true && redToggle == true) {
    rect3ColorHover = red;
  } else {
    rect3ColorHover = blue;
  }

Then I thought that I wanted to switch each rectangle’s hover color to red, toggling each independently. I worked on this for a while, but realized I’d need a boolean expression for each rect and not one global redToggle / turnRed setup.

BUT!! Then I re-read the question and realized that this was not what Question 3 was asking, although I did get a lot out of trying the last bit. Question 3 says that you need to toggle the square red when you click the mouse and leave it that way, using the function mouseClicked() presumably, and then when you hover over it again, it turns back to the hover color. I had no idea how to go about this.

The questions following #3 were pretty straightforward to me, so I got most all of them all to work except for question #7 where I kept getting this:

https://editor.p5js.org/billythemusical/sketches/SyDERoHK7

https://editor.p5js.org/billythemusical/sketches/BkxWAsBYm

I finally peaked at someone else’s sketch and found that I wasn’t using the modulus quite right. I had already tried to add the two For loops “i” and “j” values and evaluate them (i + j) % 2 > 0 to see if they were positive or negative, it’s just that I didn’t draw a rectangle in each of the the if statements.

On The Partner Assignment

Elvin and I spent a long while trying to figure out how Timothy had made those googly eyes in his sketch. We went down a long rabbit hole of sin,cos,tan, and atan which was all honestly over my head. We tried to apply those concepts to a sketch Elvin had made, which was rather hard because when you are reading someone else’s code, it’s like looking into someone’s brain in a very specific way. It was very hard for me to get in line with what he was up to, especially since he was just experimenting incrementally the with a lot of what he came up with.

After about an hour of getting no where, we gave up and tried a new idea Elvin had sketched out in his notebook which was to instantiate 3 separate clusters of 5 dots and have them follow mouseX/Y, but stay inside an invisible boundary ellipse. If mouseX/Y got outside of the boundary ellipse, the clusters would still follow the mouse while staying within and at the edge of the boundary ellipse, as well as retaining the relative position of each individual dot in each cluster.

So we broke it up into sections, where Elvin was going to code the boundary ellipse and the governing rules for movement. He made a simple inner ellipse to test the values. His progress can be seen HERE. We had the idea to use the dist() function value, but we were only able to get so far with that, as we were still using constrain() as well. You will see the functionality is busted a bit.

I was trying to design the clusters, giving each instance of a cluster a randomized smattering of dots. But each time I tried, either making a Cluster class or a Dots class, I was unable to get a randomized pattern of dots for each instance of a cluster. HERE is where I got to as well as a few previous revisions (1 & 2).