Nested for loop-Josh Mod

// Hi Ari, putting my notes here at the top to answer your questions (FYI, some AI help here):

// Your current approach uses mouseX/cols and mouseY/rows to influence colors, which creates a somewhat limited range. 

// Here are some ways to expand the color range:

//// Option 1: Use sine waves for smooth color cycling

// fill(

//  127 + 127 * sin(frameCount * 0.01 + i * 0.1), 

//  127 + 127 * sin(frameCount * 0.02 + o * 0.1), 

//  127 + 127 * sin(frameCount * 0.03)

// );

//

//// Option 2: Use noise for organic variation

// fill(

//  noise(i * 0.1, o * 0.1, frameCount * 0.01) * 255,

//  noise(i * 0.1, o * 0.1, frameCount * 0.02) * 255,

//  noise(i * 0.1, o * 0.1, frameCount * 0.03) * 255

// );

//

//// Option 3: Combine mouse position with more randomness

//fill(

//  (mouseX % 255) + random(-50, 50),

//  (mouseY % 255) + random(-50, 50),

//  (mouseX + mouseY) % 255

//);

​

// For the second question...

// If you want the colors to be random but not change every frame (which can be visually jarring), 

// you could use a 2D array to store colors:

​

// In setup():

// let squareColors = [];

// for (let i = 0; i < cols; i++) {

//   squareColors[i] = [];

//   for (let j = 0; j < rows; j++) {

//     squareColors[i][j] = color(random(255), random(255), random(255));

//   }

// }

​

// // In draw():

// for (let i = 0; i < cols; i++) {

//   for (let o = 0; o < rows; o++) {

//     // Only change colors occasionally

//     if (random(100) < 5) { // 5% chance to change color each frame

//       squareColors[i][o] = color(random(255), random(255), random(255));

//     }

//     fill(squareColors[i][o]);

//     square(i * size, o * size, size);

//   }

// }

​

​

let cols = 15;

let rows = 15;

let size = 25;

​

//second test based on what I looked up

//let r = 255, g = 255, b = 255;

//ended up adding  = 255 to them later

​

​

//new code from jared

let color1, color2;

let squareColors; // answering your second question—for storing colors in an array

​

function setup() {

  createCanvas(cols * size, rows * size);//code from jared

  noStroke();

  squareColors = [];

for (let i = 0; i < cols; i++) {

  squareColors[i] = [];

  for (let j = 0; j < rows; j++) {

    squareColors[i][j] = color(random(255), random(255), random(255));

  }

}

}

​

// //works but not how I wanted

// function mousePressed(){

//  r = random(255);

//  g = random(255);

//  b = random(255);

// }

​

​

​

//I want to make it so whenever the mouse is moving

//the colors change and randomize

​

function draw() {

  background(0);

  for (let i = 0; i < cols; i++) {

  for (let o = 0; o < rows; o++) {

    // Only change colors occasionally

    if (random(1000) < 10) { // 1% chance to change color each frame

      squareColors[i][o] = color(random(255), random(255), random(255));

    }

    fill(squareColors[i][o]);

    square(i * size, o * size, size);

  }

}

​

  // my initial test. did not work.

  //I would like to know if this is 

  //completely wrong or misplaced in code

  // if (mouseX >= 0 && mouseX <= 800 && mouseY >= 0 && mouseY <= 800){

  //  let ("red") = random(255);

  //  let ('green') = random(255);

  //  let ("blue") = random(255);

  // }

  //ended up not needing this as well 

  //due to mouse pressed function

  // if (mouseIsPressed) {

  //  fill(r,g,b);

  // }

}