let r;

​

function setup() {

  createCanvas(400, 400);

  slider = createSlider(0, 255, 30);

  slider.position(10, 410);

  frameRate(8);

}

​

function draw() {

  r = slider.value();

​

  background(220);

  noStroke();

  // SAHOVSKA TABLA

//   let d = 50;

//   let boja = true;

//   for (let x = 0; x <= 400; x += 50) {

//     for (let y = 0; y <= 400; y += 50) {

//       if (boja) {

//         fill(255);

//       } else {

//         fill(0);

//       }

//       square(x, y, d);

//       boja = !boja;

//     }

//   }

//   let fr = 25;

//   fill(255, 180, 0);

//   noStroke();

//   for (let x = 25; x <= 375; x += 50) {

//     circle(x, 25, fr);

//   }

//   for (let x = 25; x <= 375; x += 50) {

//     circle(x, 75, fr);

//   }

//   fill(0, 180, 255);

//   noStroke();

//   for (let x = 25; x <= 375; x += 50) {

//     circle(x, 325, fr);

//   }

//   for (let x = 25; x <= 375; x += 50) {

//     circle(x, 375, fr);

//   }

  // SARENI PATERN

  let d = 50;

  noStroke();

  for (let x = 0; x <= 400; x += 50) {

     for (let y = 0; y <= 400; y += 50) {

       let r = random(255);

       let g = y;

       let b = x;

       fill(r, g, b);

       square(x, y, d);

     }

  }

  // DVOSTRUKA FOR PETLJA

  // for (let x = 100; x <= 300; x += 50) {

  //   for (let y = 100; y <= 300; y += 50) {

  //     circle(x, y, r);

  //   }

  // }

  // DVOSTRUKA WHILE PETLJA

  // let x = 100;

  // while (x <= 300) {

  //   let y = 100;

  //   while(y <= 300) {

  //     circle(x, y, r);

  //     y += 50;

  //   }

  //   x += 50;

  // }

  // OBICNA WHILE PETLJA

  // let x = 100;

  // while (x <= 300) {

  //   circle(x, y, r);

  //   x += 50;

  // }

}