A1 - Static Var­i­a­t­i­o­n­s

by Paolo Dylim

Background

I was really drawn into the work done in this video. This inspired me to explore the possibilities of generating random patterns using simple shapes programmed through processing. This is what I came up with.

  • Show Code
/** @peep sketch */
 
size(400, 400);
background(0); 
strokeWeight(1);
stroke(255);
noFill();
smooth(6);
 
// GUIDELINES
 
// Generates random breakpoints along the composition
  int b1x = random(100, 300);
  int b1y = 100;
  int b2x = random(100, 300);
  int b2y = 200;
  int b3x = random(100, 300);
  int b3y = 300;
 
// Generates a rotation value which will be applied towards various shapes
  float deg = random(0, 360); // use this to specify the degree value of rotation
  float rad = radians(deg); // converts the previous degree value into radians for Processing
 
// BOOLEAN VARIABLES - these functions will determine whether the 3rd breakpoint generates a square or a circle according to breakpoint 1's results.
  boolean c = false; 
  boolean s = false;
 
// Breakpoint 1
/* Guideline Commands
   println(b1x);
   point(b1x, 100) */
 
// Shape Generating Process
  int shapeGenerator = random(0,3); // 1. Generate a random number from 1-3
  // println("shapeGenerator 1" + " = " + shapeGenerator);
  if (shapeGenerator <= 1) { // 2. If the random number is < or = 1, do the ff:
    line(b1x, b1y, b2x, b2y); // create a line from b1 to b2
    println("b1 generated squares.");
    s = true; // set square boolean to true. This defines whether a shape will be created at b3
 
    // Enter the shape generation process here:
 
    // Square version 1 - static square
    /* fill(0); // set the color for the succeeding square
    square(b1x, b1y, 25); // create the square
    noFill(); // reset the global color value back to null. */
 
    // Square version 2 - with a little more complexity
    pushMatrix();
    translate(b1x, b1y); // shifts the grid to the generated points of b1.
    rotate(rad);
    rectMode(CORNER);
    fill(0);
    rect(0,0, 15, 15);
    fill(255); // sets color for succeeding square
    square(0, 0, 10); // creates 1st square
    noFill(); // resets color values
    popMatrix();
 
  } else if (shapeGenerator > 1 && shapeGenerator <= 2) {   // 3. If the random number is > 1 and less than or equal to 2, do the ff:
    line(b1x, b1y, b2x, b2y); // create a line from b1 to b2
    println("b1 generated circles.");
    c = true; // set circle boolean to true
 
    // Enter the shape generation process here:
    fill(255); // set the color value for the succeeding circle
    circle(b1x, b1y, 10, 10); // create the circle
    noFill(); // reset the global color value to null
 
  } else { // 4. Otherwise, f the randomly generated number is greater than 2, do the ff:
    println("b1 decided not to generate a shape."); // instruct the system to let me know that no shape was generated.
  }
 
// Breakpoint 2
/* Guide Commands
   println(b2x);
   point(b2x, 200); */
 
// Shape Generating Process - Variaton 2
  int shapeGenerator = random(0,3); // 1. Generate a random number from 1-3
  // println("shapeGenerator 2" + " = " + shapeGenerator);  // command to observe changes in shapeGenerator's value.
  if (shapeGenerator <= 1) { // 2. If the random number is less than or equal to 1, do the ff:
    if ((s == true) || (c == true)) { // check, if s = true, then do the ff as well:
      line(b2x, b2y, b3x, b3y); // Create a Line from Breakpoint 2 to Breakpoint 3
    }
 
    // Enter the shape generation process here:
    // Square version 1 - Static
    /* fill(0); // set the color value for my square
    square(b2x, b2y, 25); // create a square
    noFill(); // reset the color value to null */
 
    // Square version 2 = Rotating Square    
    pushMatrix();
    fill(0);
    translate(b2x, b2y);
    scale(0.8);
    rotate(rad);
    square(0, 0, 50);
    fill(255);
    square(25, 25, 15);
    noFill();
    fill(0);
    square(50, 50, random(10, 25));
    noFill();
    popMatrix();
 
    println("b2 generated squares."); // instruct the system to inform me of what shapes were generated.
 
  } else if (shapeGenerator > 1 && shapeGenerator <= 2) {    // 3. Else f the random number is > 1 & less than or = 2, generate a circle
    if ((c == true) || (s == true)) {
      line(b2x, 200, b3x, 300); // Create a Line from Breakpoint 2 to Breakpoint 3    
    }
 
    // Enter the shape generation process here:
    fill(0);
 
    pushMatrix();
    translate(b2x, b2y);
    circle(0, 0, 50, 50);
    fill(255);
    circle(0, 0, 15, 15);
    noFill();
    popMatrix();
 
    println("b2 generated circles.") // instruct the system to inform me of what shapes were generated.
 
  } else {   // 4. Otherwise, generate a triangle
    if ((s == true) || (c == true)) {
      line(b2x, b2y, b3x, b3y); // Create a Line from Breakpoint 2 to Breakpoint 3    
    }
 
    // Enter the shape generation process here:
 
    // Triangle Version 1 - Static
    /* fill(0);
    triangleModeCENTER(b2x, b2y, 50);
    noFill(); */
 
    // Triangle Version 2 - Rotatable
    pushMatrix();
    translate(b2x, b2y);
    scale(0.8);
    rotate(rad);
    fill(255);
    triangleModeCENTER(0, 0, 50);
    noFill();
    popMatrix();
 
    println("b2 generated triangles.") // instruct the system to inform me of what shapes were generated
 
  }
 
 
