Chaotic order

Inspired by Max Cooper’s Order from Chaos, I explored how to represent order in apparent chaos. In Order from Chaos, Max Cooper uses raindrop sounds to create a organic rhythm by some amount of beat matching.

Similarly, I tried to position match randomly generated circles by fitting them into a grid of 40 x 40 pixels. I then further to make apparent an inherent pattern, in this case a ring. For all circles that were generated in a specific range from the center, they were colored differently and had multiple concentric circles within them. Circles that didn’t fit this criteria, were white and over time faded away, just hinting at ripples from rain.

function setup() {
   createCanvas(800, 800);
   background(255);
   noFill();
}
function draw() {
   sizechaos = random(40,60)
   randomR = random(100,255)
   randomG = random(50,100)
   randomB = random(60)
   randomX = (int(random(20))-10) * 40 
   randomY = (int(random(20))-10) * 40
   rad = sqrt(pow(randomX, 2) + pow(randomY, 2))
   if(rad < 300 && rad > 150){
      stroke(randomR, randomB, randomG)
      for(i = 0; i < sizechaos; i += 7){
         strokeWeight(2);
         background(205, 105, 102, 1);
         circle(randomX+400,randomY+400,i)
      }
   }
   else{
      strokeWeight(2);
      stroke(255)
      circle(randomX+400,randomY+400,sizechaos)
   }
}

3 responses to “Chaotic order”

kirankumar29

October 26, 2020 at 6:46 pm

This is sweet! Is it just me or is there almost a square inside the circle? can’t figure how: rad = sqrt(pow(randomX, 2) + pow(randomY, 2)) gives near straight lines, or is it because the canvas is all boxed up to begin with (excuse the novice)? I must tell you about a fascinating work of a friend creating organic rain sounds using rainfall data (Pluvial, Kerstin Ergenzinger)

Reply
1. kharevinay
  
  October 27, 2020 at 8:22 am
  
  Yes a square does emerge in the center. The following lines play a role in this:
  randomX = (int(random(20))-10) * 40
  randomY = (int(random(20))-10) * 40
  By multiplying by 40 I am creating a grid of 40 pixels wide and high. What this essentially does is ‘pixelate’ the canvas. Although the resolution of the canvas is 800 x 800, I am working with 20 x 20 grid only. Thus you can think of it like 20 x 20 image which has been scaled by 40, and this is why the inner empty circle appears to be a square. Does that make sense?
  
  Thank you for sharing that, very interesting installation.
  
  Reply
kirankumar29

October 28, 2020 at 6:43 pm

Thanks for explaining this Vinay. Yes the logic makes sense to me now.. i think. Would it be accurate to say then that, had you chosen a 1:1 scale for drawing:canvas int(random(800))-400, the result would be akin to pointillism of some sort? And the inner circle would appear more circular?

Anyway, the emergence of the square with no mention of ‘square’ in the code is what caught my attention initially. Kapila Vatsyayan’s seminal work from back in the 70s also came to mind: The Square and the Circle of Indian Arts. A fascinating cross disciplinary study of the relation of these two shapes in architecture, dance, musical rhythm and sculpture.. each discipline being a pragmatic take on the order-chaos duality.

I also found it fascinating to see how rampantly the ‘random’ function has been used in so many of our responses.. maybe a fun “conceptual coding” challenge to express chaos without that function.. you think? 😀

Reply

Chaotic order

3 responses to “Chaotic order”

Leave a Reply Cancel reply