ICM Blog Post 3

Our goal for week 3 was to work with rule-based animation, motion, and interaction. I started by creating an algorithmic design with simple parameters. I did little to no planning, creating random lines within two for loops until I created something I liked. I decided to add a random element that changes every time the code ran, which would be an ellipse that changed position depending on what parameter a random number fit into. Below, to the left is a copy of the code used to create this sketch and to the right is one instance of my sketch. Click here to view my sketch.

function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);
  for (var i = 0; i < height; i += 30) {
    for (var j = 0; j < width; j += 30) {
      line(i, j, i + 10, j + 10);
      line(i + 10, j + 10, i + 10, j + 25);
      line(i + 5, j + 10, i - 5, j + 15);
      line(i-5,j+15,i-10,j-10);
      if (random(1)>.5) {
        ellipse(i-3,j-7,2,2);
      } else {
        ellipse(i+2,j-4,4,3);
      }
    }
  }
  noLoop();
}
Screen Shot 2018-09-24 at 8.41.54 PM.png

I then made a very simple button, using the canvas as the button, which you can view by clicking here. A copy of the code used to create the button is right below.

let button = false;
function setup() {
  createCanvas(200, 200);
}
function draw() {
  if (mouseIsPressed) {
    button = true;
  } else {
    button = false;
  }
  if (button) {
    background(200);
  } else {
    background(100);
  }
}

I decided to use the mouseIsPressed function in order to tie the button together with the algorithmic design. I wanted to keep it simple, so as the mouse is pressed, a random number is generated between 0 and 255 for both the red, blue, and green value. The red and blue values change the color of the background and the green value changes the color of the fill inside the small circles. As you keep pressing the mouse, the background and circle colors keep changing. When you undress the mouse, the colors stay to the last randomly generated values. Below is a copy of the code and click here to view my sketch.

let button = false;
let r, b, g;
function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);
  if (mouseIsPressed) {
    button = true;
    r = random(255);
    b = random(255);
    g = random(255);
  } else {
    button = false;
  }
  if (button == true) {
    background(r, 0, b, 50);
    fill(r, g, 0);
  } else {
    background(r, 0, b, 50);
  }
  for (var i = 0; i < height; i += 30) {
    for (var j = 0; j < width; j += 30) {
      line(i, j, i + 10, j + 10);
      line(i + 10, j + 10, i + 10, j + 25);
      line(i + 5, j + 10, i - 5, j + 15);
      line(i - 5, j + 15, i - 10, j - 10);
      if (random(1) > .5) {
        ellipse(i - 3, j - 7, 2, 2);
      } else {
        ellipse(i + 2, j - 4, 4, 3);
      }
    }
  }
}
ICMOlivia KungICM