​

let d;

​

let left_x, right_x;

let top_y, bottom_y;

let resolution;

let num_columns, num_rows;

let default_angle;

let grid;

​

let pink, black;

let imgSize;

​

let x, y, step, num_steps;

let vertices;

​

let colors, colorStep;

​

function getPixelLocation(row, col) {

  return row * num_columns + col;

}

​

function setup() {

  createCanvas(3000,3000);//1000,1000);//400, 400);

  blendMode(LIGHTEST);

​

  // https://kgolid.github.io/chromotome-site/ # tricolor

  colorStep = 0;

  // colors = [

  //   color(236,100,59,255),

  //   color(86,183,171,255),

  //   color(248,203,87,255),

  //   color(31,30,67,255)    

  // ]

  // byrnes

  colors = [

    color(232,231,212,255),

    color(197,69,20,255),

    color(220,162,21,255),

    color(35,80,127,255),

  ]

  vertices = [];

​

  // unchanging globals

  imgSize = 4 * (width * d) * (height * d);

  pink = color(255, 102, 204);

  black = color(0);

​

  left_x = int(width * -0.5);

  right_x = int(width * 1.5);

  top_y = int(height * -0.5);

  bottom_y = int(height * 1.5);

​

  resolution = int(width * 0.01);

​

  num_columns = (right_x - left_x) / resolution;

  num_rows = (bottom_y - top_y) / resolution;

​

  default_angle = PI * 0.25;

​

  grid = new Array(num_columns);

  for (let col = 0; col < grid.length; col++) {

    grid[col] = new Array(num_rows);

    for (let row = 0; row < grid[col].length; row++) {

      //grid[col][row] = default_angle;

      //angle = (row / float(num_rows)) * PI;

      let scaled_x = col * 0.005;

      let scaled_y = row * 0.005;

      let noise_val = noise(scaled_x, scaled_y);

      //angle = random(0,2*PI);

      angle = map(noise_val, 0.0, 1.0, 0.0, PI*2.0);

      grid[col][row] = angle;

    }

  }

​

  for (let i = 0; i < 150; i++) {

    let x = random(width); //100;

    let y = random(height);//0; //random(height-50,height);//random(height); //100;

    let num_steps = random(1000,3000);//random(100,1000); //random(100,500);

    let step_length = 1;//random(1, 10); //1; //0.1 * width;

    for (let step = 0; step < num_steps; step++) {

      vertices.push(createVector(x, y));

​

      let x_offset = x - left_x;

      let y_offset = y - top_y;

​

      let column_index = int(x_offset / resolution);

      let row_index = int(y_offset / resolution);

​

      column_index = constrain(column_index, 0, grid.length);

      row_index = constrain(row_index, 0, grid[0].length);

​

      let grid_angle = grid[column_index][row_index];

​

      let x_step = step_length * cos(grid_angle);

      let y_step = step_length * sin(grid_angle);

​

      x += x_step;

      y += y_step;

    }

  }

 // console.log(vertices);

}

​

function draw() {

  let gfx = createGraphics(width,height);

  gfx.background(color(50));

​

  gfx.beginShape(POINTS);

  gfx.strokeWeight(5);

  // gfx.stroke(255);

  gfx.stroke(color(random(255),random(255),random(255),random(255)));

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

    // strokeWeight(random(2,10));//5);

    // stroke(color(random(255),random(255),random(255)))

    gfx.vertex(vertices[i].x, vertices[i].y);

  }

  gfx.endShape();

​

  // loadPixels();

  // for (let i = 0; i < imgSize; i+=4) {

  //   pixels[i] = red(pink);

  //   pixels[i+1] = green(pink);

  //   pixels[i+2] = blue(pink);

  //   pixels[i+3] = alpha(pink);

  // }

  // updatePixels();

