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
  • Select Grid Regions - to define patterns
  • Grid Logic - Select Grid Region based on i,j index values:
  • Design Based on Grid Regions

Was this helpful?

  1. Grid Based Designs

PShapes in Grid Regions

PreviousExample CodeNextGrid Region Logic

Last updated 5 years ago

Was this helpful?

In the previous section we created a function: displayShapes, to take a 1 Dimensional array of PShapes, the cellSize and the number of rows and columns in our canvas.

displayShapes( PShape[] shapes, float cellSize,  int rows, int cols)

Select Grid Regions - to define patterns

As we look to increase the complexity of our design, one approach would be to add logic to our nested for-loops to identify regions in each grid, where we could selectively display some portion of shapes in one of our shapes lists.

The image below shows a grid, with the (i,j) indexes for drawn in each cell. The yellow section represents a region that we'd like to add items to.

We can define this region as having index values: ( i < 3 && j < 3 )

We could use logic like this to define what shapes are drawn within a region. The logic is defined within the nested for-loops:

if( i < rows/2 && j < cols/2){ //draw region1 shapes }

Grid Logic - Select Grid Region based on i,j index values:

In the code below, we add logic within the nested for-loops to select cells within a region. This will get to be complex if we try to add design logic using this approach.

void drawGrid(int rows, int cols, int size ){
   int xPos = 0;
   int yPos =0;
  for(int i=0;i< rows; i++){
    for( int j=0; j< cols; j++){
      if( i < rows/2 && j< cols/2){  //logic for region1
          fill(40,255,255); //yellow
          rect( xPos, yPos, size, size); //draw a yellow square for each cell in  region1
          drawLines( xPos, yPos, i, j, size);
      }
      drawLines( xPos, yPos, i, j, size);
      xPos += size;
    } //end inner for-loop: j
    xPos=0;
    yPos += size;
  } //end outer for-loop: i
 } //end drawGrid

 //function to draw cell boundries and i,j values
 void drawLines( int xPos,int yPos, int i, int j, int size){
   line( xPos, yPos, xPos+size, yPos); //horizontal lines
      line( xPos, yPos, xPos, yPos+size);
      textSize(14);
      textAlign(CENTER);
      fill(0);
      text( "( " + i  +", " + j + " )", xPos+(size/2) , yPos + (size/2));
}

Design Based on Grid Regions

We can see that the design below is more interesting than those previously shown. So how can we create this type of pattern where the overall design shows 4 different regions of patterns?