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 3, 2016

Nicola's Hue Experiment


Original program
My version



I played around Processing's Hue example to re-acquaint myself with the Processing environment and language. This program draws a 20px wide box at the x-position of the cursor (mouseX) and fills it with a color (HSB mode) according to the y-position of the cursor (mouseY).

I changed it to draw 1px wide boxes at the entire area's width minus mouseX (so it does not directly follow the cursor), and the height of the lines shrink and shrink and then grow to full height again.

Here is the code with my edits highlighted:

int barWidth = 1;
int lastBar = -1;
int count = 1;

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

void draw() 
{
  int whichBar = width - (mouseX / barWidth);
  if (whichBar != lastBar) {
    int barX = whichBar * barWidth;
    fill(mouseY, height, height);
    rect(barX, count/2, barWidth, height-count);
    lastBar = whichBar;
  }
  if (count <= height) {
    count++;
  } else {
    count = 1;
  }
}

No comments:

Post a Comment