let rgtAng = 1.57;

let turn = 0.15;

let wid = 2250; //3840, 2250

let hgt = 3000; //2160, 3000

let angDir = 1;

let rgt,

  lft,

  sze,

  table,

  buff,

  lineLength,

  szeMax,

  szeInc,

  frame,

  n3,

  scalePerc,

  sqSp,

  windowRatio,

  imageRatio,

  newWid,

  newHgt,

  colNum,

  noiseAng,

  grainShader,

  maxSize;

let taper = false;

​

function preload() {

  table = loadTable("colors.csv", "csv", "header");

  grainShader = loadShader("grain.vert", "grain.frag");

}

​

function setup() {

  pixelDensity(1);

  imageRatio = wid / hgt;

  checkRatio();

  createCanvas(newWid, newHgt);

  scalePerc = width / wid;

  scale(scalePerc);

  palette = floor(random(35));

  cnv1 = createGraphics(wid, hgt);

  cnv2 = createGraphics(wid, hgt);

  cnv3 = createGraphics(wid, hgt);

  cnv2.background(0);

  cnv1.colorMode(HSB, 360, 120, 100, 255);

  cnv3.colorMode(HSB, 360, 120, 100, 255);

  maxSize = max(wid, hgt);

  if (random(3)<2){

    watercolor();

    cnv3.image(cnv1, 0, 0);

  }

  sqSp = maxSize * 0.65 * hgt * 0.65; //main initial determinant of number of drawings to make

  lineLength = maxSize * 0.018;

  buff = maxSize * 0.06;

  szeMax = maxSize * 0.007; // 0.018

  szeInc = maxSize * 0.0012;

  frame = maxSize * 0.001;

  blankSpots1();

  colNum = 2;

  getColor3(colNum);

  newLine();

  makeLines();

  makeDots();

  makeDots();

  makeBlobs(18);

  makeLines();

  makeDots();

  makeBlobs(7);

  paperTexture();

  cnv3.background(0, 0, 100, 30);

  image(cnv3, 0, 0);

  grain();

}

​

function blankSpots1() {

  cnv2.rectMode(CENTER);

  cnv2.fill(255);

  cnv2.rect(wid / 2, hgt / 2, wid * 0.8, hgt * 0.85);

  cnv2.fill(0);

  sqSp -= cnv2.width * 0.45 * cnv2.height * 0.45;

}

​

function blankSpots2() {}

​

function makeBlobs(alph) {

  cnv3.noStroke();

  numb = sqSp * 0.001;

  for (j = 0; j < numb; j++) {

    x = random(wid);

    y = random(hgt);

    getColor4();

    cnv3.fill(h, s, b - 50, alph);

    cnv3.push();

    cnv3.translate(x, y);

    cnv3.rotate(random(PI * 2));

    let r = (s2 = maxSize * random(0.03, 0.04)); //0.005, 0.018

    cnv3.beginShape();

    for (i = 0; i < PI * 2; i += 0.3) {

      x = cos(i) * r;

      y = sin(i) * r;

      r += random(-r / 10, r / 10);

      if (i > PI * 1.5) {

        r = r + (s2 - r) / 3;

      } else if (i > PI * 1.75) {

        r = r + (s2 - r) / 7;

      }

      cnv3.curveVertex(x, y);

    }

    cnv3.endShape(CLOSE);

    cnv3.pop();

  }

}

​

function makeDots() {

  cnv3.noStroke();

  numb = sqSp * 0.0001;

  for (j = 0; j < numb; j++) {

    getColor2();

    cnv3.fill(h, s, b + 20);

    newXY();

    cnv3.push();

    cnv3.translate(x, y);

    cnv3.rotate(random(PI * 2));

    let r = (s2 = maxSize * random(0.002, 0.009)); //0.005, 0.018

    cnv3.beginShape();

    for (i = 0; i < PI * 2; i += 0.3) {

      x = cos(i) * r;

      y = sin(i) * r;

      r += random(-r / 10, r / 10);

      if (i > PI * 1.5) {

        r = r + (s2 - r) / 3;

      } else if (i > PI * 1.75) {

        r = r + (s2 - r) / 7;

      }

      cnv3.curveVertex(x, y);

    }

    cnv3.endShape(CLOSE);

    cnv3.pop();

  }

}