// Breakpoint 3
// Guide Commands
  // println(b3x);
  // point(b3x, 300);
 
// Shape Generating Process
  if (s == true) { // boolean operator, to see if a square was generated at b1
 
    // Enter the shape generation process here:
   /* fill(0);
    square(b3x, b3y, 25);
    noFill(); */
 
    // Square version 2 - with a little more complexity
    pushMatrix();
    translate(b3x, b3y); // shifts the grid to the generated points of b1.
    rotate(rad/2);
    rectMode(CORNER);
    fill(0);
    rect(0,0, 15, 15);
    fill(255); // sets color for succeeding square
    square(0, 0, 10); // creates 1st square
    noFill(); // resets color values
    rectMode(CORNER);
    rect(0,0, 15, 15);
    popMatrix();
 
    println("b3 generated squares."); // instruct the system to inform me of what shapes were generated.
 
  } else if (c == true) { // boolean operator, to see if a circle was generated at b1
 
    // Enter the shape generation process here:
    fill(255);
    circle(b3x, b3y, 10, 10);
    noFill();
 
    println("b3 generated circles."); // instruct the system to inform me of what shapes were generated.
 
  } else if ((c == false) || (s == false)) {
    println("Since b1 did not generate a shape, b3 decided not to generate a shape as well."); // instructs the system to let me know if b3 did not generate a shape.
  } 
 
 
// Below is where we input the functions that generate shapes
 
// Function 1 - Generates a triangle based on 
void triangleModeCENTER(float x, float y, float sideLength) {
  area = (sqrt(3) / 4) * (sq(sideLength)); // inputs the length of the triangle's side and returns the Area of a triangle
  triHeight = 2 * (area / sideLength); // inputs the area of a triangle and returns the height of triangle
 
  // calculate ax
    ax = x;
  // calculate ay
    ay = y - (triHeight/2);
  // calculate bx
    bx = x - (sideLength/2);
  // calculate by
    by = y + (triHeight/2);
  // calculate cx
    cx = x + (sideLength/2);
  // calculate cy
    cy = y + (triHeight/2);
 
  beginShape(TRIANGLES);
  vertex(ax, ay);
  vertex(bx, by);
  vertex(cx, cy);
  endShape();
}
 
void circle(float x, float y, float diameter) {
  ellipseMode(CENTER);
  ellipse(x, y, diameter, diameter);
}
 
void square(float x, y, float side) {
  rectMode(CENTER);
  rect(x, y, side, side);
}

The Process

The first step was to define which shapes I wanted to use during the project. I wanted to keep it simple, so I constrained myself to the basic shapes - circles, triangles, and squares. Unlike rectangles and ellipses, triangles do not have a built in function that allows me to draw a triangle from a center point. With a little background research on trigonometry functions, I was able to translate this into processing language. The resulting custom triangle function is as follows:

  • Show Code
/** @peep sketch */
 
void setup() {
size(500, 500);
strokeWeight(1);
}
 
void draw() {
  triangleModeCENTER(250, 250, 200);
}
 
