Web 1.0 Wrap

let w = 10;
let s = 12;
let margin = 20;
let r = 127;
let g = 127;

function setup() {
  createCanvas(400, 400);
  noStroke();
  noLoop();
}

function draw() {
  background(220,0,100);
  
  let index = 0;
  for (let x = 20; x < width - margin - w; x += w + s) {
    
    for (let y = 20; y < height- margin - w; y += 20) {
      
      
      // % modulo ! remainder of a division operatio 
    
      w+= random(-5,5);
      if(w > 20){
        w = w;
      }
      if (w < 0){
        w = 0;
      }
      
      
      if (index % 2){
        fill(r,0,100);
      }
      else {
        fill(0,g,200);
      }
      
      let ran = random(100);
      if (ran>50){
          r+= random(5,5);
         r = constrain(r, 100, 150);
          }
      else{
         g+=random(5,5);
        g = constrain(g,100,200);
      }
      
    
      
      
      if (y > height/4 ){
      square(x, y, w);    
          }
      else {
        circle(x + w/2 ,y + w/2,w)
      }
      
    }
    console.log(index);
  index++;
  }
}

let jump = 20;

function setup() {
  createCanvas(400, 400);
  noLoop();
  noFill();
}

function draw() {
  background(220);

  for (let j = 0; j < 50; j++) {
    // number of lines
    beginShape();
    let x = random(width);
    let y = random(height);
    for (let i = 0; i < 10; i++) {
      // vertex or point in the line
      x += random(-jump, jump);
      if (x > width) {
        x = width;
      }
      if (x < 0) {
        x = 0;
      }

      y += random(-jump, jump);
      if (y > height) {
        y = height;
      }
      if (y < 0) {
        y = 0;
      }
      curveVertex(x, y);
    }
    endShape();
  }
}

let margin = 11;
let xSpacing = 4;
let length = 40;
let ySpacing = length + 10;
let gs = 0; // greyscale

function setup() {
  createCanvas(400, 400);
  strokeWeight(2);
  noLoop();
  //randomSeed(50); // specify the seed with which all randomness is generated
}

function draw() {
  background(128);
  for (let y = margin; y < height - margin; y += ySpacing) {
    xSpacing = random(1, 10);
    strokeWeight(1 + xSpacing / 4);
    for (let x = margin; x < width - margin; x += xSpacing) {
      stroke(gs, 0, 100);
      length = random(30, 50);
      line(x, y, x, y + length); // x1, y1, x2,y2
      gs += random(-10, 10); // add one! gs += 1; gs = 1 + 1;
      if (gs > 255) {
        // if conditions inside the parentheses are met
        // this code runs
        gs = 255;
      }
      if (gs < 0) {
        gs = 0;
      }
    }
  }
}

let numCells = 20;

function setup() {
  createCanvas(600, 600);
  noLoop();
  noStroke();
}

function draw() {
  background(220);
  let w = width/numCells;
  let g = 128;
  for(let j = 0; j<numCells;j++){
     for (let i = 0; i < numCells; i++) {
      let r = random(-10,10);
       g += r;
       fill(g)
      square(i * w, j* w, w);
  }
}
  
 
  
}

let numCells = 50; // number of cells in the row!
let noiseScale = 0.009; // zoom factor of our noise field --- (0.001-0.01)

function setup() {
  createCanvas(600, 600);
  noLoop(); // running this perlin noise algorithm is expensive! 
  noStroke();
  //noiseSeed(1);// randomSeed() but for noise;
  console.log(600*600)
}

function draw() {
  background(220);
  let w = width/numCells;
  let g = 128;
  for(let j = 0; j<numCells;j++){
     for (let i = 0; i < numCells; i++) {
      let n = noise(i*noiseScale,j*noiseScale); // noise generates numbers between 0-1. first param is x, second is y
       fill(n*255); // fill expects 0-255
      square(i * w, j* w, w);
  }
}
  
 
  
}

let jitter = 80; // control the jump size of our random walk
let numSteps = 20; // number of steps in the walk

let noiseScale = 0.009;// zoom factor for our noise field

function setup() {
  createCanvas(700, 700);
  noLoop();
  // noiseSeed(10);
  // randomSeed(6);
}

