CS1335 Java and Processing
  • CS 1335 Computer Science 1
  • Getting Started
    • Processing IDE
    • Java vs Javascript
    • Review: Processing, Functions
    • HSB Color Mode
      • HSB Color Wheel
        • Example Code
      • HSB Color Palette Tool
    • Recursion
      • Recursion Call-Stack
      • Example Code
        • Example Code Feb 5 S20
        • Feb 12 Code
  • Project 1
    • Subjective Modeling of Emotions
    • Emotions represented using color, form, space
      • Kandinsky Color - Emotion
      • Emotional Intelligence
    • Project 1: PShapes
      • Example Code
      • Inspiration
    • PShape with Cutout - Inner Contour
    • VertexShape - Recursion
    • Project 1: Recursive Drawing
    • Project 1: Programmatic Variations in Color
      • Recursion with rotate, scale
      • Plan Region Size, Color
    • Map Function
    • Transforms for Mirroring
    • Project1-Steps
  • Grid Based Designs
    • Computational Design
      • Generative Design
    • Artist: Victor Vasarely
    • Grid Pattern Design
    • 1D - Array of PShapes for Grid Layout
      • Truchet Tiling
      • Example Code
    • PShapes in Grid Regions
    • Grid Region Logic
    • Pattern Preview - Transforms: Translate & Scale
  • Project 2
    • Project 2 - 2D Arrays for Gradient Logic
      • 2D Array Grid with Labels
    • Grid Patterns using 2D Array Indexes: i, j
      • Example Class Code
    • lerpColor( ) and map( ) Functions
    • Demo Lerp Colors
    • 2D Arrays with lerpColor
    • Create PShape 2D Array
    • Function: Populate2DArray( )
    • Function: DisplayShapeMatrix()
    • Transforms for Position, Rotation, Scale of ShapeMatrix Elements
    • Project 2 - Steps
    • Animation for ShapeMatrix
      • Animation w/Noise
  • Object Oriented Programming
    • Introduction to Objects
    • OOP vs Data-Flow
    • Button States
    • Buttons as Objects
      • Button Class
    • Create Object Instances
    • Button Types
    • Modeling Buttons: States and Events
    • OOP - Inheritance
    • OOP - Polymorphism
    • Child-Class: PImageButton
    • PShape - SVG Objects
    • Menu of Buttons
    • ButtonGroup - Final Version
    • Slider Controller
    • UML Class Diagram
  • Project 3
    • Project 3 - Logic, Steps
    • Example Code S20
      • Code Wed Apr 1
      • Code Wed Apr 8 v1
      • Code Wed Apr 8 v2
      • Code Mon Apr 13
      • Code Wed Apr 15
      • Code Mon Apr 20
      • Code Wed Apr 22
      • Code Mon Apr 27
      • Code Wed Apr 29
    • Project 3 - Class Definitions
      • Button
      • PImageButton
      • ButtonGroup
      • Pattern
        • PShapes - SVG, Vertex Shapes
        • Setting Colors For Patterns
        • Pattern - With Child-PShapes
      • Slider
      • Particles
  • Java Syntax
    • Java Syntax
      • Typed-Variables
      • Float - Integer Conversion Errors
      • Modulus
      • Functions
      • Object Reference Data Types
      • Arrays
        • Class Example Code
      • Switch-Case Statement
      • Ternary Operator
      • Class
      • Learning Science
    • UML Class Diagram
    • Glossary
  • Resources and References
    • Resources
    • Random Inspiration
      • Ulm School
      • Heart-Mind, Mind, Body
      • Statistical Uncertainty
Powered by GitBook
On this page
  • Logic for Grid Regions
  • Patterns in Grid Regions
  • Logic for Displaying Patterns in Regions
  • Example Code for the Region-Based Design Patterns

Was this helpful?

  1. Grid Based Designs

Grid Region Logic

PreviousPShapes in Grid RegionsNextPattern Preview - Transforms: Translate & Scale

Last updated 5 years ago

Was this helpful?

Logic for Grid Regions

We can determine logic to define grid-regions within a nested for-loop, and we can display certain patterns within these regions using this logic.

Patterns in Grid Regions

Logic for Displaying Patterns in Regions

The code below shows that we can use for-loop logic that looks at the index values: i, j to determine 4 regions where we can display different shapes to develop a more interesting pattern.

Region Logic:

  • Region 1: i < rows/2 && j < cols/2

  • Region 2: i < rows/2 && j >= cols/2

    • Even Cells: (i+j) % 2 == 0

  • Region 3: i >= rows/2 && j < cols/2

    • Even Cells: (i+j) % 2 == 0

  • Region 4: i >= rows/2 && j >= cols/2

Region Design Patterns: Fill grid cells

  • Region1: display Shape1

  • Region2: display Shape2, if even cells, display Shape1

  • Region3: display Shape2, if even cells, display Shape1

  • Region4: display Shape1

Example Code for the Region-Based Design Patterns

void displayShapeList( PShape[] _shapes1, PShape[] _shapes2, float cellSize, int rows, int cols) {
  int xPos =0;
  int yPos = 0;
  int shapeIndex=0;
  for ( int i=0; i<rows; i++) { 
    for (int j=0; j<cols; j++) {  //draw a shape in each column
      if(  i < (rows/2) && j < (cols/2)  ){  //region 1
          shape(_shapes1[shapeIndex], xPos, yPos);   //display the shape
      }
      else if( i >= (rows/2) && j >= (cols/2)){  //region 4
         shape(_shapes1[shapeIndex], xPos, yPos);   //display the shap
      }
      else if( (i + j) % 2 == 0 ){  //even position in region 2,3
        shape(_shapes1[shapeIndex], xPos, yPos);   //display the shap
      }else{ //remaining positions in region 2, 3
        fill( 50);
        rect(xPos, yPos, cellSize, cellSize);
        shape(_shapes2[shapeIndex], xPos, yPos);   //display the shap
      }
      xPos += cellSize;
      shapeIndex++;
    }
    xPos = 0;
    yPos += cellSize;
  }  //end outer for loop
}   //end displayShapeList