void triangleModeCENTER(float x, float y, float sideLength) {
  area = (sqrt(3) / 4) * (sq(sideLength)); // inputs the length of the triangle's side and returns the Area of a triangle
  triHeight = 2 * (area / sideLength); // inputs the area of a triangle and returns the height of triangle
 
  // calculate ax
    ax = x;
  // calculate ay
    ay = y - (triHeight/2);
  // calculate bx
    bx = x - (sideLength/2);
  // calculate by
    by = y + (triHeight/2);
  // calculate cx
    cx = x + (sideLength/2);
  // calculate cy
    cy = y + (triHeight/2);
 
  beginShape(TRIANGLES);
  vertex(ax, ay);
  vertex(bx, by);
  vertex(cx, cy);
  endShape();
}

I also decided to create functions for the other shapes, just for personal preference in how I will declare my syntax down the road.

  • Show Code
/** @peep sketch */
 
size(400, 400);
 
triangleModeCENTER(width/2, 100, 25);
circle(width/2, 200, 25);
square(width/2, 300, 25);
 
void triangleModeCENTER(float x, float y, float sideLength) {
  area = (sqrt(3) / 4) * (sq(sideLength)); // inputs the length of the triangle's side and returns the Area of a triangle
  triHeight = 2 * (area / sideLength); // inputs the area of a triangle and returns the height of triangle
 
  // calculate ax
    ax = x;
  // calculate ay
    ay = y - (triHeight/2);
  // calculate bx
    bx = x - (sideLength/2);
  // calculate by
    by = y + (triHeight/2);
  // calculate cx
    cx = x + (sideLength/2);
  // calculate cy
    cy = y + (triHeight/2);
 
  beginShape(TRIANGLES);
  vertex(ax, ay);
  vertex(bx, by);
  vertex(cx, cy);
  endShape();
}
 
void circle(float x, float y, float diameter) {
  ellipseMode(CENTER);
  ellipse(x, y, diameter, diameter);
}
 
void square(float x, y, float side) {
  rectMode(CENTER);
  rect(x, y, side, side);
}

Composition Process

Creating Breakpoints

Next, I created what I call breakpoints. These are points in the canvas that instruct where the program would start drawing it's shapes. I randomized the x-integers along a certain range while keeping the y-integers static so that the end pattern would likely fall somewhere along the middle of the composition.

  • Show Code
/* @peep sketch */
 
size(400, 400); // defines previously established size constraints of the project
background(255); // sets background to black
strokeWeight(5);
 
// Breakpoint 1
int b1x = random(100, 300);
println(b1x);
point(b1x, 100);
 
// Breakpoint 2
int b2x = random(100, 300);
println(b2x);
point(b2x, 200);
 
// Breakpoint 3
int b3x = random(100, 300);
println(b3x);
point(b3x, 300);
  • Added 3 break points in the composition (for each click)
  • Used console log to ensure that my points were reacting right

I still had a vague idea of how it would turn out at this point, so I just kept experimenting.

  • Show Code
/* @peep sketch */
 
size(400, 400);
background(0); 
strokeWeight(1);
stroke(255);
noFill();
 
// Generates random breakpoints along the composition
  int b1x = random(100, 300);
  int b2x = random(100, 300);
  int b3x = random(100, 300);
// Line from Breakpoint 1 to Breakpoint 2
  strokeWeight(.5);
  stroke(255);
  line(b1x, 100, b2x, 200);
// Line from Breakpoint 2 to Breakpoint 3
  strokeWeight(.5);
  stroke(255);
  line(b2x, 200, b3x, 300);  
 
// GUIDELINES - END //
 
 
// Breakpoint 1
// Guideline Commands
  // println(b1x);
  // point(b1x, 100);
 
  // Shape Generating Process
  // 1. Generate a random number from 1-3
  int shapeGenerator = random(0,3);
  println(shapeGenerator);
  // 2. If the random number equals, 1, generate a square
  if (shapeGenerator <= 1) {
    fill(255);
    square(b1x, 100, 25, 25);
    noFill();
  // 3. If the random number equals 2, generate a circle
  } else if (shapeGenerator > 1 && shapeGenerator <= 2) {
    fill(0);
    circle(b1x, 100, 25, 25);
  // 4. Otherwise, do not generate anything
  } else {
    println("b1x decided not to generate a shape.");
  }
 
