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.

Tuesday, April 9, 2019




PROCESSING: SINE WAVE EXPERIMENTATION

In my experimentation, I utilized a sine wave code that allowed you to change parameters of the waves spread and intensity through changing values. The x spacing created a wider wave spread further along the x axis when increased in number. By adjusting the amplitude, the 'extremeness' of the slopes increased, showing a more seemingly intense response. I also adjusted the void setup, which is basically the window that displays the wave. I went with size (700,300) to hide the circles rising above the top-line. Adjusting angular velocity changes the physics of each balls drop, changing it from a gentle fall to a more intense "throw" to the ground. 




int xspacing = 16;   // How far apart should each horizontal location be spaced
int w;              // Width of entire wave

float theta = 0.0;  // Start angle at 0
float amplitude = 200.0;  // Height of wave
float period = 220.0;  // How many pixels before the wave repeats
float dx;  // Value for incrementing X, a function of period and xspacing
float[] yvalues;  // Using an array to store height values for the wave

void setup() {
  size(700, 300);
  w = width+16;
  dx = (TWO_PI / period) * xspacing;
  yvalues = new float[w/xspacing];
}

void draw() {
  background(0);
  calcWave();
  renderWave();
}

void calcWave() {
  // Increment theta (try different values for 'angular velocity' here
  theta += 0.05;

  // For every x value, calculate a y value with sine function
  float x = theta;
  for (int i = 0; i < yvalues.length; i++) {
    yvalues[i] = sin(x)*amplitude;
    x+=dx;
  }
}

void renderWave() {
  noStroke();
  fill(245);
  // A simple way to draw the wave with an ellipse at each location
  for (int x = 0; x < yvalues.length; x++) {
    ellipse(x*xspacing, height/8+yvalues[x], 16, 16);
  }
}

No comments:

Post a Comment