/
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); } }
, multiple selections available,
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