html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #292a33;
  overflow: hidden;
}

let rules, x, y;

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

  rules = [
    {
      a: 0.85,
      b: 0.04,
      c: -0.04,
      d: 0.85,
      tx: 0,
      ty: 1.6,
      weight: 0.65,
    },
    {
      a: -0.15,
      b: 0.28,
      c: 0.26,
      d: 0.24,
      tx: 0,
      ty: 0.44,
      weight: 0.07,
    },
    {
      a: 0.2,
      b: -0.26,
      c: 0.23,
      d: 0.22,
      tx: 0,
      ty: 1.6,
      weight: 0.07,
    },
    {
      a: 0,
      b: 0,
      c: 0,
      d: 0.16,
      tx: 0,
      ty: 0,
      weight: 0.21,
    },
  ];

  stroke(240);
  noFill();
  x = random();
  y = random();
}

function draw() {
  translate(width / 2, height);

  for (let i = 0; i < 100; i++) {
    const rule = getRule();
    const tx = x;
    const ty = y;
    x = tx * rule.a + ty * rule.b + rule.tx;
    y = tx * rule.c + ty * rule.d + rule.ty;

    point(x * 50, -y * 50);
  }
}

function getRule() {
  let rand = random();
  for (const rule of rules) {
    if (rand < rule.weight) {
      return rule;
    }
    rand -= rule.weight;
  }
}