​

function newXY() {

  cnt = 0;

  while (cnt < 100) {

    x = random(frame, wid - frame);

    y = random(frame, hgt - frame);

    check = cnv2.get(x, y);

    if (check[0] == 0) {

      continue;

    }

    cnt++;

  }

}

​

function makeLines() {

  numb = sqSp * 0.002; //.0023

  for (i = 0; i < numb; i++) {

    n =

      noise((x / wid) * 1000 * rez3 + 20000, (y / hgt) * 1000 * rez3 + 20000) -

      0.2;

    noiseAng = n * PI * 2.5;

    ang = ang + random(-0.25, 0.25) + noiseAng * random(0.005, 0.08) * angDir;

    if (random(100) < 3) {

      angDir *= -1;

    }

    x = lineLength * sin(ang) + x;

    y = lineLength * cos(ang) + y;

    edges();

    if (random(100) < 10) {

      taper = true;

    } else {

      if (taper == false) {

        sze = sze += random(-szeInc, szeInc);

      } else {

        //taper == true

        sze -= szeInc * 1.5;

        if (sze <= 1) {

          newLine();

          continue;

        }

      }

      sze = constrain(sze, 1, szeMax);

      cnv3.strokeWeight(sze);

      cnv3.line(prevX, prevY, x, y);

      prevX = x;

      prevY = y;

    }

  }

}

​

function newLine() {

  taper = false;

  if (random(10) < 2) {

    colNum++;

    if (colNum > 6) {

      colNum = 2;

    }

    getColor3(colNum);

  }

  cnv3.stroke(h, s, b + 20);

  newXY();

  prevX = x;

  prevY = y;

  sze = random(1, szeMax);

}

​

function edges() {

  front = cnv2.get(buff * sin(ang) + x, buff * cos(ang) + y);

  rgt = cnv2.get(buff * sin(ang + rgtAng) + x, buff * cos(ang + rgtAng) + y);

  lft = cnv2.get(buff * sin(ang - rgtAng) + x, buff * cos(ang - rgtAng) + y);

  if (front[0] == 0 && rgt[0] == 0 && lft[0] == 0) {

    newLine();

  } else if (front[0] == 0) {

    ang += turn;

  }

  if (random(150) < 1) {

    turn *= -1;

  }

}

​

function getColor1() {

  col1 = constrain(floor(n3 * 3), 0, 1);

  h = int(table.get(palette, col1 * 3)) + random(-8, 8);

  s = int(table.get(palette, col1 * 3 + 1)) + random(-10, 10);

  b = int(table.get(palette, col1 * 3 + 2)) + random(-10, 10);

}

​

function getColor2() {

  col1 = floor(random(0, 6));

  h = int(table.get(palette, col1 * 3)) + random(-8, 8);

  s = int(table.get(palette, col1 * 3 + 1)) + random(-10, 10);

  b = int(table.get(palette, col1 * 3 + 2)) + random(-10, 10);

}

​

function getColor3(col1) {

  h = int(table.get(palette, col1 * 3)) + random(-8, 8);

  s = int(table.get(palette, col1 * 3 + 1)) + random(-10, 10);

  b = int(table.get(palette, col1 * 3 + 2)) + random(-10, 10);

}

​

function getColor4() {

  n3 =

    noise((x / wid) * 1000 * rez3 + 20000, (y / hgt) * 1000 * rez3 + 20000) -

    0.2;

  col1 = constrain(floor(n3 * 3), 0, 1);

  h = int(table.get(palette, col1 * 3)) + random(-8, 8);

  s = int(table.get(palette, col1 * 3 + 1)) + random(-10, 10);

  b = int(table.get(palette, col1 * 3 + 2)) + random(-10, 10);

}

