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.

function setup() {
  createCanvas (400, 400);
  fill(255, 255, 255);
  smooth();
  noStroke();
}
 
 
function draw() {
 
  background(255, 255, 255);
  fill(0, 0, 0);
 
  var xPos;
  var yPos;
  var circleSize = 5;
  var circleDistance = 20;
 
  //defines the x-coordinate 
  for (var x=10; x<=width; x=x+circleDistance) {
    //defines the y-coordinate   
    for (var 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);
    }
  }
}

Posted in