CS1335
  • Introduction
  • Assignments
    • A1: Meta, Metta
    • A2: Functions, Emotions
    • A3: Repeat Patterns
    • A4 - Objects: Things and No Thing
    • Final Inspirations
    • A?: Grid Patterns
    • Inspiration
  • Getting Started
    • Processing
    • PDE - Code Editor
    • Learning Processing
  • Java Language
    • Java Syntax
      • Typed-Variables
      • Float - Integer Conversion Errors
      • Modulus
      • Functions
      • Object Reference Data Types
      • Arrays
        • Class Example Code
      • Switch-Case Statement
      • Ternary Operator
      • Class
  • Project 1
    • Random Variation
    • Noise
    • HSB Color Mode
      • HSB Color Wheel
        • Dynamic ColorWheel
        • HSB Color Palette Tool
    • PShape Objects
      • Example Code: PShape
        • Inspiration
    • Modeling Emotions
      • Emotions
        • Kandinsky Color - Emotion
    • PShape with Contour
    • Recursion
      • Recursion Call-Stack
      • Recursion Examples
        • Example Code 1
        • Example Code 2
    • Recursion - PShape
    • Recursive Patterns
    • Planning Structure: Functions:
      • Example Code - Feb 19
      • Final Code Structure
    • Project 1: Programmatic Variations in Color
      • LerpColor
      • Map Function
      • Map with LerpColor
      • noise( )
    • Transforms for Mirroring
    • Project 1-Steps
  • Grid Based Designs
    • Computational Design
    • Artist: Victor Vasarely
    • Grid Pattern Design
    • 1D - Array of PShapes for Grid Layout
      • Truchet Tiling
      • Example Code S2020
      • Example Code March 11
      • Example - March9
      • 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
    • 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
    • Project 3 - Class Definitions
      • Button
      • PImageButton
      • ButtonGroup
      • Pattern
        • PShapes - SVG, Vertex Shapes
        • Setting Colors For Patterns
        • Pattern - With Child-PShapes
      • Slider
      • Particles
  • Modeling
    • UML Class Diagram
  • Resources and References
    • Glossary
    • Resources
      • Acoustics
      • Learning Science
        • Emotional Intelligence
      • Creativity
      • Conceptual Art
      • Books
        • Art
      • Games, Rules
      • Complexity
    • Random Inspiration
      • Ulm School
      • Heart-Mind, Mind, Body
      • Statistical Uncertainty
Powered by GitBook
On this page
  • Setting Colors for Patterns
  • Example Use - Fixed Color
  • Example Use - Dynamic Color
  • Pattern Class that handles all types of PShapes

Was this helpful?

  1. Project 3
  2. Project 3 - Class Definitions
  3. Pattern

Setting Colors For Patterns

Setting Colors for Patterns

Since this project requires programmatic use of colors, we need to look at how to set the colors for each Pattern object. One way to set the color is to pass a color parameter into a Pattern constructor, but in that case, the color would not be dynamic, it would not change when the mouse is moved.

Using this constructor, we can pass in a color parameter, so the color is fixed when the object is created.

Example Use - Fixed Color

///In Pattern class definition
//Pattern constructor that takes color as an input parameter
Pattern( PShape s, color fillColor){
    this.s = s;
    this.fillColor = fillColor;
  }

//main tab - initialization in setup()
PShape shape1 = createShape( RECT, 0,0,40,80);
color color1 = color( 200,100,100);
Pattern pattern0 = new Pattern(shape1, color1);

//in drawPattern( )
pattern0.display(mouseX, mouseY); //displayed using color1

Example Use - Dynamic Color

To have dynamic color change for the Pattern objects, we can just modify the value for the Pattern object's variables: fillColor or strokeColor, right before we call the display( ) method.

//main tab - initialization in setup()
colorMode(HSB, 360,100,100);
PShape shape1 = createShape( RECT, 0,0,40,80);
color color1 = color( 200,100,100);
Pattern pattern0 = new Pattern(shape1, color1);

//in drawPattern( )
float hue = map( mouseX, 0, width, 100, 200);  //vary with mouse position with colors in a hue range fo 100-200
pattern0.fillColor = color( hue, 100, 100 ); //set fillColor before calling display method.
pattern0.display(mouseX, mouseY); //displayed using color1

Pattern Class that handles all types of PShapes

This version of the Pattern class introduces a PShapeType integer variable, this allows us to customize the logic in the display method depending on the type of PShape Object we're dealing with:

class Pattern{

  //PROPERTIES
  PShape s;
  color shapeColor, strokeColor;
  int PShapeType; //type 1, type 2, type 3
  //type 1:  vertex type
  //type 2:  processing primitive
  //type 3:  external .svg file

  //CONSTRUCTOR
  Pattern( PShape s, color shapeColor){
    this.s = s;
    this.shapeColor = shapeColor;
    PShapeType = 1;  //default, assume vertex type
  }

  Pattern( PShape s, color shapeColor, int type){
    this.s = s;
    this.shapeColor = shapeColor;
    PShapeType = type;
  }


  //METHODS
  void display( int mx, int my){
   if( PShapeType == 1){
   s.setFill( shapeColor);
   s.setStroke(strokeColor);
   }
   else if( PShapeType == 2){
     fill(shapeColor);
     stroke(strokeColor);
   }
     shape( s, mx, my );
  }

}
PreviousPShapes - SVG, Vertex ShapesNextPattern - With Child-PShapes

Last updated 5 years ago

Was this helpful?