p5.disableFriendlyErrors = true;

​

let colors, _stroke, _fill;

​

let points, gfx;

let _SHAPE;

function setup() {

  createCanvas(1000, 1000);

  pixelDensity(1);

  gfx = createGraphics(width, height);

  offset = width / 256; // 100; // 256 is neat

   let miradors = [

    color("#020202"),

    color("#ff6936"),

    color("#fddc3f"),

    color("#0075ca"),

    color("#03bb70"),

  ];

    //https://www.colourlovers.com/palette/4849017/1

  let muted = [

    color("#769174"),

    color("#E0E1E5"),

    color("#A4BEDB"),

    color("#676F75"),

    color("#D49266"),

  ];

  let powerpuff = [

    color("#201010"),

    color("#5dece1"),

    color("#ea50c4"),

    color("#47e752"),

    color("#130d0d"),

  ];

​

  let butterfly = [

    color("#191e36"),

    color("#f40104"),

    color("#f6c0b3"),

    color("#99673a"),

    color("#f0f1f4"),

  ];

​

  let cc239 = [

    color("#e0eff0"),

    color("#e3dd34"),

    color("#78496b"),

    color("#f0527f"),

    color("#a7e0e2"),

  ]

  colors = random([miradors, muted, powerpuff, butterfly, cc239]);

​

  _fill = random(colors);

  _stroke = random(colors);

  points = [];

  gfx.background(255);

  gfx.stroke(0);

  gfx.noFill();

  for (let y = offset; y <= height - offset; y += offset) {

    for (let x = offset; x <= width - offset; x += offset) {

      // if ((y == offset || x == offset) && x != y) {

      //   if (x == offset)

      //     // horiz

      //     points.push({

      //       x: x,

      //       y: y,

      //       vx: random(2, 5),

      //       vy: 0,

      //       color: random(100, 255),

      //       dir: "horiz",

      //     });

      //   else if (y == offset)

      //     // vert

      //     points.push({

      //       x: x,

      //       y: y,

      //       vx: 0,

      //       vy: random(2, 5),

      //       color: random(100, 255),

      //       dir: "vert",

      //     });

      // }

​

      //       // circle(x,y,5);

      gfx.ellipse(x, y, 5, 5);

    }

  }

  dither(gfx);

  image(gfx, 0, 0);

​

  let _x = height / 2;

  let _y = width / 2;

​

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

    let s = random([true, false]);

    let d = random(["horiz", "vert"]);

    let vx, vy, x, y;

    if (s) {

      // right|down

      if (d == "horiz") {

        x = random(-width, 0);

        y = _y + random(-50, 50);

        vx = random(1.0, 5.0);

        vy = 0;

      } else {

        x = _x + random(-50, 50);

        y = random(-height, 0);

        vy = random(1.0, 5.0);

        vx = 0;

      }

    } else {

      // left|up

      if (d == "horiz") {

        x = random(width * 2, width);

        y = _y + random(-50, 50);

        vx = random(-1.0, -5.0);

        vy = 0;

      } else {

        x = _x + random(-50, 50);

        y = random(height, height * 2);

        vy = random(-1.0, -5.0);

        vx = 0;

      }

    }

​

    points.push({

      x: x,

      y: y,

      origX: x,

      origY: y,

      vx: vx,

      vy: vy,

      color: random(colors),//random(100, 200),

      dir: d,

      sign: s,

      visible: false,

    });

  }

  // TRIANGLE_FAN, 

    // QUADS, QUAD_STRIP, 

  _SHAPE = random([

    '',POINTS, LINES, TRIANGLES, TRIANGLE_STRIP, 

    TESS

  ]);

  // _SHAPE = TRIANGLE_FAN;

  console.log(_SHAPE);

}

​

function draw() {

  if (frameCount % 200 == 0)

    image(gfx, 0, 0);

  drawShadow(18, null);

  noStroke();

​

  if (_SHAPE == POINTS) strokeWeight(5);

  else strokeWeight(0.3);

  // r = POINTS;

​

​

​

  beginShape(_SHAPE);

  stroke(_stroke);//color(255, 255, 255, 120));

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

    let p = points[i];

​

    noFill();

    // fill(p.color);

    vertex(p.x, p.y);

    // ellipse(p.x, p.y, 5, 5);

    p.x += p.vx;

    p.y += p.vy;

    if (p.dir == "horiz" && abs(p.vy) > 0.2) p.vy = 0.0;

    else if (p.dir == "vert" && abs(p.vx) > 0.2) p.vx = 0.0;

    if (random() > 0.9) p.vx += random(-0.5, 0.5);

    if (random() > 0.9) p.vy += random(-0.5, 0.5);

​

    if (p.x >= 0 && p.x <= width && p.y >= 0 && p.y <= height) p.visible = true;

    else p.visible = false;

    if ((p.x < 0 || p.x > width) && p.visible) {

      p.x = p.origX;

      p.y = p.origY;

    }

​

    //     if (p.dir == "horiz") {

    //       let _l = random(5);

    //       for (let _x = p.x - 1; _x >= p.x - 1 - _l; _x--) {

    //         let _s = map(_x, p.x - 1, p.x - 1 - _l, 4.5, 0.5);

    //         ellipse(_x, p.y, _s, _s);

    //       }

    //     } else {

    //       let _l = random(5);

    //       for (let _y = p.y - 1; _y >= p.y - 1 - _l; _y--) {

    //         let _s = map(_y, p.y - 1, p.y - 1 - _l, 4.5, 0.5);

    //         ellipse(p.x, _y, _s, _s);

    //       }

    //     }

​

    //     ellipse(p.x, p.y, 5, 5);

    //     p.x += p.vx;

    //     p.y += p.vy;

​

    //     if (p.x < 0 || p.x > width) p.x = 0;

    //     if (p.y < 0 || p.y > height) p.y = 0;

  }

  endShape(CLOSE);

  // background(220);

}

