swirl

let gridSize;

let noiseScale;

let sxnoise;

let colorPalette;

let radiusMin;

let radiusMax;

let lineWidthMin;

let lineWidthMax;

​

const colorPalettes = [

  ["c41e3d", "7d1128", "ff2c55", "3c0919", "e2294f"],

  // ["#FD9830", "#E36E2B", "#FA653B", "#E3382B", "#FD3065"],

  // ["#EDFD00", "#E3D000", "#FACF0C", "#E3A200", "#FD9B00"],

  // ["#05FDA6", "#05E356", "#11FA24", "#3BE305", "#98FD05"],

  // ["#DB0AFF", "#7117E3", "#2C26FA", "#1761E3", "#19C5FB"],

];

​

colorPalettes.forEach((palette) => {

  palette.forEach((color, index) => {

    if (palette[index].startsWith("#")) return;

    palette[index] = "#" + color.toString();

  });

});

​

const backgroundColors = [

  [40, 40, 60],

  [30, 30, 50],

  [60, 60, 80],

  [0, 0, 0],

];

​

function setup() {

  sxnoise = new OpenSimplexNoise(Date.now());

​

  gridSize = 0.5;

  noiseScale = 0.01;

  colorPalette = colorPalettes[floor(random(colorPalettes.length))];

  radiusMin = 100;

  radiusMax = radiusMin * 2;

  lineWidthMin = 0.01;

  lineWidthMax = lineWidthMin * 2;

​

  console.log(

    "Grid Size",

    gridSize,

    "Noise Scale",

    noiseScale,

    "Palette Id",

    colorPalettes.indexOf(colorPalette),

    "Radius Min",

    radiusMin,

    "Radius Max",

    radiusMax,

    "Line Width Min",

    lineWidthMin,

    "Line Width Max",

    lineWidthMax

  );

​

  createCanvas(1000, 800);

}

​

function draw() {

  const chosenBackgroundColor =

    backgroundColors[floor(random(backgroundColors.length))];

  background(chosenBackgroundColor);

​

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

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

      const noiseValue = sxnoise.noise2D(x * noiseScale, y * noiseScale);

      const rSize = map(noiseValue, -1, 1, radiusMin, radiusMax);

      const colorIndex = floor(map(noiseValue, -1, 1, 0, colorPalette.length));

      const chosenColor = colorPalette[colorIndex];

​

      stroke(chosenColor);

      const lineWidth = map(noiseValue, -1, 1, lineWidthMin, lineWidthMax);

      strokeWeight(lineWidth);

​

      const angle = map(noiseValue, -1, 1, 0, TWO_PI);

      const r = rSize;

      const newX = x + cos(angle) * r;

      const newY = y + sin(angle) * r;

​

      line(x, y, newX, newY);

    }

  }

​

  noLoop();

​

  noStroke();

  fill(chosenBackgroundColor);

  quad(0, 0, width, 0, width, 25, 0, 25);

  quad(0, 0, 0, height, 25, height, 25, 0);

  quad(0, height, width, height, width, height - 25, 25, height - 25);

  quad(width - 25, 0, width, 0, width, height, width - 25, height);

​

  granulate(3);

}

​

function granulate(amount) {

  loadPixels();

  const d = pixelDensity();

  const pixelsCount = 4 * (width * d) * (height * d);

  for (let i = 0; i < pixelsCount; i += 4) {

    const grainAmount = random(-amount, amount);

    pixels[i] = pixels[i] + grainAmount;

    pixels[i + 1] = pixels[i + 1] + grainAmount;

    pixels[i + 2] = pixels[i + 2] + grainAmount;

    // comment in, if you want to granulate the alpha value

    // pixels[i+3] = pixels[i+3] + grainAmount;

  }

  updatePixels();

}

​