// Breakpoint 2
// Guide Commands
  // println(b2x);
  //point(b2x, 200);
 
  // Shape Generating Process
  // 1. Generate a random number from 1-3
  int shapeGenerator = random(0,3);
  println(shapeGenerator);
  // 2. If the random number equals, 1, generate a square
  if (shapeGenerator <= 1) {
    fill(255);
    square(b2x, 200, 25, 25);
    noFill();
  // 3. If the random number equals 2, generate a circle
  } else if (shapeGenerator > 1 && shapeGenerator <= 2) {
    fill(0);
    circle(b2x, 200, 25, 25);
  // 4. Otherwise, do not generate anything
  } else {
    fill(0);
    triangleModeCENTER(b2x, 200, 50);
  }
 
 
// Breakpoint 3
// Guide Commands
  // println(b3x);
  // point(b3x, 300);
 
  // Shape Generating Process
  // 1. Generate a random number from 1-3
  int shapeGenerator = random(0,3);
  println(shapeGenerator);
  // 2. If the random number equals, 1, generate a square
  if (shapeGenerator <= 1) {
    fill(255);
    square(b3x, 300, 25, 25);
    noFill();
  // 3. If the random number equals 2, generate a circle
  } else if (shapeGenerator > 1 && shapeGenerator <= 2) {
    fill(0);
    circle(b3x, 300, 25, 25);
  // 4. Otherwise, do not generate anything
  } else {
    println("b3x decided not to generate a shape.");
  }
 
 
 
// Below is where we input the functions that generate shapes
 
// Function 1 - Generates a triangle based on 
void triangleModeCENTER(float x, float y, float sideLength) {
  area = (sqrt(3) / 4) * (sq(sideLength)); // inputs the length of the triangle's side and returns the Area of a triangle
  triHeight = 2 * (area / sideLength); // inputs the area of a triangle and returns the height of triangle
 
  // calculate ax
    ax = x;
  // calculate ay
    ay = y - (triHeight/2);
  // calculate bx
    bx = x - (sideLength/2);
  // calculate by
    by = y + (triHeight/2);
  // calculate cx
    cx = x + (sideLength/2);
  // calculate cy
    cy = y + (triHeight/2);
 
  beginShape(TRIANGLES);
  vertex(ax, ay);
  vertex(bx, by);
  vertex(cx, cy);
  endShape();
}
 
void circle(float x, float y, float diameter) {
  ellipseMode(CENTER);
  ellipse(x, y, diameter, diameter);
}
 
void square(float x, y, float side) {
  rectMode(CENTER);
  rect(x, y, side, side);
}

By checkpoint 1, everything had shown significant progress from where I first began but it was far from easy and far from finished. After a lot of debugging, I finally found a clearer direction so I decided to save it.

  • added a shape generator which randomizes a number from 0-3.
  • constructed if-else statements that would correspond with actions depending on the value of the output of shape generator.

All breakpoints are now successfully generating shapes randomly. I also implemented a line that connects the different shapes and breakpoints.

Checkpoint 2

  • Show Code
/* @peep sketch */
 
size(400, 400);
background(0); 
strokeWeight(1);
stroke(255);
noFill();
 
// Generates random breakpoints along the composition
  int b1x = random(100, 300);
  int b2x = random(100, 300);
  int b3x = random(100, 300);
 
// BOOLEAN VARIABLES - these functions will determine whether the 3rd breakpoint generates a square or a circle according to breakpoint 1's results.
  boolean c = false; 
  boolean s = false;
 
// Breakpoint 1
// Guideline Commands
  // println(b1x);
  // point(b1x, 100);
 
/* BACKUP CLOUD
 line(b2x, 200, b3x, 300); // Line from Breakpoint 2 to Breakpoint 3  
*/
 
// Shape Generating Process
  int shapeGenerator = random(0,3); // 1. Generate a random number from 1-3
  // println("shapeGenerator 1" + " = " + shapeGenerator);
  if (shapeGenerator <= 1) { // 2. If the random number is < or = 1, do the ff:
    line(b1x, 100, b2x, 200); // create a line from b1 to b2
    fill(0); // set the color for the succeeding square
    square(b1x, 100, 25, 25); // create the square
    noFill(); // reset the global color value back to null.
    s = true; // set square boolean to true
  } else if (shapeGenerator > 1 && shapeGenerator <= 2) {   // 3. If the random number is > 1 and less than or equal to 2, do the ff:
    line(b1x, 100, b2x, 200); // create a line from b1 to b2
    fill(0); // set the color value for the succeeding circle
    circle(b1x, 100, 25, 25); // create the circle
    noFill(); // reset the global color value to null
    c = true; // set circle boolean to true
  // 4. Otherwise, do not generate anything
  } else { // 4. If the randomly generated number is greater than 2, do the ff:
    println("b1x decided not to generate a shape."); // instruct the system to let me know that no shape was generated.
  }
 
