Mathober Day-7: Skew

let img1, img2;
let nSkew;
let nP = 200;
let r = 100;
let skews = [];
let colorA = [
  [238, 229, 224],
  [210, 235, 228],
  [210, 174, 174],
  [205, 176, 160],
  [219, 169, 125],
  [183, 142, 134],
  [162, 111, 108],
  [151, 88, 86],
  [143, 73, 73]
];
function preload() {
  img1 = loadImage("/assets/skewclouds.jpg");
  img2 = loadImage("/assets/skewland.png");
}

function setup() {
  createCanvas(600, 600);
  nSkew = int(random(5, 20));
  strokeWeight(0.5);
  for (let i = 0; i < nSkew; i++) {
    skews[i] = [
      random(-width / 2.5, width / 2.5),
      random(height / 2 - 50, height / 2 - 20),
      random(30, 100),
      random(50, 200),
      int(random(0, colorA.length - 1))
    ];
  }
}

function draw() {
  t = frameCount / 100;
  translate(width / 2, height / 2);
  background(img1);
  background(img2);
  for (let i = 0; i < skews.length; i++) {
    for (let j = 0; j < 20; j++) {
      x = skews[i][0] + (skews[i][3] / 2) * cos(j * 18);
      y = skews[i][1] + (skews[i][0] / 10) * sin(j * 18);
      p = createVector(
        skews[i][0] + (skews[i][3] / 2) * cos(t),
        skews[i][2] + (skews[i][3] / 6) * sin(t)
      );
      stroke(
        colorA[skews[i][4]][0] + 50 * sin(t / 3),
        colorA[skews[i][4]][1] + 50 * sin(t / 3),
        colorA[skews[i][4]][2] + 50 * sin(t / 3)
      );
      line(x, y, p.x, p.y);
      circle(p.x, p.y, 2);
    }
  }
}