GENUARY 6 | Make a landscape using only primitive shapes. outlines

genuary-6-make-a-landscape-using-only-primitive-shapes-outlines.markdown

GENUARY 6 | Make a landscape using only primitive shapes. outlines

A Pen by Monica.dev on CodePen.

License.

script.js

let spacing = 20;

function setup() {
  createCanvas(windowWidth, windowHeight);

  background("#2b2135");
  fill("#FFF");
  textStyle(BOLD);
  textSize(50);
  frameRate(5);
}

function drawNoiseLine(count) {
  let noiseLevel = random(75, 150);
  let noiseScale = random(0.002, 0.02);

  const dark = color("#ffc6ff");
  const light = color("#ba1e58");

  let strokeColor = lerpColor(light, dark, map(count, 0, height, 0, 1));

  for (let x = 0; x < width; x += 1) {
    // Scale the input coordinates.
    let nx = noiseScale * x;
    let nt = noiseScale * frameCount;

    // Compute the noise value.
    let y = noiseLevel * noise(nx, nt) + count + spacing * 6;

    strokeWeight(map(count, 0, height, 0.5, 2.5));
    stroke(strokeColor);

    point(x, y);
  }
}
function draw() {
  background("#2b2135");
  // noLoop();

  // Set the noise level and scale.
  let count = 0;

  let ringDark = color("red");
  let ringLight = color("orange");
  // stroke("orange");

  noFill();

  strokeWeight(1);
  let ring = 0;

  const dark = color("#ffc6ff");
  const light = color("#ba1e58");

  stroke(light);
  //  let xRingOffset = map(random(), 0, 1, 2, 10);
  let xRingOffset = map(frameCount % 10, 0, 10, 2, 10);
  let max = frameCount < 10 ? map(frameCount % 10, 0, 10, 1, 6.5) : 6.5;

  while (ring < spacing * max) {
    circle(width - spacing * xRingOffset, spacing * 3.75, ring);
    ring += 8.5;
  }
  while (count < height) {
    drawNoiseLine(count);
    count += spacing;
  }
}

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;
}