​

let rez2 = 0.003; //rotation for bg

let rez3 = 0.003; //color for bg

​

function watercolor() {

  //based on noise field

  cnv1.background(0, 120, 0);

  cnv1.noStroke();

  for (x = 0; x < wid; x += maxSize * 0.02) {

    for (y = 0; y < hgt; y += maxSize * 0.02) {

      n3 =

        noise(

          (x / wid) * 1000 * rez3 + 20000,

          (y / hgt) * 1000 * rez3 + 20000

        ) - 0.2;

      getColor1();

      cnv1.fill(h, s, b, 13); //13

      cnv1.beginShape();

      for (m3 = 0; m3 < PI * 2; m3 += 0.9) {

        r3 = maxSize * random(0.05, 0.09);

        let x7 = cos(m3) * r3 + x;

        let y7 = sin(m3) * r3 + y;

        cnv1.vertex(x7, y7);

      }

      cnv1.endShape(CLOSE);

    }

  }

  cnv1.background(0, 120, 0, random(80,230)); //200

  cnv1.filter(BLUR, 0.3);

}

​

function paperTexture() {

  //based on color present

  cnv3.noFill();

  textureNum = 15000; //15000

  cnv3.colorMode(RGB);

  colVary = 20; //40

  cnv3.strokeWeight(max(0.6, maxSize * 0.0007));

  for (i = 0; i < textureNum; i++) {

    x = random(wid);

    y = random(hgt);

    col = cnv3.get(x, y);

    cnv3.stroke(

      col[0] + random(-colVary, colVary),

      col[1] + random(-colVary, colVary),

      col[2] + random(-colVary, colVary),

      255

    ); //45

    cnv3.push();

    cnv3.translate(x, y);

    cnv3.rotate(random(PI * 2));

    cnv3.curve(

      maxSize * random(0.035, 0.14),

      0,

      0,

      maxSize * random(-0.03, 0.03),

      maxSize * random(-0.03, 0.03),

      maxSize * random(0.035, 0.07),

      maxSize * random(0.035, 0.07),

      maxSize * random(0.035, 0.14)

    );

    cnv3.pop();

  }

  //colorMode(HSB, 360, 120, 100, 255);

}

​

function grain() {

  // Create a WEBGL canvas to use the shader on

  const grainCanvas = createGraphics(cnv3.width, cnv3.height, WEBGL);

  // Set the shader onto the canvas

  grainCanvas.shader(grainShader);

  // Set variables inside the shader

  grainShader.setUniform("grainVary", 0.1); // Grain variance

  grainShader.setUniform("image", cnv3); // Image of the current canvas

  grainShader.setUniform("seed", random(100));

​

  // Draw rect over entire screen to activate the shader

  grainCanvas.rect(-cnv3.width / 2, -cnv3.height / 2, cnv3.width, cnv3.height);

​

  // The image with the grain is on the

  // grainCanvas, so we can draw that to

  // the main canvas to complete the effect

  cnv3.image(grainCanvas, 0, 0);

​

  print("grain done");

}

​

function draw() {

  push();

  scale(scalePerc);

  image(cnv3, 0, 0);

  pop();

  print("done");

  noLoop();

}

​

function windowResized() {

  loop();

  checkRatio();

  resizeCanvas(newWid, newHgt);

}

​

function checkRatio() {

  windowRatio = windowWidth / windowHeight;

  if (windowRatio > imageRatio) {

    scalePerc = windowHeight / hgt;

    newWid = (windowHeight / hgt) * wid;

    newHgt = windowHeight;

  } else {

    scalePerc = windowWidth / wid;

    newWid = windowWidth;

    newHgt = (windowWidth / wid) * hgt;

  }

}

​

function keyTyped() {

  if (key === "s") {

    cnv3.save("canvas.jpg");

  }

}

​