Example Code
Function to Create 1D array of PShapes - populateShapeList
Function to Display 1D array of PShapes in 2D grid layout displayShapes:
//Create 1D array of PShape data with linear variation in color and size
void setup(){
size( 600, 600);
colorMode(HSB, 360, 100, 100);
background(0);
color purple = color( 280, 100, 100);
//PShape myShape = createShape1( 100, purple); //does the shape work?
//shape( myShape, 0,0);
int rows = 20;
int cols = 20;
PShape[] myShapes = new PShape[ rows*cols ]; //num elements is rows*cols
float cellSize = width/cols;
populateShapeList( myShapes, cellSize);
displayShapes( myShapes, cellSize, rows, cols);
}
//display the 1D array in a 2D grid layout
//use for-loops for grid layout:
//index i: rows, outer loop
//index j: cols, inner loop
//variable k: used to step through the 1D array of Data
void displayShapes( PShape[] shapes, float cellSize, int rows, int cols ){
float xPos = 0; //incrementally add cellSize to move right, along column grid-units, set to 0 for each new row
float yPos= 0; //incrementally add cellSize to move down, along rows grid-units
int k=0; //index to access each PShape in the shapes array
//loop to display in grid:
for( int i=0; i< rows; i++){ //outer loop: rows
for( int j=0; j< cols; j++){ //inner loop: cols
PShape tempShape = shapes[k]; //get one shape from the array of data
//draw one shape in a grid cell
shape( tempShape, xPos, yPos); //display one shape at current xPos, yPos
xPos += cellSize; //move to the next column
k++; //move to the next PShape in the shapes[]
} //end inner loop - cols
//change for next row
xPos=0; //reset to 0 for columns in next row
yPos += cellSize; //move down to next row
} //end outer loop - rows
} //end fuction displayShapes
//populateShapeList: function takes a 1D array of PShapes as input parameter
//After executing populateShapeList, the array elements have been initialize with PShape data.
void populateShapeList( PShape[] shapes, float len ){
int numShapes = shapes.length; //how many elements in the array
for( int i=0; i< numShapes; i++){
//use linear changing i value to calculate linear change in hue
int hue = (int)map( i, 0, numShapes-1,100,260);
color curColor = color( hue, 100, 100);
//use linear changing i value to calculate linear change in fraction for changing len
float fraction = map( i, 0, numShapes-1,0.2, 1.0);
PShape curShape = createShape1( len * fraction, curColor); //create 1 shape
shapes[ i ] = curShape; //put a shape in each array element
} //end for-loop
} //end PopulateShapeList
//create and return a single PShape
PShape createShape1( float len, color c1){
//fill(c1);
PShape s = createShape( RECT, 0,0, len, len);
s.setFill(c1);
return s;
}
Last updated