// Breakpoint 2
// Guide Commands
  // println(b2x);
  //point(b2x, 200);
 
// Shape Generating Process - Variaton 2
  int shapeGenerator = random(0,3); // 1. Generate a random number from 1-3
  println("shapeGenerator 2" + " = " + shapeGenerator);  // command to observe changes in shapeGenerator's value.
  if (shapeGenerator <= 1) { // 2. If the random number is less than or equal to 1, do the ff:
    if ((s == true) || (c == true)) { // check, if s = true, then do the ff as well:
      line(b2x, 200, b3x, 300); // Create a Line from Breakpoint 2 to Breakpoint 3
    }
    fill(0); // set the color value for my square
    square(b2x, 200, 25, 25); // create a square
    noFill(); // reset the color value to null
  } else if (shapeGenerator > 1 && shapeGenerator <= 2) {    // 3. Else f the random number is > 1 & less than or = 2, generate a circle
    if ((c == true) || (s == true)) {
      line(b2x, 200, b3x, 300); // Create a Line from Breakpoint 2 to Breakpoint 3    
    }
    fill(0);
    circle(b2x, 200, 25, 25);
    noFill();
  } else {   // 4. Otherwise, generate a triangle
    if ((s == true) || (c == true)) {
      line(b2x, 200, b3x, 300); // Create a Line from Breakpoint 2 to Breakpoint 3    
    }
    fill(0);
    triangleModeCENTER(b2x, 200, 50);
    noFill();
  }
 
 
// Breakpoint 3
// Guide Commands
  // println(b3x);
  // point(b3x, 300);
 
// Shape Generating Process
  if (s == true) {
    fill(0);
    square(b3x, 300, 25, 25);
    noFill();
  } else if (c == true) {
    fill(0);
    circle(b3x, 300, 25, 25);
    noFill();
  } else if ((c == false) || (s == false)) {
    println("b3x decided not to generate a shape.");
  } 
 
 
// Below is where we input the functions that generate shapes
 
// Function 1 - Generates a triangle based on 
void triangleModeCENTER(float x, float y, float sideLength) {
  area = (sqrt(3) / 4) * (sq(sideLength)); // inputs the length of the triangle's side and returns the Area of a triangle
  triHeight = 2 * (area / sideLength); // inputs the area of a triangle and returns the height of triangle
 
  // calculate ax
    ax = x;
  // calculate ay
    ay = y - (triHeight/2);
  // calculate bx
    bx = x - (sideLength/2);
  // calculate by
    by = y + (triHeight/2);
  // calculate cx
    cx = x + (sideLength/2);
  // calculate cy
    cy = y + (triHeight/2);
 
  beginShape(TRIANGLES);
  vertex(ax, ay);
  vertex(bx, by);
  vertex(cx, cy);
  endShape();
}
 
void circle(float x, float y, float diameter) {
  ellipseMode(CENTER);
  ellipse(x, y, diameter, diameter);
}
 
void square(float x, y, float side) {
  rectMode(CENTER);
  rect(x, y, side, side);
}

By checkpoint 2, I implemented a boolean operator so that breakpoint 3 would be able to mimic the shape qualities of breakpoint 1. (i.e. If breakpoint 1 produces circles, breakpoint 3 would produce circles as well)

  • added boolean variables to see whether b1 is circle or square in order for b3 to react.
  • cleaned up some code and comments to make everything more cohesive
  • improved feedback system

From here on out, it was all about playing with the code to come up with different variations of shape combinations to see what I liked the most. And once again.. the final product:

  • Show Code
/* @peep sketch */
 
size(400, 400);
background(0); 
strokeWeight(1);
stroke(255);
noFill();
smooth(6);
 
// Goal: to create a canvas of randomly generated shapes that hint the feeling of movement.
 
