"Incomplete" Arcade

incomplete-arcade.markdown

"Incomplete" Arcade

A Pen by Monica.dev on CodePen.

License.

index.html

<h1>Arcade Color Palettes</h1>

<h2 id="heading">Click to <span id='refreshIcon' aria-label="refresh">⟳</span> Colors </h2>

<p>Generative Art created by <a href="https://monica.dev">Monica.dev</a> with <a href="https://svgjs.dev/docs/3.0/">SVG.js</a> to submit to
  <a href="https://openprocessing.org/curation/78544/">Incomplete 🍕 #WCCChallenge</a>
</p>

<svg id="frame" viewBox="0 0 1890 1080" />

script.js

const width = 1890; //1920;
const height = 900; // 1080;

// initialize SVG.js
const frame = SVG("#frame");

function drawFrameAndBg(colors) {
  // update the styles for the background and frame based off of the current colors
  document.querySelector("body").style.backgroundColor =
    colors[3].toHex() + "30";
  document.querySelector("body").style.color = colors[1];
  document.getElementById("refreshIcon").style.color = colors[0];
  document.getElementById("frame").style.borderColor = colors[0];
  document.getElementById("frame").style.outlineColor = colors[1];
}

function drawColorKey(colors) {
  for (let color in colors) {
    frame
      .rect(60, 60)
      .move(10 + 80 * color * 0.5, 10)
      .fill(colors[color])
      .radius(30)
      .stroke({ color: "#fff", width: 4 });
  }
}

function drawBlocks(colors) {
  // Generate grid  coordinates
  const xPositions = [];
  const yPositions = [];
  let count = 0;

  while (count < width) {
    xPositions.push(count);
    yPositions.push(count);
    count = count + 90;
  }

  // Get colors for squares in grid and fill them
  for (let xPosition of xPositions) {
    for (let yPosition of yPositions) {
      let gapCutoffs = [180, 270, 360];

      let maxRowWithGaps =
        gapCutoffs[Math.floor(Math.random() * gapCutoffs.length)];

      let hide =
        yPosition <= 90 ||
        (yPosition <= maxRowWithGaps && Math.floor(Math.random() * 10) > 5);

      let color = hide
        ? "#FFF"
        : colors[Math.floor(Math.random() * colors.length)];

      if (yPosition >= 0) {
        frame
          .rect(100, 100)
          .move(xPosition, yPosition)
          .fill(color)
          .opacity(hide ? 1 : 0.8);
      }
    }
  }
}

function generateGrid() {
  // reset frame each time
  frame.clear();

  // select colors for this generation
  const colors = [
    SVG.Color.random("vibrant"),
    SVG.Color.random("vibrant"),
    SVG.Color.random("vibrant"),
    SVG.Color.random("pastel")
  ];

  drawFrameAndBg(colors);
  drawBlocks(colors);
  drawColorKey(colors);
}

// Initial Drawing of Grid

document.addEventListener("DOMContentLoaded", () => {
  generateGrid();
});

// Regneerate Squares
document.querySelector("body").addEventListener("click", (e) => {
  generateGrid();
});

scripts

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

style.css

@import url("https://fonts.googleapis.com/css2?family=Caprasimo&family=Moirai+One&display=swap");

h1 {
  font-family: "Moirai One", cursive;
  font-size: 3em;
  line-height: 1em;
  font-weight: bold;
}
h2 {
  text-transform: uppercase;
  font-size: 1.5em;
}

a {
  color: inherit;
}
body {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  background-color: #fff;
  font-family: "Caprasimo", cursive;
  line-height: 1.2em;
  font-size: 16px;
}

#frame {
  border: 10px solid #fff;
  width: 80%;
  margin: 0 auto;
  outline: 8px solid #fff;
}

#refreshIcon {
  font-size: 1.5em;
}