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
  • Populate2DArray - with Color input-paramters
  • Program using Populate2DArray
  • Logic to render each PShape at a given x,y location

Was this helpful?

  1. Project 2

Function: Populate2DArray( )

PreviousCreate PShape 2D ArrayNextFunction: DisplayShapeMatrix()

Last updated 5 years ago

Was this helpful?

The code in the previous sections needs should be refactored so it's using functions, this will allow us to separate the code-logic:

  • creating the shape-color units using design logic

    • Notice, there are no xPos, yPos variables used in Populate2DArray, instead, this function only populates our 2D data-structure.

  • displaying the shape-color units in a grid layout

    • The layout and positioning in grid configuration will be done using a different function:

 Populate2DArray(PShape[][] shapeMatrix, int rows, int cols, int cellSize){

  color c1=color(157, 83, 56);
  color c2 = color(258, 66, 96);
  for( int i=0; i< rows; i++){
    for( int j=0; j< cols; j++){
         int k = i + j;
         //calculate fill color
         float kFraction = map( k, 0, (rows-1) + (cols-1),0.0, 1.0);
         color c3 = lerpColor(c1, c2, kFraction);
         //fill( c3 ); ///use map? max of k is 10
         PShape curShape;
         if( k %2==0){
         //create Shape and setFill 
          curShape = cirPattern( cellSize-10, c3);
         } else{
          curShape = rectPattern( cellSize-10, c3);
         }
         shapeMatrix[i][j]= curShape;  //store in 2D array
     } //end of inner loop (cols)
  } //end of outer loop (rows) 
  return shapeMatrix;
}

Populate2DArray - with Color input-paramters

It might be better to move the endpoint colors for the lerpColor function outside this function, so they can be passed into the function. When the colors are set inside the function, we would need a new function each time we want to use different colors, it's like the colors are hard-coded into this function. This means we'd need to change the function signature to add the parameters, then, within the function we'd remove the code where we were initializing those colors.

 Populate2DArray(PShape[][] shapeMatrix,int rows, int cols, int cellSize, color c1, color c2)

Program using Populate2DArray

In the code example project below, the following code shows how we call the new function: So, basic PShape[][] shapeMatrix = new PShape[rows][cols]; Populate2DArray(shapeMatrix , rows, cols, cellSize);

//this code is in setup()

  int rows = 6;
  int cols = 6;
  int cellSize = width/cols;

  //Declare and Initialize 2D PShape array.

PShape[][] shapeMatrix = new PShape[rows][cols] ;
Populate2DArray(shapeMatrix , rows, cols, cellSize);



  //Code below displays each shapeMatrix item at the corresponding: row, col / x, y position. 

  int xPos=0; //variables to control where rectangle is drawn
  int yPos = 0;
  for( int i=0; i< rows; i++){
    for( int j=0; j< cols; j++){
        //Display Shape
         //draw the shape
        PShape curShape=shapeMatrix[i][j];
        shape( curShape, xPos, yPos);

         xPos += cellSize; //increment for drawing the next column
    } //end of inner loop (cols)
    yPos +=cellSize; //move yPos for drawing next row
    xPos = 0;
  } //end of outer loop (rows) 
} //end of setup

PShape vertexPattern1( float len, color c1 ){
  PShape s =  createShape( RECT, 0,0, len, len);
  s.setFill(c1);
  return s;
}

Logic to render each PShape at a given x,y location

//This code should also be refactored into a function so we can call it multiple times to have the shapeMatrix drawn at different initial x,y positions. This is done in the following section: Function:

displayShapeMatrix( )
DisplayShapeMatrix()