<!-- <h1>
  ILLUSTRATOR
</h1> -->
<!-- <img src="https://assets.codepen.io/1839803/nse-8925625400457187891-15350.jpg" alt=""> -->
<img src="https://assets.codepen.io/1839803/4.jpg" alt="">
<div class="text">
  <p>I</p>
  <p>DO</p>
</div>

body {
  cursor: none;
  overflow: hidden;
}

img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom left;
  z-index: 0;
  mix-blend-mode: multiply;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

p {
  // color: #ff31ca;
  color: #f5f5f5;

  mix-blend-mode: difference;
  font-family: "Zen Dots", cursive;
  text-align: center;
  font-size: 4.5rem;
}

canvas {
  position: absolute;
  z-index: -1;
}

@media only screen and (min-width: 375px) {
  p {
    font-size: 6rem;
  }
}

@media only screen and (min-width: 414px) {
  p {
    font-size: 7rem;
  }
}

@media only screen and (min-width: 640px) {
  p {
    font-size: 8rem;
  }
}

@media only screen and (min-width: 768px) {
  p {
    font-size: 12rem;
  }
}

@media only screen and (min-width: 1024px) {
  p {
    font-size: 14rem;
  }
}

@media only screen and (min-width: 1280px) {
  p {
    font-size: 16rem;
  }
}

@media only screen and (min-width: 1600px) {
  p {
    font-size: 18rem;
  }
}

const delta = 8.5;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background("#FFF");
  // let p = createP("I AM");
  strokeJoin(BEVEL);
}

function draw() {
  background("#2835FF");

  const calcX = map(mouseX, 0, width, 2, 12);
  const calcY = map(mouseY, 0, height, 2, 12);

  // strokeWeight(calcX + calcY);
  strokeWeight(5);

  for (let i = 0; i < 100; i++) {
    // upper left
    line(
      mouseX - (2 * i + 1) * delta,
      0,
      mouseX - (2 * i + 1) * delta,
      mouseY - (2 * i + 1) * delta
    );
    line(
      0,
      mouseY - (2 * i + 1) * delta,
      mouseX - (2 * i + 1) * delta,
      mouseY - (2 * i + 1) * delta
    );

    // upper right
    line(
      mouseX + (2 * i + 1) * delta,
      0,
      mouseX + (2 * i + 1) * delta,
      mouseY - (2 * i + 1) * delta
    );
    line(
      mouseX + (2 * i + 1) * delta,
      mouseY - (2 * i + 1) * delta,
      width,
      mouseY - (2 * i + 1) * delta
    );

    // bottom right
    line(
      mouseX - (2 * i + 1) * delta,
      height,
      mouseX - (2 * i + 1) * delta,
      mouseY + (2 * i + 1) * delta
    );
    line(
      mouseX - (2 * i + 1) * delta,
      mouseY + (2 * i + 1) * delta,
      0,
      mouseY + (2 * i + 1) * delta
    );

    // bottom left
    line(
      mouseX + (2 * i + 1) * delta,
      height,
      mouseX + (2 * i + 1) * delta,
      mouseY + (2 * i + 1) * delta
    );
    line(
      mouseX + (2 * i + 1) * delta,
      mouseY + (2 * i + 1) * delta,
      width,
      mouseY + (2 * i + 1) * delta
    );
  }
}

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