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, October 5, 2018

Changing schemes, a homage to Albers

After opening up processing and exploring the various examples provided, I stumbled upon one called “Color Variables”. It reminded me of my Albers project from last year and as I started to poke around the code I had an idea. I wanted to get a better grasp of event triggers with Processing—specifically using if statements and loops. At first, I couldn’t seem to get the code to work. Then I realized that I needed to use void draw() to run a constant loop, otherwise the if statement I wrote would never be checked after initialization. Below is my code, it uses a simple integer binary (see void mouseClicked) to check if the mouse has clicked or not, and changes the color variables accordingly. I also changed one of the shapes by changing 'rect' to 'ellipse'.

Before. This is what the original code did.


After! This is what edited my code does.

/**
 * Color Variables (Homage to Albers).
 *
 * This example creates variables for colors that may be referred to
 * in the program by a name, rather than a number.
 *
 * Edited by Jacob Elias as an exploration in Processing.
 */
int toggle = 0;
color inside = color(204, 102, 0);
color middle = color(204, 153, 0);
color outside = color(153, 51, 0);


void setup(){
  size(640, 360);
  noStroke();
  background(51, 0, 0);
}
void draw(){
if (toggle == 1) {
    inside = color(#057DBA);
    middle = color(#009BE6);
    outside = color(#0057E8);
    background (#18639D);
} else {
    inside = color(204, 102, 0);
    middle = color(204, 153, 0);
    outside = color(153, 51, 0);
    background (51, 0, 0);
}
 
 //These statements are equivalent to the statements above.
 //Programmers may use the format they prefer.
pushMatrix();
translate(80, 80);
fill(outside);
ellipse(100, 100, 200, 200);
fill(middle);
ellipse(100, 100, 145, 145);
fill(inside);
ellipse(100, 100, 80, 80);
popMatrix();
pushMatrix();
translate(360, 80);
fill(inside);
rect(0, 0, 200, 200);
fill(outside);
rect(40, 60, 120, 120);
fill(middle);
rect(60, 90, 80, 80);
popMatrix();
  }
 
 void mouseClicked () {
  if (toggle == 0) {
    toggle = 1;
  } else {
  toggle = 0;}
  }

No comments:

Post a Comment