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
  • Mirroring with scale( ) for RecursivePattern
  • RecursivePattern with scale for mirroring

Was this helpful?

  1. Project 1

Transforms for Mirroring

PreviousMap FunctionNextProject1-Steps

Last updated 5 years ago

Was this helpful?

The Processing Scale( float scaleX, float scaleY) can be used to create mirroring of shape forms.

Increases or decreases the size of a shape by expanding and contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages.

For example, the function call scale( 2.0, 1.0 ) increases the dimension of a shape by 200% along the x-dimension, with no change along the y dimension.

The image above shows a set of stacked squares, relative to the canvas origin, shown as a red circle at (0,0). When scale(1.0,1.0) is applied, no change to the shape occurs. When scale( -1.0, 1.0) is applied, mirroring across the y-axis occurs, since scaling is only changed in the x dimension. Here, this image is shown mirrored in a quadrant called Region2.

When using any transform functions, it's important to isolate those transforms so they don't impact any subsequent code. Using pairs of pushMatrix(), popMatrix() functions calls can restrict the scale( ) transform's impact to shapes drawn between the pushMatrix(), popMatrix() pair.

Mirroring with scale( ) for RecursivePattern

The image below shows that we can create a complex asymmetric design using mirroring and recursion.

RecursivePattern with scale for mirroring

void recursivePattern( float len, int count){
  if( count < 1){ //termination test - variable must be modified somewhere in recursive function to insure termination
    return;  //termination condition
  }

  float bright = map(len, lenMin, lenMax, 100,50); //bright changes with len

  color c1 = color( 200, 100, bright ); //blue
  PShape s = vertexShape( len, c1 );  //create shape using current len
  shape( s, 0, 0);//draw the shape

  /////Draw pattern mirrored into region4 
  pushMatrix(); //take snapshot of prior transforms
  scale(1.0, -1.0); //mirror across X-axis //region4
  shape( s, 0, 0);//draw the shape
  popMatrix(); // restore transforms to prior snapshot

  /////Draw on pattern mirrored in region2
  pushMatrix(); //take snapshot of prior transforms
  scale(-1.0, +1.0); //mirror across Y-axis //region2
  shape( s, 0, 0);//draw the shape
  popMatrix(); // restore transforms to prior snapshot

  recursivePattern( len * 0.8, count - 1); ///RECURSIVE CALL

  ///shape drawn after recursive call are stacked in reverse order, smallest to largest - asymmetry
  c1 = color( 200, 100, bright );
  s= vertexShape( len ,c1 );   ///we can use -len to draw in region3
  scale(-1.0, -1.0); //mirror across X, Y-axis //region2
  shape( s, 0, 0); 
}
Processing reference: Scale