const height = 400;

​

// https://coolors.co/ee6352-59cd90-3fa7d6-fac05e-f79d84

​

const palette = ["#ee6352", "#59cd90", "#3fa7d6", "#fac05e", "#f79d84"];

​

class Grid {

  constructor(j, i) {

    this.j = j;

    this.i = i;

  }

}

​

const grid = [];

let pg;

​

const s = (p) => {

  const island = [];

  p.setup = () => {

    p.createCanvas(width, height);

    pg = p.createGraphics(width, height);

    pg.pixelDensity(1)

    p.pixelDensity(1);

    console.log(pg.pixelDensity())

​

    const N = 16;

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

      grid[i] = [];

      for (let j = 0; j < N; j++) {

        grid[i][j] = n(j / N, i / N) * Math.PI * 4;

      }

    }

  };

​

  function n(j, i, t) {

    return p.noise(j * 8, i * 8, t) * 0.5 + p.noise(j * 4, i * 4, t) * 0.5;

  }

  p.mousePressed = () => {

    island.length = 0;

    island.push({

      x: p.mouseX,

      y: p.mouseY

    });

  }

  p.mouseDragged = () => {

    island.push({

      x: p.mouseX,

      y: p.mouseY

    });

  }

  p.mouseReleased = () => {

    island.push({

      x: p.mouseX,

      y: p.mouseY

    });

  }

  p.draw = () => {

    const t = p.millis() * 0.001;

    p.background(palette[2]);

    let pg = p;

    pg.background(palette[2]);

​

    pg.stroke(255)

    pg.fill(palette[1])

    pg.beginShape();

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

      pg.vertex(island[i].x, island[i].y);

    }

    pg.endShape(p.CLOSE);

    // p.circle(width / 2, height / 2, width / 2);

​

    // p.image(pg, 0, 0)

​

    p.strokeWeight(2);

    const N = 16;

    const amp = width / N / 2;

    pg.loadPixels();

    const d = p.pixelDensity();

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

      for (let j = 0; j < N; j++) {

        const x = j * width / N + Math.floor(width / N / 2);

        const y = i * height / N + Math.floor(width / N / 2);

        const v = p.createVector(amp, 0);

​

        if (pg.pixels[4 * d * (x + y * pg.width) + 1] > pg.pixels[4 * d * (x + y * pg.width) + 2]) {

          grid[i][j] += 0.1;

        }

​

        v.rotate(grid[i][j]);

        p.stroke(255);

        p.line(x, y, x + v.x, y + v.y);

        // v.rotate(Math.PI / 2);

        // p.stroke(palette[4]);

        // p.line(x - v.x, y - v.y, x + v.x, y + v.y);

      }

    }

  };

};

​

let myp5 = new p5(s);