​

let _noise;

let grid;

let maxZ, z, zdir;

let colors;

let imgs;

let offset;

​

let lines, lwidth;

let radius, _scale;

​

// https://sighack.com/post/fifteen-ways-to-draw-a-line

function dline(x1, y1, x2, y2, weight, value, _type, dir) {

  /*

   * Draw a line from (x1, y1) to (x2, y2) with a given

   * weight and darkness (value)

   */

  strokeWeight(weight);

  let _c = colors[1]; // color(0);

  _c._array[3] = value;

  stroke(_c);

​

  // y=mx+b

  let dy = y2 - y1;

  let dx = x2 - x1;

  let m = dy / dx;

​

  if (_type == null) line(x1, y1, x2, y2);

  else if (_type == "jagged") {

    let variance = weight / 2;

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

      strokeWeight(random(0.1, 0.8));

      line(

        x1 + random(-variance, variance),

        y1 + random(-variance, variance),

        x2 + random(-variance, variance),

        y2 + random(-variance, variance)

      );

    }

  } else if (_type == "stippled") {

    let _x = x1;

    for (let _y = y1; _y < y2; _y++) {

      // for (let _x = x1; _x < x2; _x++) {

      _c._array[3] = random(1.0);

      fill(_c);

      noStroke();

      circle(_x, _y, random(weight / 2, weight));

      _x++;

      // }

    }

  } else if (_type == "stippled2") {

    if (dir) {

      let _x = x1;

      for (let _y = y1; _y < y2; _y += random(0.5, 3.0)) {

        // for (let _x = x1; _x < x2; _x++) {

        _c._array[3] = random(1.0);

        fill(_c);

        noStroke();

        circle(_x, _y, random(weight / 2, weight));

        _x += random(-0.2, 0.2); //0.5,3.0);

        // }

      }

    } else {

      let _y = y1;

      for (let _x = x1; _x < x2; _x += random(0.5, 3.0)) {

        // for (let _x = x1; _x < x2; _x++) {

        _c._array[3] = random(1.0);

        fill(_c);

        noStroke();

        circle(_x, _y, random(weight / 2, weight));

        _y += random(-0.2, 0.2); //0.5,3.0);

        // }

      }

    }

  }

}

​

// https://necessarydisorder.wordpress.com/2017/11/15/drawing-from-noise-and-then-making-animated-loopy-gifs-from-there/ -- looping

function drawPoint(x, y, z, img) {

  let _c = color(255, 0, 255);

  if (grid[z][y][x] < 0.0) _c = color(0);

  //

  else if (grid[z][y][x] < 0.05) _c = color(50);

  else if (grid[z][y][x] < 0.1) _c = colors[0];

  //color(0);

  else if (grid[z][y][x] < 0.2) _c = colors[1];

  //color(50);

  else if (grid[z][y][x] < 0.3) _c = colors[2];

  //color(100);

  else if (grid[z][y][x] < 0.5) _c = colors[3];

  //color(150);

  else if (grid[z][y][x] < 0.7) _c = colors[4];

  //color(250);

  else if (grid[z][y][x] < 0.8) _c = colors[5];

  //color(250);

  else _c = colors[6]; //color(255);

​

  img.stroke(_c);

  img.strokeWeight(1);

  img.point(x, y);

}

​

function setup() {

  zdir = true;

  maxZ = 1; // debug

  maxZ = 20;

  // maxZ = 500; // 50

  z = 0;

  imgs = [];

  let freq = 0.005; //0.01;

  let octaves = 14;

  offset = 50;

​

  lines = [];

​

  radius = 5.0;

  _scale = 0.02;

​

  // https://kgolid.github.io/chromotome-site/ ## system.04

  // colors = [

  //   color(242,242,242,255),

  //   color(227,31,79,255),

  //   color(240,172,63,255),

  //   color(24,172,171,255),

  //   color(38,38,90,255),

  //   color(233,125,129,255),

  //   color(220,217,208,255)

  // ];

  // retro

  colors = [

    color(158, 214, 203, 255),

    color(105, 118, 111, 255),

    color(157, 143, 127, 255),

    color(147, 100, 84, 255),

    color(191, 92, 50, 255),

    color(239, 173, 87, 255),

    color(247, 229, 204, 255),

    color(242, 242, 242, 255),

  ];

​

  _noise = new FastSimplexNoise({ frequency: freq, octaves: octaves });

  createCanvas(800, 800);

  pixelDensity(1);

  lwidth = width - offset - 1;

​

  background(255);

​

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

    imgs.push(createGraphics(width, height));

  }

