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
  • Diagonal Color Gradients
  • Define variable k to determine color pattern.
  • Color Gradient Logic:
  • Odd-Even Gradient Logic
  • Random Patterning Logic
  • Logic for Randomized 2-pattern arrangement:
  • Other Patterns based on i, j index
  • min( i, j)
  • max( i, j);
  • Boolean Conditional Modulus Logic: Mod5 or Mod7
  • Multiplication with Modulus 3,5

Was this helpful?

  1. Project 2

Grid Patterns using 2D Array Indexes: i, j

Previous2D Array Grid with LabelsNextExample Class Code

Last updated 5 years ago

Was this helpful?

The image below uses logic: color factor k = min( i, j) in regions 1 and 4. In addition, there are diagonal color gradients blocks in regions 2 and 3. The primary block unit has been repeated 4 times across adjacent regions, where scale( scaleX, scaleY) has been used to create of the basic unit

Diagonal Color Gradients

Define variable k to determine color pattern.

In the image above, we see a diagonal color gradient in both the foreground and background colors. The logic associated with this can be seen in the image below. If we define a new variable: int k = i + j; , where k is the sum of the i, j index variables, we see that the value of k increases along the grid's diagonal direction. Then we can use k as a factor to determine the fill color.

Color Gradient Logic:

Using the sum of grid indexes for color logic gives us a simple approach to create complex patterns. We can observe a pattern that forms when we consider i,j indexes of each cell: if we add i + j indexes for a cell, then neighboring cells along diagonal lines have equal values of i + j. We can use this relationship to determine fill values for cells, so we can create a gradient fill diagonally across a grid of cells.

      int k= i + j; //i,j are for-loop indexes
      fill( 150 + (k * 10) );  //gradient logic

Odd-Even Gradient Logic

We can also use this sum variable: k for determining odd-even logic. When we use the modulus operator %, we focus on the remainder component, so when k%2 has no remainder ( k%2 == 0 ), we have a way to implement odd-even logic in our patterns. In the image below, we've combined it with the gradient color fill logic. If we have an odd item, then we use a light gray fill(240), otherwise, we use our gradient logic to create our fill.

int k= i + j; //i,j are for-loop indexes
if(k % 2 == 0){
    fill( 100 + k *10); //gradient logic
}
else{
    fill(240); //light gray
}

Random Patterning Logic

In the images below, we can see that there are 2 different design units, shape1 has 2 colored vertically-stacked triangles on a dark background, shape 2 is a rotation - so the colored triangles have left/right orientation. By randomly selecting between these units, we have an additional design pattern.

Logic for Randomized 2-pattern arrangement:

We can use the Processing random(min,max ) function to simulate random events. We define and initialize a random variable: rand that will be assigned a decimal value between 0.0 and 2.0. We determine that if rand > 1, then we vertexPattern1( ), like a coin flip, roughly half the time we'll have rand < 1 and instead we'll vertexPattern2( ).

//Code snippet for random logic to determine which shape is created.
float rand= random(0,2);
if(rand > 1){
    vertexPattern1(size, foreground, background);
}
else{
    vertexPattern2(size, foreground, background);
}

Other Patterns based on i, j index

min( i, j)

The logic for the image below uses the fact that along square shaped sections, like the outer top-row and the left-column both share the feature that the minimum value of the i,j index for each element is 0.

k = min( i, j);

max( i, j);

Boolean Conditional Modulus Logic: Mod5 or Mod7

//Mod 5 or Mod 7

      int k= i + j;
      if(k % 5 == 0 || k% 7 ==0){
        fill( 100 + k *10);
      }
      else{
        fill(240);
      }
   

Multiplication with Modulus 3,5

      int k= i * j;
      if(k % 3 == 0 || k% 5 ==0){
         fill( 100 + k * 5);
      }
      else{
         fill(240);
      }

Shape1 ... Shape2

The logic for the image below uses the fact that along square shaped sections, like the outer bottom-row and the right-column both share the feature that the max value of the i,j index for each element is 5. The can use a factor like k to determine color for each grid cell.

lerpColor( ) function
mirror-images