// Constraints:
// Shapes must be generated in a way that suggests they are in harmony with each other and not simply generated wherever unintendedly.
// Shapes must hint the feeling of movement, as if they are headed towards a certain direction within the canvas
// Shapes must hint a sense of balance, where 1 shape isn't overpowering the other.
//
// For the purpose of simplicity and the theme of minimalism, we constrain ourselves
// to either of the 3 shapes: square, circle or triangle
 
// Directions for the first combination
// 1. 3 Breakpoints will be defined along the canvas. Each breakpoint will be assigned to generate a shape
// 2. Within these breakpoints, the program will decide if a shape will be generated and whether that shape will be a square, circle, or triangle
//    - We should be able to expand on the designs of each breakpoint later on once the foundation is complete. This will be how we branch out and experiment with different possibilities for patterns
// 3. A guideline must pass through all generated shapes to hint at the idea of movement
// 4. If breakpoint 3 must mimic whatever shape breakpoint 1 makes to hint at balance.
// 5. The whole canvas and all it's elements must feel in harmony with each other.
 
 
 
// GUIDELINES
 
// Generates random breakpoints along the composition
  int b1x = random(100, 300);
  int b1y = 100;
  int b2x = random(100, 300);
  int b2y = 200;
  int b3x = random(100, 300);
  int b3y = 300;
 
// Generates a rotation value which will be applied towards various shapes
  float deg = random(0, 360); // use this to specify the degree value of rotation
  float rad = radians(deg); // converts the previous degree value into radians for Processing
 
// BOOLEAN VARIABLES - these functions will determine whether the 3rd breakpoint generates a square or a circle according to breakpoint 1's results.
  boolean c = false; 
  boolean s = false;
 
// Breakpoint 1
/* Guideline Commands
   println(b1x);
   point(b1x, 100) */
 
// Shape Generating Process
  int shapeGenerator = random(0,3); // 1. Generate a random number from 1-3
  // println("shapeGenerator 1" + " = " + shapeGenerator);
  if (shapeGenerator <= 1) { // 2. If the random number is < or = 1, do the ff:
    line(b1x, b1y, b2x, b2y); // create a line from b1 to b2
    println("b1 generated squares.");
    s = true; // set square boolean to true. This defines whether a shape will be created at b3
 
    // Enter the shape generation process here:
 
    // Square version 1 - static square
    /* fill(0); // set the color for the succeeding square
    square(b1x, b1y, 25); // create the square
    noFill(); // reset the global color value back to null. */
 
    // Square version 2 - with a little more complexity
    pushMatrix();
    translate(b1x, b1y); // shifts the grid to the generated points of b1.
    rotate(rad);
    rectMode(CORNER);
    fill(0);
    rect(0,0, 15, 15);
    fill(255); // sets color for succeeding square
    square(0, 0, 10); // creates 1st square
    noFill(); // resets color values
    popMatrix();
 
  } else if (shapeGenerator > 1 && shapeGenerator <= 2) {   // 3. If the random number is > 1 and less than or equal to 2, do the ff:
    line(b1x, b1y, b2x, b2y); // create a line from b1 to b2
    println("b1 generated circles.");
    c = true; // set circle boolean to true
 
    // Enter the shape generation process here:
    fill(255); // set the color value for the succeeding circle
    circle(b1x, b1y, 10, 10); // create the circle
    noFill(); // reset the global color value to null
 
  } else { // 4. Otherwise, f the randomly generated number is greater than 2, do the ff:
    println("b1 decided not to generate a shape."); // instruct the system to let me know that no shape was generated.
  }
 
// Breakpoint 2
/* Guide Commands
   println(b2x);
   point(b2x, 200); */
 
