CSS

let w = 800;
let h = 800;
let slice = 17;

let spacing;
let rand = 10; // higher is more irregular, lower is more regular
let conc = 5; // number of shapes drawn in each cell
let inner = false; // is the most inner shape drawn?
let thresh = 0.35; // number out of 1 that sets the threshhold for the random number generator (0.0-1.0) for whether a shape is drawn or not.

function setup() {
  createCanvas(w, h);
  spacing = width / slice;
  noFill();
}

function draw() {
  background(255);

  //step 1 how to slice up grid
  //     line(100,0,100,height);
  //     line(100*2,0,100*2,height);
  //     line(100*3,0,100*3,height);

  //     line(0,100,width,100*2);
  //     line(0,100*2,width,100*2);
  //     line(0,100*3,width,100*3);

  //step 2 slice up grid but with for loop

  // for(i=1;i<slice+1;i++){
  //   line(i*spacing,0,i*spacing,height);
  //   line(0,i*spacing,width,i*spacing);
  // }

  //step 3 draw top row of quads with random verteces

  //     for (i = 0; i < slice; i++) {
  //       let x1 =  i * spacing + random(rand);
  //       let y1 =  0 + random(rand);
  //       let x2 =  i * spacing + spacing + random(rand);
  //       let y2 =  0 + random (rand);
  //       let x3 =  i * spacing + spacing + random(rand);
  //       let y3 =  0 + spacing + random (rand);
  //       let x4 =  i * spacing + random (rand);
  //       let y4 =  0 + spacing  + random(rand)
  //       quad(x1, y1, x2, y2, x3, y3, x4, y4);
  //     }

  //step 4 nested for loop -- draw full grid of quads. Wherever there was a zero above, replace it with d * spacing

  // for (d = 0; d < slice; d++){
  //     for (i = 0; i < slice; i++) {
  //       let x1 =  i * spacing + random(rand);
  //       let y1 =  d * spacing + random(rand);
  //       let x2 =  i * spacing + spacing + random(rand);
  //       let y2 =  d * spacing + random (rand);
  //       let x3 =  i * spacing + spacing + random(rand);
  //       let y3 =  d * spacing + spacing + random (rand);
  //       let x4 =  i * spacing + random (rand);
  //       let y4 =  d * spacing  + spacing  + random(rand)
  //       quad(x1, y1, x2, y2, x3, y3, x4, y4);
  //     }
  // }

  // step 5 create concric effect. Nest a for loop inside the nested for loop. Create the inc variable that scales our verteces
  // for (d = 0; d < slice; d++){
  //     for (i = 0; i < slice; i++) {
  //       let x1 =  i * spacing + random(rand);
  //       let y1 =  d * spacing + random(rand);
  //       let x2 =  i * spacing + spacing + random(rand);
  //       let y2 =  d * spacing + random (rand);
  //       let x3 =  i * spacing + spacing + random(rand);
  //       let y3 =  d * spacing + spacing + random (rand);
  //       let x4 =  i * spacing + random (rand);
  //       let y4 =  d * spacing  + spacing  + random(rand)

  //       for (c = 0; c < conc+inner; c++) {
  //         let inc = ((spacing/2) / conc) * c;

  //         quad(
  //           x1 + inc,
  //           y1 + inc,
  //           x2 - inc,
  //           y2 + inc,
  //           x3 - inc,
  //           y3 - inc,
  //           x4 + inc,
  //           y4 - inc
  //         );
  //       }
  //     }
  //   }

  //   //step 6 randomize all verteces while encouraging increasingly smaller squares

  //   for (d = 0; d < slice; d++) {
  //     for (i = 0; i < slice; i++) {
  //       for (c = 0; c < conc + inner; c++) {
  //         let inc = (spacing / 2 / conc) * c;

  //         let x1 = i * spacing + random(rand);
  //         let y1 = d * spacing + random(rand);
  //         let x2 = i * spacing + spacing + random(rand);
  //         let y2 = d * spacing + random(rand);
  //         let x3 = i * spacing + spacing + random(rand);
  //         let y3 = d * spacing + spacing + random(rand);
  //         let x4 = i * spacing + random(rand);
  //         let y4 = d * spacing + spacing + random(rand);

  //         quad(
  //           x1 + inc,
  //           y1 + inc,
  //           x2 - inc,
  //           y2 + inc,
  //           x3 - inc,
  //           y3 - inc,
  //           x4 + inc,
  //           y4 - inc
  //         );
  //       }
  //     }
  //   }

  //   step 7 // introduce random choice to draw or not draw any given quad
  for (d = 0; d < slice; d++) {
    for (i = 0; i < slice; i++) {
      for (c = 0; c < conc + inner; c++) {
        let roll = random(1); // roll variable is like a 100 sided die that determines whether the shape is drawn or not. compared to the thresh variable that can be adjusted in the global variables above.

        if (roll > thresh) {
          let inc = (spacing / 2 / conc) * c;

          let x1 = i * spacing + random(rand);
          let y1 = d * spacing + random(rand);
          let x2 = i * spacing + spacing + random(rand);
          let y2 = d * spacing + random(rand);
          let x3 = i * spacing + spacing + random(rand);
          let y3 = d * spacing + spacing + random(rand);
          let x4 = i * spacing + random(rand);
          let y4 = d * spacing + spacing + random(rand);

          quad(
            x1 + inc,
            y1 + inc,
            x2 - inc,
            y2 + inc,
            x3 - inc,
            y3 - inc,
            x4 + inc,
            y4 - inc
          );
        }
      }
    }
  }

  noLoop();
}

