createCanvas(windowWidth, windowHeight);

    background(255, 225, 200);

}

​

function draw() {

    // drawCenteredGradientCircles();

    // drawLinearGradientCircles();

    // drawGradientRings();

    // drawGradientStrips();

    // drawGradientWaves();

    // drawOffsetGradientSquares();

    drawCenteredGradientSquares();

}

​

function drawCenteredGradientCircles() {

  perSide = 1;

  inc = windowHeight / perSide;

  pointsPerFrame = 500;

  r = inc / 2.1;

  stroke(0, 30);

  strokeWeight(1);

  for (yi = 0; yi < perSide; yi++) {

    for (xi = 0; xi < perSide; xi++) {

      x = inc * xi + inc / 2;

      y = inc * yi + inc / 2;

      index = xi + yi * perSide;

      for (i = 0; i < pointsPerFrame; i++) {

        p = randomInCircle(x, y, r, 0.1 + index / 12.0, 0.02);

        point(p.x, p.y);

      }

    }

  }

}

​

function drawLinearGradientCircles() {

  perSide = 3;

  inc = windowHeight / perSide;

  pointsPerFrame = 500;

  r = inc / 2.1;

  stroke(0, 30);

  minWeight = 0.5;

  for (yi = 0; yi < perSide; yi++) {

    for (let xi = 0; xi < perSide; xi++) {

      x = inc * xi + inc / 2;

      y = inc * yi + inc / 2;

      index = xi + yi * perSide;

      for (i = 0; i < pointsPerFrame; i++) {

        p = linearInCircle(x, y, r, 1 + index * 0.5);

        strokeWeight(random(2.0));

        point(p.x, p.y);

      }

    }

  }

}

​

function linearInCircle(x, y, r, power) {

    inCircle = false;

    while (!inCircle) {

        thisX = random(x - r, x + r);

        thisY = y - r + pow(random(1), power) * r * 2;

        if (dist(thisX, thisY, x, y) < r) {

            return createVector(thisX, thisY);

        }

    }

}

​

function drawGradientRings() {

  rings = 10;

  margin = 5;

  minRadius = windowHeight / 30;

  maxRadius = windowHeight / 2 - margin * 2; 

  radiusRange = maxRadius - minRadius;

  perRing = radiusRange / rings;

    stroke(0, 60);

  for (i = 0; i < rings; i++) {

    baseRadius = minRadius + perRing * i;

    thisMaxRadius = baseRadius + perRing;

    ringArea = PI * thisMaxRadius * thisMaxRadius - PI * baseRadius * baseRadius; // scale number of points to ring area (bigger rings need more points)

    perFrame = int(ringArea / 50); 

    for (points = 0; points < perFrame; points++) {

      initAngle = 4 * i * 2 * PI / rings;

      rand = random(1);

      r = minRadius + perRing * i + perRing * rand;

      angle = initAngle + 2 * PI * sqrt(random(1));

      p = p5.Vector.fromAngle(angle).mult(r).add(createVector(windowHeight / 2, windowHeight / 2));

      point(p.x, p.y);

    }

  }

}

​

function drawGradientStrips() {

  strips = 10;

  margin = 25;

  inc = (windowHeight - margin * 2) / strips;

  perFrame = 1000;

    stroke(0, 60);

  for (xi = 0; xi < strips; xi++) {

    x = margin + xi * inc;

    x2 = x + inc;

    upsideDown = xi % 2 == 0;

    for (points = 0; points < perFrame; points++) {

      rand = pow(random(1), 0.1 + xi * 0.5 / strips); // sharper falloff toward the left

      y = upsideDown ? margin + rand * (windowHeight - margin * 2) : windowHeight - margin - rand * (windowHeight - margin * 2);

      p = createVector(random(x, x2), y);

      strokeWeight(random(2));

      point(p.x, p.y);

    }

  }

}

​

function drawGradientWaves() {

  margin = 10;

  waves = 6;

  stroke(0, 30);

  noFill();

  initAngle = 0.0;

  angleInc = 1.3;

  freq = 0.7;

  waveAmp = (windowHeight - margin * 2.0) / waves;

  // it would be way more efficient to precalculate the sine waves for each x value

  // but I wanted to keep everything in one draw method

  for (waveCount = 0; waveCount < waves - 1; waveCount++) {

    yBase = margin + waveCount * waveAmp;

    yBase2 = margin + (waveCount + 1) * waveAmp;

    for (i = 0; i < windowHeight; i++) {

      cx = map(i, 0, windowHeight, 0, 2 * PI);

      cy = sin(initAngle + cx * freq);

      cy2 = sin(initAngle + angleInc + cx * freq);

      p = createVector(i, map(cy, -1, 1, yBase, yBase + waveAmp));

      p2 = createVector(i, map(cy2, -1, 1, yBase2, yBase2 + waveAmp));

      plot = p5.Vector.lerp(p, p2, sqrt(random(1)));

      strokeWeight(random(2));

      point(plot.x, plot.y);

    }

    initAngle += angleInc;

  }

}

​

function drawOffsetGradientSquares() {

  perSide = 5;

  margin = 10;

    stroke(0, 30);

  inc = (windowHeight - margin * 2) / perSide;

  perFrame = 500;

  for (yi = 0; yi < perSide; yi++) {

    for (xi = 0; xi < perSide; xi++) {

      xBase = margin + xi * inc;

      yBase = margin + yi * inc;

      for (points = 0; points < perFrame; points++) {

        x = xBase + inc * pow(random(1), 1.0 / (xi + 2));

        y = yBase + inc * pow(random(1), 1.0 / (yi + 2));

        strokeWeight(random(2));

        point(x, y);

      }

    }

  }

}

​

function drawCenteredGradientSquares() {

  perSide = 1;

  margin = 10;

  stroke(0, 30);

  // noStroke();

  // fill(0, 30);

  inc = (windowHeight - margin * 2) / perSide;

  perFrame = 500;

  for (yi = 0; yi < perSide; yi++) {

    for (xi = 0; xi < perSide; xi++) {

      xBase = margin + xi * inc;

      yBase = margin + yi * inc;

      index = xi + yi * perSide;

      for (points = 0; points < perFrame; points++) {

        x = xBase + random(inc);

        y = yBase + random(inc);

        distanceFromSide = min(x - xBase, min(xBase + inc - x, min(y - yBase, yBase + inc - y)));

        distanceF = pow(distanceFromSide / (inc / 2), 0.5 + index * 0.15);

        strokeWeight(1.5 - 1.5 * distanceF);

        point(x, y);

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

      }

    }

  }

}

​

function randomInCircle(x, y, r, power, fuzz) {

  return p5.Vector.random2D().mult((r + r * random(fuzz)) * pow(random(1), power)).add(createVector(x, y));

}

​

​