Some Parallel Sinusoids With Increasing Period

This week we discussed repetitive patterns and reductive design. While five artists were a part of classroom conversation, we chose A. Michael Knoll’s “Ninety Parallel Sinusoids With Linearly Increasing Period” to recreate in Processing.

We also learned how to start adding motion and interactions to our design, so our class-coded rendition, seen to the left, included these additions. Our version appeared to show the lines endlessly waving. As the mouse moves to the bottom of the screen, the waving motion speeds up. Similarly, as the mouse moves toward the top of the screen, the motion slows down. We created an array that stored three colors and with each click of the mouse, the lines cycle through those colors.

For my individual version, I moved the waving lines down, increased their thickness and reduced the amplitude of the waves. I made the background and the waves different shades of blue so they looked like the ocean and sky. I added yellow ellipse with an orange stroke color in the top right corner to represent the sun. I used the beginShape() function to draw an island behind the waves. I have to be mindful of the way the background was continuously redrawn so that my island didn’t disappear after the first frame.

The placement of the mouse still increases and decreases the frame rate in my new version, however I swapped out the mouse-click event for a typing interaction. Whatever the user types will appear on the island as if it is a message written in the sand.

Here is the code I wrote to create this:

String myText = "";
color[] palette = new color[2];
int currColor = 0;

void setup() {
  size( 1000, 600 );
  

}

void draw() {
  background(141, 228, 255);
  float speed = map(mouseY, 0, height, 5, 30); 
  frameRate(speed);

//sun
  stroke(255, 204, 0);
  fill(255, 255, 0);
  ellipse(870, 70, 100, 100);

//island
  fill(247, 227, 174);
  beginShape();
  curveVertex(100, 380);
  curveVertex(100, 380);
  curveVertex(170, 250);
  curveVertex(400, 200);
  curveVertex(650, 250);
  curveVertex(900, 380);
  curveVertex(900, 380);
  endShape(CLOSE);
  
  textSize(20);
  fill(100);
  text("You're trapped on an island. What do you write in the sand so someone might rescue you?", 0, 0, 650, height);
  
  textSize(48);
  fill(204,166,103);
  text(myText, 250, 230, 230, 100);
  
  for ( int j = height/2; j<height; j+=12 ) { 
    for ( int i=0; i<width; i++ ) {
      float x = i;  
      float waveLength = map( i, 0, width, 25, 75);  
      float waveFactor = frameCount;
      float y = 20.0 *sin( x/waveLength+waveFactor) + j;
      strokeWeight(2);
      stroke(15, 183, 246);
      rect(x, y, 1, 8);
    }
  }
}

void keyPressed() {

if (keyCode == BACKSPACE) {
    if (myText.length() > 0) {
      myText = myText.substring(0, myText.length()-1);
    }

} else{
    myText = myText + key;
  }
}