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
  • PShapes - SVG and Vertex Shapes
  • Table of Fill, Stroke Syntax for PShapes
  • Updated Pattern Class - For All PShapes

Was this helpful?

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

PShapes - SVG, Vertex Shapes

PreviousPatternNextSetting Colors For Patterns

Last updated 5 years ago

Was this helpful?

PShapes - SVG and Vertex Shapes

Setting the fill and stroke for PShapes is non-trivial since the PShape class is a wrapper class that tries to treat several different types of shapes as the same type.

We can make modifications to the Pattern class to help smooth out these difficulties.

The Noun Project Provides an easy way to get some simple svg's that we can use to create patterns.

Instructions to remove text from SVG:

Table of Fill, Stroke Syntax for PShapes

PShape

Type

Fill Syntax

s = createShape( RECT,0,0,20,40)

processing primitive

s.setFill(color( 100) );

s = createShape( );

vertex shape

s.setFill(color(100) );

s = loadShape("shape.svg" )

external svg file

s.disableStyle( ); fill(color(100) );

Updated Pattern Class - For All PShapes

The code below can be used with all types of PShapes. When using the external svg version, you must set the value of isSVG = true in the main tab after creating the Pattern object.

example main tab code

 PShape s1 = loadShape( "nounPattern.svg");
  pattern1 = new Pattern(s1);
  pattern1.isSVG = true;
  pattern1.fillColor = color( 200, 100, 100);
  pattern1.display();

Pattern Class

class Pattern{
  //Properties
  PShape s;
  color fillColor;
  color strokeColor;
  boolean isSVG;  //false by default - set to true for external loaded files

  Pattern(  PShape s ){
    this.s = s;
  }

  //overloaded constructors
  Pattern(  PShape s, color fillColor ){
    this.s = s;
    this.fillColor = fillColor;
  }

  void display(){
    if(isSVG){
      s.disableStyle();
      fill( fillColor);
      stroke(strokeColor);
    }else{
    //fill( fillColor);
    s.setFill( fillColor);
    s.setStroke( strokeColor);
    }
    shape( s,0,0);
  }//end display

}  //end class Pattern
https://thenounproject.com/