ICM 3: ALGORHYTHMIC DESIGN

In general this week, you should work with rule-based animation, motion, and interaction. You can use the ideas below or invent your own assignment. Start by working in pairs as specified below. Can you divide an idea into two parts and combine those parts? Can you swap sketches and riff of of your partner's work? You can post together or break off and complete the assignment individually. 
Try making a rollover, button, or slider from scratch.  Later we'll look at how this compare to interface elements we'll get for free from the browser.
Create an algorithmic design with simple parameters. 
Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.
For our partner exercise we split the project into two pieces: control algorhythmic objects and construct slider. I worked on the algorhythmic design objects part and went through several iterations.             

Screen Shot 2017-09-23 at 3.33.22 PM.png
Screen Shot 2017-09-23 at 6.34.06 PM.png

I had the feeling that the symmetry between objects should be kept up while the positions change. So before adding a random element I wanted to keep a symmetric version stable. To achieve this I used triangles in combination with the general draw-loop to create a folding/unfolding impression.

var x;
var y;


function setup() { 
  createCanvas(400, 400);

function draw() { 
  //create a slider and tie it to mouseY to modulate frequency of shapes
  stroke(120, 180, 230, 20)
  rect(370, 50, 15, 300);
  var y1 = map(mouseY, 0, height, 45, height-100);
  fill(0,100,220,40);
  rect(370,y1,15,10);
  
  //create shapes with four symmetric triangles
    if (x < width && y > height /2 ){
      stroke(120, 180, 230, 30)
      fill( 255, 255/x+30)
      triangle(x + 20, y, y, x, x/2, x);
      triangle(width, 0, height, x, x/2,x);
      triangle(width - (x + 20), height - y, height - y, width - x, width - x/2, width - x);
      triangle(0, height, 0, width - x, width - x/2,width - x);
      x+= 1*y1/100
    }
    else if (y < height){
      x = 0;
      y += 10;
    }
    else{
        background(255, 10);
      x = -20;
      y = 0;
    }
}
My project partner Ella and I met to discuss the different iterations and decided to use the blue shapes as our main sketch. Ella coded the slider and positioned it on the right hand side of the sketch. It increases the frequency of the unfolding / folding loop when the slider is moved up and down. 

 

I played a lot with this version and realized that for real algorhythmic design we should have a random element in there - so that the outcome is different each time the shapes go into a new round. Therefore I added a few lines to the sketch with a random variable tied to values in the shapes of the triangle to the code. I moved the slider in a central position, modified the color and added a fading effect with a counter and a slower refresh rate of a translucent background. The goal was to achieve a late 80s neon glow aesthetics inspired by movies like "Tron", "Drive" or "Blade Runner" with colors bleeding into each other. The working title of this was "Universal Consciousness" named after an album by Alice Coltrane.