function draw() {
  background(255);
  
  let x = width/2;
  let y = height/2;
  beginShape();
  for(let i = 0;i<numSteps;i++){
    let n = noise(x*noiseScale,y*noiseScale); // noise generates values between 0 and 1
    x+=random(-jitter,jitter);
    y+=random(-jitter,jitter);
    curveVertex(x,y);
    fill(0,n*255);
    circle(x,y,n*jitter);
  }
  noFill();
  endShape();
  
}

let jitter = 20; // control the jump size of our random walk
let numSteps = 200; // number of steps in the walk

let noiseScale = 0.009;// zoom factor for our noise field
let maxW = 30; // max width of our circles
let maxOpacity = 100; // max opacity of our circles 

function setup() {
  createCanvas(700, 700);
  noLoop();
  // noiseSeed(10);
  // randomSeed(6);
}

function draw() {
  background(255);
  
  let x = width/2;
  let y = height/2;
  beginShape();
  for(let i = 0;i<numSteps;i++){
    let n = noise(i*noiseScale); // noise generates values between 0 and 1
    x+=random(-jitter,jitter);
    y+=random(-jitter,jitter);
    curveVertex(x,y);
    fill(0,n*maxOpacity);
    noStroke();
    circle(x,y,n*maxW);
  }
  stroke(0);
  noFill();
  endShape();
  
}

let jitter = 20; // control the jump size of our random walk
let numSteps = 200; // number of steps in the walk
let numLines = 5; // number of lines 

let noiseScale = 0.1; // zoom factor for our noise field
let maxW = 30; // max width of our circles
let maxOpacity = 100; // max opacity of our circles

function setup() {
  createCanvas(700, 700);
  noLoop();
   noiseSeed(10);
   randomSeed(6);
  
  
}

function draw() {
  background(255);

  for (let j = 0; j < numLines; j++) {
    let x = random(width);
    let y = random(height);
    beginShape();
    for (let i = 0; i < numSteps; i++) {
      let n = noise(i * noiseScale, j*noiseScale*10); // noise generates values between 0 and 1
      x += random(-jitter, jitter);
      y += random(-jitter, jitter);
      curveVertex(x, y);
       console.log(j,n);
      fill(0,n*128,255-n*128/2, n * maxOpacity);
      noStroke();
      circle(x, y, n * maxW);
    }
    stroke(0);
    noFill();
    endShape();
  }
}

let margin = 50;
let xOffset = 10;
let yOffset = 15;

let xJitter1 = 0;
let xJitter2 = 0;
let yJitter1 = 0;
let yJitter2 = 0;
let jitter = 0.01;

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

function draw() {
  background(220);
  for (let y = margin; y < height - margin; y += yOffset) {
    for (let x = margin; x < width - margin; x += xOffset) {
      xJitter1 += random(-5,5);
          xJitter2 += random(-5,5);
          yJitter1 += random(-5,5);
          yJitter2 += random(-5,5);
      let x1 = x + xJitter1;
      let y1 = y + yOffset + yJitter1;
      let x2 = x + xOffset + xJitter2;
      let y2 = y + yJitter2;
      line(x1, y1, x2, y2);
    }
  }
}

let margin = 50;
let xOffset = 10;
let yOffset = 20;

let xJitter1 = 0;
let jitter = 20;

let noiseScale = 0.004; 

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

function draw() {
  background(220);
  for (let y = margin; y < height - margin; y += yOffset) {
    for (let x = margin; x < width - margin; x += xOffset) {
      let w = noise(x*noiseScale,y*noiseScale) * jitter; // 1, 2, or 3 variables
  // noise generates values between 0 and 1
     
      let r = random(40,70);
      let g = random (200,255);
      let b = random (150, 255);
      
      stroke(r,g,b);
      
      let sw = random(0,10);
      
      strokeWeight(sw);
      
      circle (x,y,w)

 
    }
  }
}

let margin = 100;
let xOffset = 20;
let yOffset = 5;
let jitter = 6;

let noiseScale = 0.009;

let xNoise = 0; 

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

function draw() {
   background(128,0,200);


  for (let x = margin; x < width - margin; x += xOffset) {
    let r = 128;
    for (let y = margin; y < height - margin; y += yOffset) {
     let n = noise(x * noiseScale, y * noiseScale) 
      let w = n * xOffset;
      // let w = xOffset-2
      // noise outputs values between 0 and 1
      fill(r, 0, 200);
      
       xNoise += map(n,0,1,-jitter,jitter);
      
      circle(x + xNoise, y, w);
      r += random(-jitter, jitter);
      
    }
  }
}