​

  // https://gamedev.stackexchange.com/questions/23625/how-do-you-generate-tileable-perlin-noise

  //   for x=0,bufferwidth-1,1 do

  //     for y=0,bufferheight-1,1 do

  //         local s=x/bufferwidth

  //         local t=y/bufferheight

  //         local dx=x2-x1

  //         local dy=y2-y1

​

  //         local nx=x1+cos(s*2*pi)*dx/(2*pi)

  //         local ny=y1+cos(t*2*pi)*dy/(2*pi)

  //         local nz=x1+sin(s*2*pi)*dx/(2*pi)

  //         local nw=y1+sin(t*2*pi)*dy/(2*pi)

​

  //         buffer:set(x,y,Noise4D(nx,ny,nz,nw))

  //     end

  // end

​

  // GRID NEVER USED AGAIN.  CAN MAKE IT LOCAL AND JUST RENDER THE IMGS!

​

  grid = [];

  for (let z = 0; z < maxZ; z++) {

    let t = (1.0 * z) / maxZ;

​

    grid[z] = [];

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

      grid[z][y] = [];

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

        // grid[z][y][x] = _noise.get3DNoise(x, y, z);

        grid[z][y][x] = _noise.get4DNoise(

          x,

          y,

          // _scale*x,

          // _scale * y,

          radius * cos(TWO_PI * t),

          radius * sin(TWO_PI * t)

        );

        //     boolean b = (float)noise.eval(scale*x,scale*y,radius*cos(TWO_PI*t),radius*sin(TWO_PI*t)) > 0;

        //   float col = b?255:0;

        //   pixels[x + width*y] = color(col);

        // }

​

        drawPoint(x, y, z, imgs[z]);

      }

    }

  }

  // frameRate(10);

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

    let l = {

      x: offset + 1,

      y: random(offset, height - offset),

      dir: random([true, false]),

      color: random(colors),

      speed: random(0.5, 5),

      size: random(0.5, 2),

    };

    lines.push(l);

  }

}

​

function drawOverlay() {

  let off = offset;

  noStroke();

  let _c = colors[7]; //0];

  _c._array[3] = 0.9;

  fill(_c);

​

  rect(0, 0, off, height);

  rect(off, 0, width, off);

  rect(width - off, off, off, height - off * 2);

  rect(off, height - off, width - off, off);

​

  off = 10;

  fill(colors[1]);

  // rect(0, 0, off, height);

  // rect(0, 0, width, off);

  // rect(width - off, 0, off, height);

  // rect(0, height - off, width, off);

​

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

    dline(i, 0, i + off, height, off, 0.8, "stippled2", true);

    dline(0, i, width, i+off, off, 0.8, "stippled2", false);

    dline(width-i, 0, width - (i + off), height, off, 0.8, "stippled2", true);

    dline(0, height-i, width, height-(i+off), off, 0.8, "stippled2", false);

  }

}

function draw() {

  image(imgs[z], 0, 0);

​

  // if (maxZ == 1) noLoop();

​

  // if (maxZ > 1) {

  //   if (zdir) z++;

  //   else z--;

  //   if (z > imgs.length - 1) {

  //     z = imgs.length - 2;

  //     zdir = !zdir;

  //   }

  //   if (z < 0) {

  //     z = 1;

  //     zdir = !zdir;

  //   }

  // }

​

  drawOverlay();

​

  noFill();

​

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

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

  //     strokeWeight(lines[i].size);

  //     line(lines[i].x,lines[i].y,lwidth,lines[i].y);

​

  //     if (lines[i].dir) lines[i].y += lines[i].speed;

  //     else lines[i].y -= lines[i].speed;

​

  //     if (lines[i].y < offset) {

  //       lines[i].y = offset;

  //       lines[i].dir = !lines[i].dir;

  //     } else if (lines[i].y > height-offset) {

  //       lines[i].y = height-offset;

  //       lines[i].dir = !lines[i].dir;

  //     }

  //   }

​

  z++;

  if (z > maxZ - 1) z = 0;

  // if ((frameCount % maxZ) == 0) z = 0;

}

​