let bg;
let fg;
let x = 200; // declare x w. starting point

let y = 200; // declare y. w. starting point

let step = 100; // maximum step distance
let numPoints = 1000;

function setup() {
  createCanvas(400, 400);
  noLoop();
  noFill();
  strokeWeight(2);

  bg = random(0, 100);
  fg = random(200, 255);
}

function draw() {
  background(bg);
  stroke(fg);

  beginShape();
  for (let i = 0; i < numPoints; i++) {
    x += random(-step, step);
    x = constrain(x, 0, width);
    y += random(-step, step);
    y = constrain(y, 0, height);

    curveVertex(x, y);
  }
  endShape();
}

let displacement = 2;

function setup() {
  createCanvas(400, 400);
  noLoop();
  rectMode(CENTER); // changes how squares / rects are drawn. it interprets x and y as the center.
}

function draw() {
  background(220);
  for (let y = 0; y < height; y += 40) {
    for (let x = 0; x < width; x += 40) {
      let xOffset = random(-displacement, displacement);
      let yOffset = random(-displacement, displacement);
      for (let i = 0; i < 5; i++) {
        square(x + xOffset, y + yOffset, 40 - i * 10);
      }
    }
  }
}

let noiseScale = 0.002;
let bgRes = 10; // number of pixels in each strip of background hombre
let fgVerts = 5; // number of vertices in foreground shape
let numFgShapes = 50; // number of shapes in the foreground
let fgMargin = 100; // number of pixels at top bottom left right

function setup() {
  createCanvas(800, 400);
  colorMode(HSB); // HSB vs RGB
  noLoop();

  noiseSeed(28); // noiseSeed() or randomSeed() are how we *lock in* variations
  randomSeed(3234234);
}

function draw() {
  // background
  strokeWeight(bgRes); // each line has a thickness of the bgRes variable
  for (let x = 0; x < width * 2; x += bgRes) {
    let n = noise(x * noiseScale); // noise() returns a value between 0 - 1
    stroke(n * 360, 30, 100); // HSB color: hue is color in a range from   0 - 360, saturation, brightness
    line(x, 0, x - width, height);
  }

  noStroke();

  for (let j = 0; j < numFgShapes; j++) {
    noFill();
    stroke(j * 5 + 75, 75, 100);
    // draws foreground shape
    beginShape();
    for (let i = 0; i < fgVerts; i++) {
      curveVertex(
        random(fgMargin, width - fgMargin),
        random(fgMargin, height - fgMargin)
      );
    }
    endShape();
  }
}

let spacing;
const num = 100;

function setup() {
  createCanvas(400, 400);
  spacing = width / num;
}

function draw() {
  background(255);
  let jitter = 0;
  let topJit = 0;
  let botJit = 0;
  for (let i = 0; i < num; i++) {
    //  line(i*spacing,0,i*spacing,height);
    line(
      i * spacing + topJit,
      0 + jitter,
      i * spacing + botJit,
      height - jitter
    );
    jitter = jitter + random(-10, 10); // change these values to see different tendencies in the visua result
    topJit = topJit + random(-5, 5); // change these values to see different tendencies in the visua result
    botJit = botJit + random(-2.5, -2.5); // change these values to see different tendencies in the visua result
  }
  noLoop();
}

const numSquares = 17;
let size;
const margin = 20; // margin size on left and right in pixels
let offset;
const conSquares = 5; // number of squares in each cell of the grid
let conInc; // pix incrementing value for shrinking squares
const t = 5; // probability out of 20 that a square is drawn

function setup() {
  stroke(0.5);
  createCanvas(700, 700);
  size = (width - margin * 2) / numSquares; // size = total width / number of squares
  offset = size / 2 + margin;
  noFill();
  rectMode(CENTER);
  conInc = size / conSquares;
}