​

  // step++;

  // if (step >= num_steps)

  makeDithered(gfx,1);

  gfx.filter(GRAY);

  image(gfx,0,0);

  beginShape(POINTS);

  strokeWeight(4);

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

    let _c = colors[colorStep];

    _c._array[3] = map(i,0,vertices.length,255,0)/255;

    stroke(_c);

    colorStep++; if (colorStep > colors.length-1) colorStep = 0;

    // strokeWeight(random(2,10));//5);

    // stroke(color(random(255),random(255),random(255)))

    vertex(vertices[i].x, vertices[i].y);

  }

  endShape();

  console.log("1 done");

  for (let _ = 0; _ < 5; _++) {

  vertices = [];

  for (let i = 0; i < 150; i++) {

    let x = random(width); //100;

    let y = random(height);//0; //random(height-50,height);//random(height); //100;

    let num_steps = random(1000,3000);//random(100,1000); //random(100,500);

    let step_length = 1;//random(1, 10); //1; //0.1 * width;

    for (let step = 0; step < num_steps; step++) {

      vertices.push(createVector(x, y));

​

      let x_offset = x - left_x;

      let y_offset = y - top_y;

​

      let column_index = int(x_offset / resolution);

      let row_index = int(y_offset / resolution);

​

      column_index = constrain(column_index, 0, grid.length);

      row_index = constrain(row_index, 0, grid[0].length);

​

      let grid_angle = grid[column_index][row_index];

​

      let x_step = step_length * cos(grid_angle);

      let y_step = step_length * sin(grid_angle);

​

      x += x_step;

      y += y_step;

    }

  }

  beginShape(POINTS);

  strokeWeight(2);

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

    let _c = colors[colorStep];

    _c._array[3] = map(i,0,vertices.length,255,0)/255;

    stroke(_c);

    fill(_c);

    // strokeWeight(random(2,10));//5);

    // stroke(color(random(255),random(255),random(255)))

    vertex(vertices[i].x, vertices[i].y);

  }

  endShape();

    colorStep++; 

    if (colorStep > colors.length-1) colorStep = 0;

  }

  // draw the last thing to an image and only draw part of it after this last bit?

  let _o = 250;//150;

  colors[3]._array[3] = 1;  

  let gfx2 = createGraphics(width,height);

  gfx2.clear();

  gfx2.fill(colors[3]);

  gfx2.noStroke();

  gfx2.rect(0,0,_o,height);

  gfx2.rect(0,0,width,_o);

  gfx2.rect(width-_o,0,_o,height);

  gfx2.rect(0,height-_o,width,_o);

  makeDithered(gfx2,1);

  blendMode(MULTIPLY);

  copy(gfx2,0,0,_o,height,0,0,_o,height);

  copy(gfx2,0,0,width,_o,0,0,width,_o);

  copy(gfx2,0,height-_o,width,_o,0,height-_o,width,_o);

  copy(gfx2,width-_o,0,width-_o,height,width-_o,0,width-_o,height);

//   image(gfx2,0,0);

  noLoop();

}

​

function imageIndex(img, x, y) {

  return 4 * (x + y * img.width);

}

​

function getColorAtindex(img, x, y) {

  let idx = imageIndex(img, x, y);

  let pix = img.pixels;

  let red = pix[idx];

  let green = pix[idx + 1];

  let blue = pix[idx + 2];

  let alpha = pix[idx + 3];

  return color(red, green, blue, alpha);

}

​

function setColorAtIndex(img, x, y, clr) {

  let idx = imageIndex(img, x, y);

​

  let pix = img.pixels;

  pix[idx] = red(clr);

  pix[idx + 1] = green(clr);

  pix[idx + 2] = blue(clr);

  pix[idx + 3] = alpha(clr);

}

​

// Finds the closest step for a given value

// The step 0 is always included, so the number of steps

// is actually steps + 1

function closestStep(max, steps, value) {

  return round(steps * value / 255) * floor(255 / steps);

}

​

function makeDithered(img, steps) {

  img.loadPixels();

​

  for (let y = 0; y < img.height; y++) {

    for (let x = 0; x < img.width; x++) {

      let clr = getColorAtindex(img, x, y);

      let oldR = red(clr);

      let oldG = green(clr);

      let oldB = blue(clr);

      let newR = closestStep(255, steps, oldR);

      let newG = closestStep(255, steps, oldG);

      let newB = closestStep(255, steps, oldB);

​

      let newClr = color(newR, newG, newB);

      setColorAtIndex(img, x, y, newClr);

​

      let errR = oldR - newR;

      let errG = oldG - newG;

      let errB = oldB - newB;

​

      distributeError(img, x, y, errR, errG, errB);

    }

  }

​

  img.updatePixels();

}

​

function distributeError(img, x, y, errR, errG, errB) {

  addError(img, 7 / 16.0, x + 1, y, errR, errG, errB);

  addError(img, 3 / 16.0, x - 1, y + 1, errR, errG, errB);

  addError(img, 5 / 16.0, x, y + 1, errR, errG, errB);

  addError(img, 1 / 16.0, x + 1, y + 1, errR, errG, errB);

}

​

function addError(img, factor, x, y, errR, errG, errB) {

  if (x < 0 || x >= img.width || y < 0 || y >= img.height) return;

  let clr = getColorAtindex(img, x, y);

  let r = red(clr);

  let g = green(clr);

  let b = blue(clr);

  clr.setRed(r + errR * factor);

  clr.setGreen(g + errG * factor);

  clr.setBlue(b + errB * factor);

​

  setColorAtIndex(img, x, y, clr);

}