Processing Experiment - Geometric Pattern Study

For my processing experiment I started with the Triangle Strip example. I liked this example because of the interactive element of changing the form by moving the mouse, but I felt it lacked a little bit of interest due to it's bland color scheme and simple geometric form.

(Triangle Strip Output)

I wanted to improve upon this by modifying the color and the geometric pattern while maintaining it's interactivity. To do this, I first updated the background and fill colors of the example to something a little more eye catching. I then went about trying to change the form and to do that I first changed the size of the shape to ensure it fits into the window better. After this, I went into the beginShape function and changed the angle variable from 0 to 45 and swapped the sin and cos trigonometric functions when defining px and py. While I am not 100% certain as to what exactly changing from a mathematical standpoint, I liked the output and ended up with something I thought was cool. 

(Triangle Strip Remix)

Triangle Strip Example Code

int x;

int y;

float outsideRadius = 150;

float insideRadius = 100;

void setup() {

  size(640, 360);

  background(204);

  x = width/2;

  y = height/2;

}

void draw() {

  background(204);

  

  int numPoints = int(map(mouseX, 0, width, 6, 60));

  float angle = 0;

  float angleStep = 180.0/numPoints;

    

  beginShape(TRIANGLE_STRIP); 

  for (int i = 0; i <= numPoints; i++) {

    float px = x + cos(radians(angle)) * outsideRadius;

    float py = y + sin(radians(angle)) * outsideRadius;

    angle += angleStep;

    vertex(px, py);

    px = x + cos(radians(angle)) * insideRadius;

    py = y + sin(radians(angle)) * insideRadius;

    vertex(px, py); 

    angle += angleStep;

  }

  endShape();

}

Triangle Strip Remix Code

int x;

int y;

float outsideRadius = 100;

float insideRadius = 50;

void setup() {

  size(640, 360);

  x = width/2;

  y = height/2;

}

void draw() {

  colorMode(RGB, 100);

  background(100, 200, 0);

  fill(255);

  int numPoints = int(map(mouseX, 0, width, 6, 60));

  float angle = 45;

  float angleStep = 180.0/numPoints;

    

  beginShape(TRIANGLE_STRIP); 

  for (int i = 0; i <= numPoints; i++) {

    float px = x + cos(radians(angle)) * outsideRadius;

    float py = y + sin(radians(angle)) * outsideRadius;

    angle += angleStep;

    vertex(px, py);

    px = x + sin(radians(angle)) * insideRadius;

    py = y + cos(radians(angle)) * insideRadius;

    vertex(px, py); 

    angle += angleStep;

  }

  endShape();

}