Week 2 – For loops

Concept
I am continuing the story of Dexter. I tried to incorporate as many things as we learned this week, including for loops, width/2, the mouseIsPressed function, and oscillations using the random function. What the audience sees is unstable because the varying sizes of circles are constantly changing, representing chaos when Dexter Morgan is not himself but is controlled by his inner devil, which he calls the Dark Passenger. The blood slide at the top represents him in this state, showing that he is currently in Bay Harbor Butcher mode. The frameRate is set higher to emphasize how stressed and uncontrollable he is at this point.

By pressing the button, the audience sees calm Dexter Morgan, an ordinary husband with golden wings that symbolize how kind and loving he actually is in real life when the Dark Passenger is absent. He appears more stable, with the random function set to produce smaller differences in circle sizes, and the frameRate is lower to represent that. White represents his good nature, while red represents his killings and dark side..

Highlight of the code I am proud of

if (mouseIsPressed) {
      frameRate(5);
      if(mouseX <= width/2){
      textSize(32);
      fill('rgb(255,255,255)');
      stroke(0);
      text('Dexter Morgan', mouseX, mouseY);
    }
      for (let x = 0; x <= width-460; x += 50) {
        for (let y = 100; y <= height-100; y += 50) {
      fill ('gold');
      randomNumber = random(30, 40);
      rect(x, y, randomNumber);

else {
    frameRate(30);
    if(mouseX <= width/2){
      textSize(32);
      fill('red');
      stroke(0);
      text('Bay Harbor Butcher', mouseX, mouseY);
    }
  // blood
    fill(255, 255, 255, 90);
    rect(225,10,150,80);
    fill('#AC153A');
    circle(300,50,50);
    
    for (let x = 120; x <= width-120; x += 50) {
      for (let y = 350; y <= height; y += 50) {
    fill ('red');
    randomNumber = random(40, 80);
    circle(x, y, randomNumber);}}

I would say I made good use of if and else statements. I wanted the user to press a button to see Dexter’s good side, and when not pressing anything, they would see his dark side. By adding an if (mouseIsPressed) statement along with an else, I was able to make my concept work. Otherwise, I didn’t use else statement, initially, and only had if mouseIsPressed. So, those to visualizations of white & gold overlapped with red.

Sketch

Reflection
I believe Dexter’s unstable character could be developed further. For example, I’d like to incorporate another mouseIsPressed command into his evil character, so that when pressing more, the circles’ oscillations would become faster and grow larger and larger. However, to achieve this, I need to make sure that two mouseIsPressed commands don’t overlap, so I need to come up with a creative solution.