# 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 (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.

```    var rows = 12;
var cols = 12;
var distanceX = 30;
var distanceY = 30;

function setup() {
createCanvas(400, 400);
background(0);
noStroke();
fill(255,255,255);

}

function draw() {

background(0,0,0);

for (var r = 1; r <= rows; r++) {
for (var c = 1; c <= cols; c++) {

var randomness = mouseX/60;
var randomShiftX = random(-randomness, randomness);
var randomShiftY = random(-randomness, randomness);

var x = c * distanceX + randomShiftX;
var y = r * distanceY + randomShiftY;

rect(x, y, 20, 20);

/*
//or using the push pop transformation matrix
push();
var rot = random(-randomness, randomness);
translate(x, y);
rect(0, 0, 20, 20);
pop();
*/
}
}
}```

example with noise function

```    var rows = 12;
var cols = 12;
var distanceX = 30;
var distanceY = 30;
var noiseCounter = 0;

function setup() {
createCanvas(400, 400);
background(0);
noStroke();
fill(255,255,255);

}

function draw() {

background(0,0,0);

noiseCounter += 0.1;

for (var r = 1; r <= rows; r++) {
for (var c = 1; c <= cols; c++) {

//this is just the amount the noise is amplified
var displacement = mouseX/20;

//3d the noise, a cloud-like series of values changing gradually
//noise counter is time or the 3rd dimension
//https://docs.unity3d.com/StaticFiles/ScriptRefImages/PerlinExample.png

//x and y of the noise depend on the x and y of the square
var noiseFactor = noise(r/10, c/10, noiseCounter)

//-0.5 because the noise goes from 0 to 1
randomShiftX = (noiseFactor-0.5)*displacement;
randomShiftY = (noiseFactor-0.5)*displacement;

var x = c * distanceX + randomShiftX;
var y = r * distanceY + randomShiftY;

rect(x, y, 20, 20);

/*
//or using the push pop transformation matrix
push();
var rot = random(-randomness, randomness);
translate(x, y);