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, June 12, 2020

Processing Experimentation - Dynamic Bouncing Ball + Fail

Dynamic Bouncing Ball
I added new variables xSize and ySize to manipulate the ball width/height. The ball changes into a random warm color when it hits the height boundaries of the window and into a cool color when it hits the width boundaries. Also, when the ball hits the height boundaries, it increases in size. When it hits the width boundaries, it decreases in size.
float x = 400;
float y = 300;
float xSpeed = 5;
float ySpeed = 5;
float xSize = 50;
float ySize = 50;
void setup() {
size(800, 600);
}
void draw() {
background(0);
noStroke();
ellipse(x, y, xSize, ySize);
x += xSpeed;
if(x > width || x < 0) {
xSpeed *=-1;
fill(random(255), 255, 255);
xSize -= 50;
ySize -= 50;
}
y += ySpeed;
if(y > height || y < 0) {
ySpeed *= -1;
fill(255, 255, random(255));
xSize += 50;
ySize += 50;
}

}

Hot and Cold
This first experimentation was rather simple, so I tried (and struggled, as I have very little coding experience) to create something more complex. My second experiment was to simulate a Hot and Cold game, where the user hovers their mouse over the word "cold" to move it in random increments around the window. As the word approaches a specific point, the word changes color and becomes "warmer". When the word finally reaches the point, it congratulates the user.
The following is failed code. I made changes to it but then regretted those changes and couldn't restore the original. I'll continue to work on it.

String cold = "cold";
String warm = "warm";
String congrats = "congrats";

float x, y; // X and Y coordinates of text
float hr, vr;  // horizontal and vertical radius of the text
float goalX;
float goalY;

void setup() {
  size(400, 400);
  goalX = random(width);
  goalY = random(height);

  // Create the font
  // textFont(createFont("SourceCodePro-Regular.ttf", 36));
  // textAlign(CENTER, CENTER);

  hr = textWidth(cold) / 2;
  vr = (textAscent() + textDescent()) / 2;
  noStroke();
  x = width / 2;
  y = height / 2;
}

void draw() {
  // Instead of clearing the background, fade it by drawing
  // a semi-transparent rectangle on top
  fill(204, 120);
  rect(0, 0, width, height); 
  fill(255);
  ellipse(goalX, goalY, 10, 10);

  // If the cursor is over the text, change the position
  if (abs(mouseX - x) < hr && abs(mouseY - y) < vr) {
    x += random(-50, 50);
    y += random(-50, 50);
  }

  if (abs(y - goalY) > 50 && abs(x - goalX) > 50) {
    fill(0, 0, 255);
    text("cold", x, y);
  }

  if (abs(y - goalY) < 50 && abs(x - goalX) < 50) {
    fill(255, 0, 0);
    text("warm", x, y);
  }

  if (y == goalY && x == goalX) {
    fill(255);
    text("congrats", goalX, goalY);
  }
  
}

No comments:

Post a Comment