/
P5js Bitmap or SVG Permutations

P5js Bitmap or SVG Permutations

int gridW = 15;
int gridH = 15;
int xStep = 60;
int yStep = 60;


PShape[] imageList; 

void setup()
{
 size(800, 800);
 smooth();

 imageList = new PShape[9];
 imageList[0] = loadShape("perm1.svg");
 imageList[1] = loadShape("perm2.svg");
 imageList[2] = loadShape("perm3.svg");
 imageList[3] = loadShape("perm4.svg");
 imageList[4] = loadShape("perm5.svg");
 imageList[5] = loadShape("perm6.svg");
 imageList[6] = loadShape("perm7.svg");
 imageList[7] = loadShape("perm8.svg");
 imageList[8] = loadShape("perm9.svg");
}

void draw()
{
 background(255);
 int newIndex;
 for (int i=0; i < gridW; i++)
 {
 for (int j=0; j < gridH; j++)
 {
 PVector pos = new PVector(i * xStep, j * yStep);
 newIndex = calcIndex(pos, imageList.length);
 pushMatrix();
 translate(pos.x, pos.y);
 scale(.5);
 shape(imageList[newIndex], 0, 0);
 popMatrix();
 }
 }
}

int calcIndex(PVector obj, int maxIndex)
{
 float distance = dist(obj.x, obj.y, mouseX, mouseY);
 return (int)map(distance, 0, dist(0, 0, width, height), 0, maxIndex-1);
}





Example for leap motion


class VisualD {
  int shapeWidth = 60; 
  int shapeHeight = 60;  
  int gridWidth; 
  int gridHeight; 

  PShape[] imageList;

  VisualD() {

    gridWidth = width/shapeWidth+1; 
    gridHeight = height/shapeHeight+1;

    imageList = new PShape[9];
    imageList[0] = loadShape("perm1.svg");
    imageList[1] = loadShape("perm2.svg");
    imageList[2] = loadShape("perm3.svg");
    imageList[3] = loadShape("perm4.svg");
    imageList[4] = loadShape("perm5.svg");
    imageList[5] = loadShape("perm6.svg");
    imageList[6] = loadShape("perm7.svg");
    imageList[7] = loadShape("perm8.svg");
    imageList[8] = loadShape("perm9.svg");

  }

  void draw(PVector _reactorPosition, float _reactorScaler) {


    background(255);
    int newIndex;

    for (int i=0; i < gridWidth; i++)
    {
      for (int j=0; j < gridHeight; j++)
      {


        PVector pos = new PVector(i * shapeWidth, j * shapeHeight);
        newIndex = calcIndex(pos, imageList.length, _reactorPosition);
        pushMatrix();
        translate(pos.x, pos.y);
        scale(.5);
        shape(imageList[newIndex], 0, 0);
        popMatrix();

      }
    }

  }

  int calcIndex(PVector obj, int maxIndex, PVector _reactorPosition){
  float distance = dist(obj.x,obj.y, _reactorPosition.x,_reactorPosition.y);
  return (int)map(distance,0,dist(0,0,width,height),0,maxIndex-1);
}


}

Related content

p5.js Programming
p5.js Programming
Read with this
p5.js Random Numbers
p5.js Random Numbers
Read with this
p5.js Introduction
p5.js Introduction
Read with this
p5.js Variables
p5.js Variables
Read with this
p5.js Events and Functions
p5.js Events and Functions
Read with this
p5.js Reactors
p5.js Reactors
Read with this