<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>
body {
  margin: 0;
  padding: 0;
}
function normal() {
  return (Math.random() + Math.random()) / 2
}

function getRandomColor(where) {
  let Hue
  let choice = Math.round(Math.random())
  if (choice == 1) {
    Hue = (normal() * 55 + where) % 360
  } else {
    Hue = (normal() * 75 + 180 + where) % 360
  }
  return hsv2rgb([Hue, Math.random() * 60 + 20, Math.random() * 60 + 30])
}

function generatePattern() {
  let colors = []
  let Hueplace = normal() * 60 + 140
  console.log(Hueplace)
  for (let i = 0; i < 300; i++) {
    colors.push(getRandomColor(Hueplace))
  }
  let singleHeight = windowHeight / colors.length

  noStroke()
  let positionY = 0
  colors.forEach(function (rgbcolor) {
    c = color(rgbcolor)
    fill(c)
    let lineHeight = singleHeight * (Math.random() * 2 + 1)
    rect(0, positionY, windowWidth, lineHeight)
    positionY += lineHeight
  })
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  button = createButton('Generate a new one');
  button.position(20, 20);
  button.mousePressed(generatePattern);
  
  generatePattern();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://jasongao97.github.io/gerhardRichterStrips/src/hsv2rgb.js