let num = 100; // number of circles in a row
let spacing; // declare but not define
// - minus
function setup() {
  createCanvas(400, 400);
  spacing = width / num;
  noLoop();
  noStroke();
}
function draw() {
  background(0);
  // index based approacch
  // j keeps track of our horizontal rows
  for (let j = 0; j < num; j++) {
    // i keeps track of our vertical columns
    let vShift = 0;
    let ran = random(0, 100);
    if (ran > 50) {
      vShift = random(-20, 20);
    }
    for (let i = 0; i < num; i++) {
      let r = random(0, 100);
      if (r > 60) {
        circle(
          random(-10, 10) + i * spacing + spacing / 2,
          j * spacing + spacing / 2 + vShift,
          spacing
        );
      }
    }
  }
}

let num = 50;
let spacing;
let noiseScale = 0.02;
let w; // width of square

function setup() {
  createCanvas(600, 600);
  spacing = width / num;
  w = spacing;
  noLoop();
  noStroke();
}

function draw() {
  background(0);
  for (j = 0; j < num; j++) {
    for (let i = 0; i < num; i++) {
      //  fill(random(0,255));
      // noise by default gives values between 0 and 1
      let n = noise(i * noiseScale, j * noiseScale);
      // fill(n * 255);
      square(w / 2 + spacing * i, w / 2 + spacing * j, w * n);
    }
  }
}

let numCols = 200; // number of columns
let numRows = 40; // number of rows
let xSpacing, ySpacing;
let noiseScale = 0.03;
// - minus
function setup() {
  createCanvas(400, 400);
  xSpacing = width / numCols;
  ySpacing = height / numRows;
  noLoop();
}
function draw() {
  background(255);
  for (let j = 0; j < numRows; j++) {
    for (let i = 0; i < numCols; i++) {
      let n = noise(i * noiseScale, j * noiseScale);
      let x1 = xSpacing * i;
      let y1 = ySpacing * j + n * ySpacing;
      let x2 = xSpacing * i;
      let y2 = ySpacing * (j + 1) - n * ySpacing;
      line(x1, y1, x2, y2);
    }
  }
}

let ySpacing = 25;
let xSpacing = 35;
let startW = 50; // width of first square

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

function draw() {
  background("#F0D3F7");
  stroke("#B98EA7");
  fill("#A57982");

  let i = 0; // index variable
  for (let y = 10; y < height; y += ySpacing) {
    for (let x = 0; x < width; x += xSpacing) {
      let sw = random(1, 20); // variable to hold a random strokeWeight
      strokeWeight(sw);

      square(x, y, startW - i * 0.3); // x, y, w // square or a rectangle -- x and y are top left point
      i++; // the same as writing 'i=i+1' or 'i+=1'
    }
  }
}

let ySpacing = 25;
let xSpacing = 35;
let startW = 50; // width of first square

function setup() {
  createCanvas(600, 600);
  noLoop();
  noStroke();
}

function draw() {
  background("#08010A");

  let i = 0; // index variable
  for (let y = 10; y < height; y += ySpacing) {
    for (let x = 0; x < width; x += xSpacing) {
      let r = random(100, 150);
      let g = 100;
      let b = random(0, 255);
      let a = random(0, 255);
      fill(r, g, b, a);

      square(x, y, startW - i * 0.3); // x, y, w // square or a rectangle -- x and y are top left point
      i++; // the same as writing 'i=i+1' or 'i+=1'
    }
  }
}

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);
      }
    }
  }
}

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

function draw() {
  background(220);

  for (let x = 10; x < width; x += 20) {
    for (let y = 10; y < height; y += 20) {
      let w = 20;

      let toggle = random(0, 1);
      if (toggle > 0.5) {
        circle(x, y, w); // if condition is true, run this
      } else {
        w = random(20);
        square(x, y, w); // if it is false, run this
      }
    }
  }
}

function setup() {
  createCanvas(400, 400);
  noLoop();
  noFill();
}

function draw() {
  background(220);

  for (let j = 0; j < 10; j++) {
    // number of lines
    beginShape();
    for (let i = 0; i < 10; i++) {
      // vertex or point in the line
      let x = random(width);
      let y = random(height);
      curveVertex(x, y);
    }
    endShape();
  }
}