let colors;

​

let offset1, offset2, offset3;

let modidx1, modidx2;

let startx, endx;

​

let scanner;

​

let colorIndex = 1;

​

// lerp color when edge hit?

​

function getRandomInt(min, max) {

  min = Math.ceil(min);

  max = Math.floor(max);

  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive

}

​

function setup() {

  offset1 = 50;

  offset2 = 5;

  offset3 = 50;

  lines = [];

  // https://kgolid.github.io/chromotome-site/ # rag-bangalore

  colors = [

    color(249, 236, 211, 255),

    color(234, 114, 14, 255),

    color(202, 81, 48, 255),

    color(233, 194, 90, 255),

    color(82, 83, 79, 255),

  ];

  createCanvas(800, 800);

​

  let points = [createVector(offset1 + offset2, height / 2)];

  startx = offset1 + offset2 + offset3;

  endx = width - (offset1 + (2 * offset2 + offset3));

​

  points.push(createVector(startx, height / 2));

  // points.push(createVector(width/2,height/4));

​

  modidx1 = points.length;

  for (let x = startx + random(20); x < endx - random(20); x += random(20)) {

    points.push(createVector(x, height / 2 + random(-20, 20)));

  }

  modidx2 = points.length - 1;

​

  points.push(createVector(endx, height / 2));

  points.push(createVector(width - (offset1 + 2 * offset2), height / 2));

  let line = {

    color: colors[1],

    points: points,

  };

  lines.push(line);

​

  let _x = offset1;

  let _y = height / 2 - 52;

  scanner = {

    point: createVector(_x, _y),

    size: 104,

    color: colors[4],

    dir: true,

    step: 5,

  };

​

  frameRate(60);

  background(colors[0]);

}

​

function draw() {

  // background(colors[0]);

​

  noStroke();

  fill(0);

  // square(scanner.point.x,scanner.point.y,scanner.size);

  // circle(scanner.point.x,scanner.point.y,scanner.size);

​

  let cg = createGraphics(width, height);

  cg.clear();

  cg.strokeWeight(1);

  cg.noFill();

  for (let i = 0; i < lines.length; i++) {

    cg.stroke(lines[i].color);

    cg.beginShape();

    for (let j = 0; j < lines[i].points.length; j++) {

      cg.vertex(lines[i].points[j].x, lines[i].points[j].y);

​

      if (j >= modidx1 && j <= modidx2) lines[i].points[j].y += random(-10, 10);

​

      lines[i].points[j].y = constrain(

        lines[i].points[j].y,

        height / 2 - 50,

        height / 2 + 50

      );

    }

    cg.endShape();

​

    // if (random() > 0.99)

    // lines[i].color = colors[getRandomInt(1, colors.length)];

  }

​

  //   push();

  //   scale(2);

  //   translate(-50, -100);

​

  //   stroke(lines[0].color);

  //   beginShape();

  //   for (let j = 0; j < lines[0].points.length; j++) {

  //     vertex(lines[0].points[j].x, lines[0].points[j].y);

​

  //     if (j >= modidx1 && j <= modidx2) lines[0].points[j].y += random(-10, 10);

​

  //     lines[0].points[j].y = constrain(

  //       lines[0].points[j].y,

  //       height / 2 - 50,

  //       height / 2 + 50

  //     );

  //   }

  //   endShape();

  //   pop();

​

  // line(width/2,0,width/2,height);

​

  cg.noStroke();

  cg.fill(colors[0]);

  cg.rect(0, 0, width, offset1);

  cg.rect(0, 0, offset1, height);

  cg.rect(width - offset1, 0, offset1, height);

  cg.rect(0, height - offset1, width, offset1);

​

  cg.fill(colors[4]);

  cg.rect(offset1, offset1, width - 2 * offset1 - offset2, offset2);

  cg.rect(

    offset1,

    height - offset1 - offset2,

    width - 2 * offset1 - offset2,

    offset2

  );

​

  fill(colors[0]);

  square(scanner.point.x,scanner.point.y,scanner.size);

  // circle(

  //   scanner.point.x + scanner.size / 2,

  //   scanner.point.y + scanner.size / 2,

  //   scanner.size + 2

  // );

​

  if (scanner.dir) {

    scanner.point.x += scanner.step;

    if (scanner.point.x > endx) {

      //-scanner.size)

      scanner.dir = false;

      colorIndex++;

      if (colorIndex > colors.length - 1) colorIndex = 1;

      for (let i = 0; i < lines.length; i++)

        lines[i].color = colors[colorIndex];

    }

  } else {

    scanner.point.x -= scanner.step;

    if (scanner.point.x <= startx - scanner.size) {

      scanner.dir = true;

      colorIndex++;

      if (colorIndex > colors.length - 1) colorIndex = 1;

      for (let i = 0; i < lines.length; i++)

        lines[i].color = colors[colorIndex];

    }

  }

  fill(0);

  square(scanner.point.x,scanner.point.y,scanner.size);

  // circle(

  //   scanner.point.x + scanner.size / 2,

  //   scanner.point.y + scanner.size / 2,

  //   scanner.size

  // );

  image(cg, 0, 0);

}

​