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.05,
      b: 0,
      c: 0,
      d: 0.6,
      tx: 0,
      ty: 0,
      weight: 0.17,
    },
    {
      a: 0.05,
      b: 0,
      c: 0,
      d: -0.5,
      tx: 0,
      ty: 1,
      weight: 0.17,
    },
    {
      a: 0.46,
      b: -0.321,
      c: 0.386,
      d: 0.383,
      tx: 0,
      ty: 0.6,
      weight: 0.17,
    },
    {
      a: 0.47,
      b: -0.154,
      c: 0.171,
      d: 0.423,
      tx: 0,
      ty: 1.1,
      weight: 0.17,
    },
    {
      a: 0.433,
      b: 0.275,
      c: -0.25,
      d: 0.476,
      tx: 0,
      ty: 1,
      weight: 0.16,
    },
    {
      a: 0.421,
      b: 0.257,
      c: -0.353,
      d: 0.306,
      tx: 0,
      ty: 0.7,
      weight: 0.16,
    },
  ];

  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 * 350, -y * 350);
  }
}

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