​

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

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

  /*

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

   * weight and darkness (value)

   */

  strokeWeight(weight);

  let _c = 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") {

    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.5,3.0);

      // }

    }

  }

}

​

function setup() {

  createCanvas(800,800);

  background(255);

  let mid_x = width/2;

  let mid_y = height/2;

  let offset = 250;

  let offset2 = 75;

  dline(mid_x-offset, mid_y-offset, mid_x+offset, mid_y+offset, 15, color(0), null);

  dline(mid_x-offset-offset2, mid_y-offset, mid_x+offset-offset2, mid_y+offset, 15, 1.0, "jagged");

  dline(mid_x-offset+offset2, mid_y-offset, mid_x+offset+offset2, mid_y+offset, 15, 1.0, "stippled");

  dline(mid_x-offset+offset2+offset2, mid_y-offset, mid_x+offset+offset2+offset2, mid_y+offset, 15, 1.0, "stippled2");

}

function draw() {

  noLoop();

}

​

// let _noise;

// let grid;

// let maxZ, z, zdir;

// let colors;

// let imgs;

// let offset;

​

// let lines, lwidth;

// let radius, _scale;

​

// // 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);

//   img.noStroke();

//   img.fill(_c);

//   if (random() > 0.5)

//   img.square(x,y,50);

//   else

//     img.circle(x,y,50);

// }

​

// function setup() {

//   zdir = true;

//   maxZ = 10; // debug

//   // 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);

// }

// 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;

// }

​