// Shape Generating Process - Variaton 2
  int shapeGenerator = random(0,3); // 1. Generate a random number from 1-3
  // println("shapeGenerator 2" + " = " + shapeGenerator);  // command to observe changes in shapeGenerator's value.
  if (shapeGenerator <= 1) { // 2. If the random number is less than or equal to 1, do the ff:
    if ((s == true) || (c == true)) { // check, if s = true, then do the ff as well:
      line(b2x, b2y, b3x, b3y); // Create a Line from Breakpoint 2 to Breakpoint 3
    }
 
    // Enter the shape generation process here:
    // Square version 1 - Static
    /* fill(0); // set the color value for my square
    square(b2x, b2y, 25); // create a square
    noFill(); // reset the color value to null */
 
    // Square version 2 = Rotating Square    
    pushMatrix();
    fill(0);
    translate(b2x, b2y);
    scale(0.8);
    rotate(rad);
    square(0, 0, 50);
    fill(255);
    square(25, 25, 15);
    noFill();
    fill(0);
    square(50, 50, random(10, 25));
    noFill();
    popMatrix();
 
    println("b2 generated squares."); // instruct the system to inform me of what shapes were generated.
 
  } else if (shapeGenerator > 1 && shapeGenerator <= 2) {    // 3. Else f the random number is > 1 & less than or = 2, generate a circle
    if ((c == true) || (s == true)) {
      line(b2x, 200, b3x, 300); // Create a Line from Breakpoint 2 to Breakpoint 3    
    }
 
    // Enter the shape generation process here:
    fill(0);
 
    pushMatrix();
    translate(b2x, b2y);
    circle(0, 0, 50, 50);
    fill(255);
    circle(0, 0, 15, 15);
    noFill();
    popMatrix();
 
    println("b2 generated circles.") // instruct the system to inform me of what shapes were generated.
 
  } else {   // 4. Otherwise, generate a triangle
    if ((s == true) || (c == true)) {
      line(b2x, b2y, b3x, b3y); // Create a Line from Breakpoint 2 to Breakpoint 3    
    }
 
    // Enter the shape generation process here:
 
    // Triangle Version 1 - Static
    /* fill(0);
    triangleModeCENTER(b2x, b2y, 50);
    noFill(); */
 
    // Triangle Version 2 - Rotatable
    pushMatrix();
    translate(b2x, b2y);
    scale(0.8);
    rotate(rad);
    fill(255);
    triangleModeCENTER(0, 0, 50);
    noFill();
    popMatrix();
 
    println("b2 generated triangles.") // instruct the system to inform me of what shapes were generated
 
  }
 
 
// Breakpoint 3
// Guide Commands
  // println(b3x);
  // point(b3x, 300);
 
// Shape Generating Process
  if (s == true) { // boolean operator, to see if a square was generated at b1
 
    // Enter the shape generation process here:
   /* fill(0);
    square(b3x, b3y, 25);
    noFill(); */
 
    // Square version 2 - with a little more complexity
    pushMatrix();
    translate(b3x, b3y); // shifts the grid to the generated points of b1.
    rotate(rad/2);
    rectMode(CORNER);
    fill(0);
    rect(0,0, 15, 15);
    fill(255); // sets color for succeeding square
    square(0, 0, 10); // creates 1st square
    noFill(); // resets color values
    rectMode(CORNER);
    rect(0,0, 15, 15);
    popMatrix();
 
    println("b3 generated squares."); // instruct the system to inform me of what shapes were generated.
 
  } else if (c == true) { // boolean operator, to see if a circle was generated at b1
 
    // Enter the shape generation process here:
    fill(255);
    circle(b3x, b3y, 10, 10);
    noFill();
 
    println("b3 generated circles."); // instruct the system to inform me of what shapes were generated.
 
  } else if ((c == false) || (s == false)) {
    println("Since b1 did not generate a shape, b3 decided not to generate a shape as well."); // instructs the system to let me know if b3 did not generate a shape.
  } 
 
 
// Below is where we input the functions that generate shapes
 
// Function 1 - Generates a triangle based on 
void triangleModeCENTER(float x, float y, float sideLength) {
  area = (sqrt(3) / 4) * (sq(sideLength)); // inputs the length of the triangle's side and returns the Area of a triangle
  triHeight = 2 * (area / sideLength); // inputs the area of a triangle and returns the height of triangle
 
  // calculate ax
    ax = x;
  // calculate ay
    ay = y - (triHeight/2);
  // calculate bx
    bx = x - (sideLength/2);
  // calculate by
    by = y + (triHeight/2);
  // calculate cx
    cx = x + (sideLength/2);
  // calculate cy
    cy = y + (triHeight/2);
 
  beginShape(TRIANGLES);
  vertex(ax, ay);
  vertex(bx, by);
  vertex(cx, cy);
  endShape();
}
 
void circle(float x, float y, float diameter) {
  ellipseMode(CENTER);
  ellipse(x, y, diameter, diameter);
}
 
void square(float x, y, float side) {
  rectMode(CENTER);
  rect(x, y, side, side);
}

Comments

Nobody has said anything yet.