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.

Sunday, April 7, 2019

Horizontal Hues


This original code allows processing to generate a series of vertical rectangles depends on the width of the rectangle and the width of the screen. By tracking the change of X coordinate of the mouse, it generates new rectangles with different hues and then overlay on top of the older ones.

In my modified code,  I changed the background color from Black to white by alternating the RBG value. I  also modified the code to generate horizontal rectangles instead of vertical ones. Moreover, it now tracks the Y coordinate of the mouse and populates hue values base on that coordinate.


Modified Code: 

// Change from int barWidth to barHeigth, and change the int to a value that can be divided by the screen height. 
int barHeight = 72;
int lastBar = -1;

void setup()
{
  size(640, 360);
// change HSB ( Hue, Saturation, and Brightness) of the color now depending on canvas width
  colorMode(HSB, width, width, width); 
  noStroke();
// background color change from black to white 
  background(255);
}

void draw()
{
//change from mouseX to mouseY, now the int whichBar is depended on the Y coordinate of the mouse.
  int whichBar = mouseY / barHeight;
  if (whichBar != lastBar) {
    int barY = whichBar * barHeight;
// change fill mouseX to mouseY now the hue will depend on the Y coordinate of the mouse
    fill(mouseY, width, width);
//change the rects from vertical to horizontal  
    rect(0, barY, width, barHeight);
    lastBar = whichBar;
  }
}


Original Code: 

int barWidth = 20;
int lastBar = -1;

void setup() 
{
  size(640, 360);
  colorMode(HSB, height, height, height);  
  noStroke();
  background(0);
}

void draw() 
{
  int whichBar = mouseX / barWidth;
  if (whichBar != lastBar) {
    int barX = whichBar * barWidth;
    fill(mouseY, height, height);
    rect(barX, 0, barWidth, height);
    lastBar = whichBar;
  }
}

No comments:

Post a Comment