Genuary Day 1 - Vertical or horizontal lines only.

genuary-day-1-vertical-or-horizontal-lines-only.markdown

Genuary Day 1 - Vertical or horizontal lines only.

A Pen by Monica.dev on CodePen.

License.

script.js

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  frameRate(10);
}

function draw() {
  clear();

  let from = color("#ba1e58");
  let to = color("#b4aaff");

  background(to);

  let stripes = frameCount % 50 || 1;

  for (let x = 0; x < height; x += height / stripes - 1) {
    fill(lerpColor(from, to, x / height));
    rect(0, x, width, height / stripes);
  }
}

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", 15);
  }
  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;
}