As computing becomes more ubiquitous in our objects, designers need to be more aware of how to design meaningful interactions into electronically enhanced objects. At the University of Washington, a class of junior Interaction Design majors is exploring this question. These pages chronicle their efforts.

Friday, April 5, 2019

Rectangles and Vanishing Lines

Here is the original code:

size(640, 360);
background(0);

int gridSize = 40;

for (int x = gridSize; x <= width - gridSize; x += gridSize) {
  for (int y = gridSize; y <= height - gridSize; y += gridSize) {
    noStroke();
    fill(255);
    rect(x-1, y-1, 3, 3);
    stroke(255, 100);
    line(x, y, width/2, height/2);
  }
}

Here is my remixed code:

void setup(){
size(640, 360);
background(255);

int gridSize = 60;
int halfGrid = 30;
int fullGrid = 90;
}
void draw(){

 int gridSize = 60;
 int halfGrid = 30;
 int fullGrid = 90;

  background(0);
  rect(mouseX, mouseY, 15,15);
  line(mouseX + 15/2, mouseY + 15/2, width/2, height/2);

  for (int x = gridSize; x <= width - gridSize; x+= gridSize) {
  for (int y = gridSize; y <= height - gridSize; y += gridSize) {
    noStroke();
    fill(0,255,255);
    rect(x , y , 15, 15);
    stroke(255, 45, 10);
    line(x+15/2, y+15/2, width/2, height/2); 
  }
  }

//failed attempts at other experiments:
// here I was trying to add more rectangles in between the current animation that could shift together along x axis
  for (int x = fullGrid; x<= width + halfGrid ; x += gridSize) { //not sure why it stops making rectangles in the middle here
  for (int y = fullGrid; x<= height - fullGrid; x += gridSize){  // also not sure why it doesn't go down y axis here
    fill(255, 0, 0);
    rect(x, y, 20, 20);
 
  }
  }
}

What I changed:
I was able to change the colors, sizes, whereabouts, and strokes of the rectangles in the original code, as well as add my own rectangle attached to a line that would follow the mouse around. I tried and failed to add another section of rectangles (the red ones) that would appear in between the blue rectangles and be able to have all of them slide together along the x axis. However, I couldn't even get the rectangles to go across the whole width I wanted.

No comments:

Post a Comment