Assignment: Order vs. disorder

Make a composition with controlled randomness which depicts “order” when the mouseX is on the left side of the canvas, and chaos (actually randomness) when it is on the right side. The degree of order/chaos should vary gradually with the position of the mouse.

.Use for loops
.Check the example below for reference but don’t make a variation of it. The grade will be mostly based on the originality of your sketch.
.Try using noise instead of random.

This is a simple, boring example.

void setup() {
  size (400, 400);
  fill(255, 255, 255);
  smooth();
  noStroke();
}


void draw() {

  background(255, 255, 255);
  fill(0, 0, 0);

  float xPos;
  float yPos;
  int circleSize = 5;
  int circleDistance = 20;

  //defines the x-coordinate 
  for (int x=10; x< =width; x=x+circleDistance) {
    //defines the y-coordinate   
    for (int y=10; y<=height; y=y+circleDistance) {

      //the position is mostly determined by a grid but it also
      //has a component of randomness
      xPos = x + random(mouseX/50);
      yPos = y + random(mouseX/50);

      //80 is a "magic number" I figured out by trial and error
      //it reduces the amount of randomness

      //you can use the functions map and constrain for similar purposes

      ellipse(xPos, yPos, 10, 10);
    }
  }
}