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

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

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

A Pen by Monica.dev on CodePen.

License.

script.js

const colors = [
  "#ffadad",
  "#ffd6a5",
  "#fdffb6",
  "#caffbf",
  "#9bf6ff",
  "#a0c4ff",
  "#bdb2ff",
  "#ffc6ff"
];

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

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

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));
  //map(frameCount % 100, 0, 100, 0,1))//noise(noiseScale, noiseLevel));
  //random(0, 1));
  // Iterate from left to right.
  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;

    //stroke("#b4aaff")
    strokeWeight(1);
    // strokeWeight(map(count, 0, height, 0.5, 2.5));
    stroke(strokeColor);

    // Draw the line.
    line(x, height, x, y);
    // point(x, y);
  }
}
function draw() {
  // background("#2b2135");
  background("#cfecf7");
  noLoop();
  // Set the noise level and scale.
  let count = 0;
  while (count < height) {
    drawNoiseLine(count);
    count += 30;
  }
}

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