Assignment: Order vs. Disorder + noise function

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);
        rotate(radians(rot));
        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);
        rotate(radians(rot));
        rect(0, 0, 20, 20);
        pop();
        */
        }
      }
    }
Posted in