let gfx;

function preload() {

  img = loadImage("overworld.png");

}

function setup() {

  createCanvas(img.width * 2, img.height * 2);

  pixelDensity(1);

​

  image(img, 0, 0, img.width * 2, img.height * 2, 0, 0, img.width, img.height);

  gfx = createGraphics(width, height);

  loadPixels();

  noStroke();

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

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

      const idx = getPixelID(x, y);

      let col = color(pixels[idx], pixels[idx + 1], pixels[idx + 2]);

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

        // col.setAlpha(1);

        gfx.fill(col);

        gfx.circle(x,y,random(1,10));// + random(-4, 4), y + random(-4, 4), random(1, 10));

      }

    }

  }

  image(gfx, 0, 0);

  // console.log(img.width, img.height);

  // image(img,0,0)

​

  //   gfx = createGraphics(width * 2, height * 2);

​

  //   img.loadPixels();

  //   gfx.background(0);

  //   // gfx.loadPixels();

  //   gfx.noStroke();

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

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

  //       const i_idx = getPixelID(x, y);

  //       let col = {

  //         r: img.pixels[i_idx],

  //         g: img.pixels[i_idx + 1],

  //         b: img.pixels[i_idx + 2],

  //       };

  //       console.log(col,x,y)

​

  //       // if (col.r != undefined) {

  //         let c = color(col.r, col.c, col.b, 1);

  //         gfx.fill(c);

  //         for (let _ = 0; _ < 30; _++) {

  //           gfx.circle(x*2+random(-2,2),y*4+random(-2,2),random(1,6));

  //         }

  //       // }

  //       // gfx.fill(color(col.r,col.g,col.b));

  //       // gfx.square(x*2,y*4,4)

​

  //       // for (let gy = 0; gy < 2; gy++) {

  //       //   for  (let gx = 0; gx < 2; gx++) {

  //       //     let g_idx = getPixelID(x+gx, y+gy);

  //       //     gfx.pixels[g_idx] = col.r;

  //       //     gfx.pixels[g_idx+1] = col.g;

  //       //     gfx.pixels[g_idx+2] = col.b;

  //       //   }

  //       // }

  //     }

  //   }

  //   // gfx.updatePixels();

  //   image(gfx, 0, 0);

  // image(img,0,0);

  //   noStroke();

  //   for (let _ = 0; _ < 100000; _++) {

  //     let x = int(random(width-1));

  //     let y = int(random(height-1));

  //     const idx = getPixelID(x,y);

  //     let col = {r: img.pixels[idx], g: img.pixels[idx+1], b: img.pixels[idx+1]};

​

  //     for (let _2 = 0; _2 < 1000; _2++) {

  //       let c = color(col.r,col.g,col.b);

  //       c.setAlpha(10);

  //       gfx.fill(c);

  //       gfx.circle(x+random(-5,5), y+random(-5,5), random(1,5));

  //     }

  //     // gfx.pixels[idx] = col.r;

  //     // gfx.pixels[idx+1] = col.g;

  //     // gfx.pixels[idx+2] = col.b;

  //   }

  //   // gfx.updatePixels();

  //   image(gfx,0,0);

}

​

function draw() {

  // background(220);

}

​

function getPixelID(_x, _y) {

  let _density = pixelDensity();

  const idx = 4 * _density * (int(_y) * _density * width + int(_x));

  return idx;

}

​