function draw() {
  background(255);

  let jitter = 0;
  for (let y = 0; y < numSquares; y++) {
    for (let x = 0; x < numSquares; x++) {
      for (let s = 0; s < 5; s++) {
        let a = random(20);
        if (a > t) {
          square(
            jitter + offset + size * x,
            jitter + offset + y * size,
            size - s * conInc
          ); // try deleting one of the jitter modifiers and gettign a different result
        }
        jitter += random(-10, 10); // change this value.
      }
    }
  }
  noLoop();
}

let res = 10;
let w; // width of our squares

function setup() {
  createCanvas(400, 400);
  noStroke();
  w = width / res;
  randomSeed(7); // Use this function to "lock in" the variation your randomness generates. Change this number to experiment with different variations. Use this in your sketch to find the variation you want to use for your project.
}

function draw() {
  for (x = 0; x < res; x++) {
    for (y = 0; y < res; y++) {
      let c = random(255);

      fill(c);
      square(x * w, y * w, w);
    }
  }

  noLoop();
}

let size = 200;
let spacing = 2;
let drift = 0;
let driftStep = 10;
let drawMode = 0; // mode 0 is fill and mode 1 is stroke

function setup() {
  createCanvas(800, 800);
  noLoop();
  noStroke();
  rectMode(CENTER);
}

function draw() {
  background(255);
  for (let y = size / 2; y < height; y += size) {
    for (let x = size / 2; x < width; x += size) {
      drift = 0;
      for (let s = 0; s < size; s += spacing) {
        let g = size / spacing;
        if (drawMode == 0) {
          fill(255 - (s / g) * 128);
        } else {
          stroke(255 - (s / g) * 128);
        }
        console.log(255 - (s / g) * 255);

        drift += random(-driftStep, driftStep);
        square(x + drift, y + drift, size - s);
      }
    }
  }
}

const numSquares = 17;
let size;
const margin = 20; // margin size on left and right in pixels
let offset;
const conSquares = 5; // number of squares in each cell of the grid
let conInc; // pix incrementing value for shrinking squares

const range = 100; // random circle range.
const leap = 10;

function setup() {
  stroke(0.5);
  createCanvas(700, 700);
  size = (width - margin * 2) / numSquares; // size = total width / number of squares
  offset = size / 2 + margin;
  noFill();
  rectMode(CENTER);

  conInc = size / conSquares;
}

function draw() {
  background(255);

  let t = range / 2; // probability out of 100 that a square is drawn
  for (let y = 0; y < numSquares; y++) {
    for (let x = 0; x < numSquares; x++) {
      for (let s = 0; s < 5; s++) {
        let a = random(range);
        if (a > t) {
          circle(offset + size * x, offset + y * size, size - s * conInc); // t
        } else {
          // t
        }
        t += random(-leap, leap); // modify t by adding or subtracting a negative between leap and negative leap
        t = constrain(t, 0, range);
      }
    }
  }
  noLoop();
}

function mousePressed() {
  loop();
}

const numSquares = 17;
let size;
const margin = 20; // margin size on left and right in pixels
let offset;
const conSquares = 5; // number of squares in each cell of the grid
let conInc; // pix incrementing value for shrinking squares
const t = 5; // probability out of 20 that a square is drawn

function setup() {
  stroke(0.5);
  createCanvas(700, 700);
  size = (width - margin * 2) / numSquares; // size = total width / number of squares
  offset = size / 2 + margin;
  noFill();
  rectMode(CENTER);

  conInc = size / conSquares;
}

function draw() {
  background(255);

  for (let y = 0; y < numSquares; y++) {
    for (let x = 0; x < numSquares; x++) {
      for (let s = 0; s < 5; s++) {
        let a = random(20);
        if (a > t) {
          square(offset + size * x, offset + y * size, size - s * conInc);
        }
      }
    }
  }
  noLoop();
}

let r;
let g;
let b;
let w = 10;

function setup() {
  createCanvas(800, 800);
  strokeWeight(2);
}

function draw() {
  noLoop();
  background(0);

  for (let y = 20; y < height; y += 5) {
    for (let x = 20; x < width; x += 5) {
      let c = random(0, 100); // random number that determines whether color 1 or 2
      if (c > 50) {
        //  color 1
        r = random(100, 150);
        g = random(0, 50);
        b = random(200, 255);
      } else {
        // color 2
        r = random(0, 25);
        g = random(175, 225);
        b = random(150, 200);
      }
      stroke(r, g, b);
      line(x, y, x + w, y + w);
    }
  }
}

let size = 4; // size of circle
let r = 128; // right in the middle 0-255
let step = 60; // random step size;

function setup() {
  createCanvas(800, 800);
  noLoop();
}

function draw() {
  background(0);
  for (let x = size / 2; x < width; x += size) {
    for (let y = size / 2; y < height; y += size) {
      r += random(-step, step);
      //code the keeps this within 0 and 255
      r = constrain(r, 0, 255);
      // r = random(255);
      fill(r);
      circle(x, y, size);
      // console.log(r);
    }
  }
}