BUBBLE POP interactive grid

bubble-pop-interactive-grid.markdown

BUBBLE POP interactive grid

A Pen by Monica.dev on CodePen.

License.

index.html

<!-- Grid Practice - colorful - circles + squares + p5logo - alt palette - state array -interactive - compute tile -->

script.js

let mouseOverX, mouseOverY;

const colors = ["#574ae2ff", "#222a68ff", "#654597ff"];
let state = [];
let img;
let spacer;
// Load the image.
function preload() {
  img = loadImage("https://assets.codepen.io/209274/P5.js_icon.png");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  //frameRate(1);
  /* moves ellipse into the grid */
  ellipseMode(CORNER);
  // background("#2b2135");
  background("#fcf7f8ff");
  fill("#fbf4ff");
  textStyle(BOLD);
  textSize(50);
  noStroke();
  spacer = width / 20;
  for (let x = 0; x < width; x += spacer) {
    state[x] = [];
    for (let y = 0; y < height; y += spacer) {
      state[x][y] = random([true, false]);
    }
  }
}
function getClosestXY(mouseX, mouseY) {
  const subX = mouseX % spacer;
  const subY = mouseY % spacer;

  return { closestX: mouseX - subX, closestY: mouseY - subY };
}
function draw() {
  clear(); // clear canvas of elements from previous draw

  background("#fcf7f8ff");

  //   text("✨", mouseX, mouseY);

  //   textAlign(CENTER, CENTER);
  //   text("P5⁎js Starter Template", width / 2, height / 2);

  let sqColor = colors[0]; //random(colors);
  //let spacer = width / 16;
  // stroke("red");
  //console.log(state);

  for (let x = 0; x < width; x += spacer) {
    for (let y = 0; y < height; y += spacer) {
      let { closestX, closestY } = getClosestXY(mouseX, mouseY);

      if (closestX == x && closestY == y) {
        //fill("#00FF00");
        //fill(random(colors));
        fill(colors[1]);
      } else {
        fill(sqColor);
      } /*else {
        fill("#F1F1F1");
      }*/
      //fill(random(colors));

      if (state[x][y]) {
        //  fill(sqColor);
        stroke(sqColor);
        square(x, y, spacer);
        noStroke();
        //}
        //else if (state[x][y] == 2) {
        // image(img, x, y, spacer, spacer);
      } else {
        circle(x, y, spacer);
      }
    }
  }
}

function mouseReleased() {
  //  int(round(mouseX) / spacer) == int(x / spacer) &&
  //       int(round(mouseY) / spacer) == int(y / spacer)
  // state[mouseX][mouseY] = !state[mouseX][mouseY]
  //ideally switch to opposite shape state here for the currently selected tile

  let { closestX, closestY } = getClosestXY(mouseX, mouseY);
  state[closestX][closestY] = !state[closestX][closestY];
}
function keyPressed() {
  const SPACEBAR = " ";
  // pause/play animation when spacebar is pressed for sketches that animate from draw to draw
  if (key == SPACEBAR) {
    isLooping() ? noLoop() : loop();
  }

  if (key === "g") {
    saveGif("canvas", 10);
  }
  if (key === "s") {
    saveCanvas("canvas");
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>

style.css

canvas {
  /* center canvas in middle of page */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 50%;
  text-align: center;
}