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

Was this helpful?

  1. Project 2
  2. Project 2 - 2D Arrays for Gradient Logic

2D Array Grid with Labels

 void setup(){
  size(400,400);
  int rows = 4;
  int cols = 4;
  int size=100;
  int[][] intMatrix ;  //declare 2D array of integers
  intMatrix = new int[rows][cols]; //initialize 
  int xPos = 0;
  int yPos = 0;
  //nested for loops to access each element
  for ( int i=0; i< rows; i++) {
    for ( int j=0; j<cols; j++) {
      int k =  i + j;  //create a variable to use for fill logic
      intMatrix[i][j] = k; //store this value for each cell
      int fillVal = k*20 + 100;
      fill(fillVal);  //set fill based on k value
      rect( xPos, yPos, size, size);
      fill(0); //text fill color
      text( "(" + i + "," + j + ")", xPos+ size/2-15, yPos + size/2+15);
      text( "k:" + k, xPos+ size/2-15, yPos + size/2);
      text( "fill:" + fillVal, xPos+ size/2-15, yPos + size/2 - 15);
      xPos += size;  //move xPos across to each new column
    }
    xPos = 0; //reset xPos to 0 for new row
    yPos += size; //move yPos down for the next row
  }
  }

lerpColor Example Code

Below is the code that includes the changes we made to add background color using lerpColor( ).

void setup(){
  size(800,800);
  colorMode(HSB, 360, 100,100);
  int rows = 10;
  int cols = 10;
  int size=width/rows;
  int[][] intMatrix ;  //declare 2D array of integers - currently null
  intMatrix = new int[rows][cols]; //initialize 

  int xPos = 0;
  int yPos = 0;
  //nested for loops to access each element
  for ( int i=0; i< rows; i++) {
    for ( int j=0; j<cols; j++) {
      int k =  i + j;  //create a variable to use for fill logic
      intMatrix[i][j] = k; //store this value for each cell
      color c1 = color( 237, 95,95); //blue
      color c2 = color(69, 95, 97); //yellow
      float fraction = map(k, 0, rows+cols-2, 0.0, 1.0); //map to fractional range 0.0, 1.0 
      color c3 = lerpColor( c1, c2, fraction);
      fill(c3);  //set fill based on k value
      rect( xPos, yPos, size, size);
      fill(0); //text fill color
      //textSize(20);
      text( "(" + i + "," + j + ")", xPos+ size/2-15, yPos + size/2+15);
      text( "k:" + k, xPos+ size/2-15, yPos + size/2);
      //text( "fill:" + hueVal, xPos+ size/2-15, yPos + size/2 - 15);
      xPos += size;  //move xPos across to each new column
    }
    xPos = 0; //reset xPos to 0 for new row
    yPos += size; //move yPos down for the next row
  }
  }
PreviousProject 2 - 2D Arrays for Gradient LogicNextGrid Patterns using 2D Array Indexes: i, j

Last updated 5 years ago

Was this helpful?