​

function drawShadow(b, g) {

  if (g == null) {

    drawingContext.shadowOffsetX = 2;

    drawingContext.shadowOffsetY = 2;

    drawingContext.shadowBlur = b;

​

    // if (bg._array[0] == 0 && bg._array[1] == 0 && bg._array[2] == 0)

    // drawingContext.shadowColor = color(50);

    //"black";

    // else

    drawingContext.shadowColor = color(0); //"black";

  } else {

    if (b == 0) {

      g.drawingContext.shadowOffsetX = 0;

      g.drawingContext.shadowOffsetY = 0;

      g.drawingContext.shadowBlur = 0;

      g.drawingContext.shadowColor = color(0); //"black";

    } else {

      g.drawingContext.shadowOffsetX = 3;

      g.drawingContext.shadowOffsetY = 3;

      g.drawingContext.shadowBlur = b;

      g.drawingContext.shadowColor = color(0); //"black";

    }

  }

}

​

function index(g, x, y) {

  if (g == null) return (x + y * width) * 4;

  else return (x + y * g.width) * 4;

}

​

function dither(g) {

  if (g != null) {

    g.loadPixels();

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

      for (let x = 1; x < width - 1; x++) {

        let oldr = g.pixels[index(g, x, y)];

        let oldg = g.pixels[index(g, x, y) + 1];

        let oldb = g.pixels[index(g, x, y) + 2];

​

        let factor = 1.0;

        let newr = round((factor * oldr) / 255) * (255 / factor);

        let newg = round((factor * oldg) / 255) * (255 / factor);

        let newb = round((factor * oldb) / 255) * (255 / factor);

​

        g.pixels[index(g, x, y)] = newr;

        g.pixels[index(g, x, y) + 1] = newg;

        g.pixels[index(g, x, y) + 2] = newb;

​

        g.pixels[index(g, x + 1, y)] += ((oldr - newr) * 7) / 16.0;

        g.pixels[index(g, x + 1, y) + 1] += ((oldr - newr) * 7) / 16.0;

        g.pixels[index(g, x + 1, y) + 2] += ((oldr - newr) * 7) / 16.0;

​

        g.pixels[index(g, x - 1, y + 1)] += ((oldr - newr) * 3) / 16.0;

        g.pixels[index(g, x - 1, y + 1) + 1] += ((oldr - newr) * 3) / 16.0;

        g.pixels[index(g, x - 1, y + 1) + 2] += ((oldr - newr) * 3) / 16.0;

​

        g.pixels[index(g, x, y + 1)] += ((oldr - newr) * 5) / 16.0;

        g.pixels[index(g, x, y + 1) + 1] += ((oldr - newr) * 5) / 16.0;

        g.pixels[index(g, x, y + 1) + 2] += ((oldr - newr) * 5) / 16.0;

​

        g.pixels[index(g, x + 1, y + 1)] += ((oldr - newr) * 1) / 16.0;

        g.pixels[index(g, x + 1, y + 1) + 1] += ((oldr - newr) * 1) / 16.0;

        g.pixels[index(g, x + 1, y + 1) + 2] += ((oldr - newr) * 1) / 16.0;

      }

    }

    g.updatePixels();

  } else {

    g = null;

    loadPixels();

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

      for (let x = 1; x < width - 1; x++) {

        let oldr = pixels[index(g, x, y)];

        let oldg = pixels[index(g, x, y) + 1];

        let oldb = pixels[index(g, x, y) + 2];

​

        let factor = 1.0;

        let newr = round((factor * oldr) / 255) * (255 / factor);

        let newg = round((factor * oldg) / 255) * (255 / factor);

        let newb = round((factor * oldb) / 255) * (255 / factor);

​

        pixels[index(g, x, y)] = newr;

        pixels[index(g, x, y) + 1] = newg;

        pixels[index(g, x, y) + 2] = newb;

​

        pixels[index(g, x + 1, y)] += ((oldr - newr) * 7) / 16.0;

        pixels[index(g, x + 1, y) + 1] += ((oldr - newr) * 7) / 16.0;

        pixels[index(g, x + 1, y) + 2] += ((oldr - newr) * 7) / 16.0;

​

        pixels[index(g, x - 1, y + 1)] += ((oldr - newr) * 3) / 16.0;

        pixels[index(g, x - 1, y + 1) + 1] += ((oldr - newr) * 3) / 16.0;

        pixels[index(g, x - 1, y + 1) + 2] += ((oldr - newr) * 3) / 16.0;

​

        pixels[index(g, x, y + 1)] += ((oldr - newr) * 5) / 16.0;

        pixels[index(g, x, y + 1) + 1] += ((oldr - newr) * 5) / 16.0;

        pixels[index(g, x, y + 1) + 2] += ((oldr - newr) * 5) / 16.0;

​

        pixels[index(g, x + 1, y + 1)] += ((oldr - newr) * 1) / 16.0;

        pixels[index(g, x + 1, y + 1) + 1] += ((oldr - newr) * 1) / 16.0;

        pixels[index(g, x + 1, y + 1) + 2] += ((oldr - newr) * 1) / 16.0;

      }

    }

    updatePixels();

  }

}

​