Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
Confluence
For you

Programming
Results will update as you type.
  • Tiling and Repetition
  • Reactors
  • Programming Basics: Parametric and Generative Graphic Design 2016
  • Archive
  • High Scores
  • Artificial Neural Network
  • Alternatives to the Processing IDE
  • p5.js Programming
    • p5.js Introduction
    • p5.js Variables
    • p5.js Random Numbers
    • p5.js SVG + Images
    • p5.js WebGL
    • p5.js Classes and Objects
    • p5.js Events and Functions
    • p5.js Loops
    • p5.js Coordinates
    • P5js Nested Loops
    • p5.js Animation Exercise 1
    • p5.js Animation Exercise 2
    • p5.js Conditionals
    • p5.js Arrays and Lists
    • p5.js Simple Collision Detection
    • p5.js Reactors
      • p5.js Curve Reactor
      • p5.js Simple Reactor
      • p5.js Vector Fields
      • P5js Bitmap or SVG Permutations
    • p5.js Tiling and Repetition
    • p5.js Vectors
    • p5.js Animation Solution with Objects
    • p5.js Easing
    • p5.js Perlin Noise
    • p5.js Particle System
    • p5.js Sound
    • p5j.s Typography
    • P5js Archive
  • Programming in Processing (java)

/
P5js Bitmap or SVG Permutations

P5js Bitmap or SVG Permutations

Jul 30, 2021

Analytics

Loading data...

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);
}


}
, multiple selections available,

Related content

p5.js Programming
p5.js Programming
Programming
Read with this
p5.js Random Numbers
p5.js Random Numbers
Programming
Read with this
p5.js Introduction
p5.js Introduction
Programming
Read with this
p5.js Variables
p5.js Variables
Programming
Read with this
p5.js Events and Functions
p5.js Events and Functions
Programming
Read with this
p5.js Reactors
p5.js Reactors
Programming
Read with this
{"serverDuration": 36, "requestCorrelationId": "ef11221a37d143ee91ebc39ee1f01e24"}