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.

Saturday, June 13, 2020

Processing Experimentation

For this processing experimentation, I played with the Star code and changed the size and increased the frequency of rotations.

Code for Star:
void setup() {
size(640, 360);
}
void draw() {
background(200,0,0); // background color

pushMatrix(); // left star
fill(204, 102, 0); // not sure how to change individual colors?
translate(width*0.2, height*0.5);
rotate(frameCount / 50.0); // increased rotation
star(0, 0, 20, 70, 6); //increased number of corners
popMatrix();

pushMatrix(); // center star
translate(width*0.5, height*0.5);
rotate(frameCount / 400.0);
star(0, 0, 80, 100, 40);
popMatrix();

pushMatrix(); // right star
translate(width*0.8, height*0.5);
rotate(frameCount / -100.0);
star(0, 0, 50, 70, 8);
popMatrix();
}
void star(float x, float y, float radius1, float radius2, int npoints) {
float angle = TWO_PI / npoints;
float halfAngle = angle/2.0;
beginShape();
for (float a = 0; a < TWO_PI; a += angle) {
float sx = x + cos(a) * radius2;
float sy = y + sin(a) * radius2;
vertex(sx, sy);
sx = x + cos(a+halfAngle) * radius1;
sy = y + sin(a+halfAngle) * radius1;
vertex(sx, sy);
}
endShape(CLOSE);
}

Code for Hue
int barWidth = 50; // increase width of the bar
int lastBar = -1;
void setup()
{
size(640, 640); // change canvas size
colorMode(HSB, height, height, height);
noStroke();
background(0);
}
void draw()
{
int whichBar = mouseY / barWidth; //mouse moves up and down and changes color
if (whichBar != lastBar) {
int barX = whichBar * barWidth;
fill(mouseY, height, height);
rect(barX, 0, barWidth, height);
lastBar = whichBar;
}
}

No comments:

Post a Comment