Converting Processing sketch to P5.js - 2D Arrays

borgejor

Hi, I am new to P5.js and I need some help reformating my 2D array. Can anyone tell me how it is done in P5.js? This is my sketch for simple application I am making and I want it on my demo site. The 2D Array below is for calling the different pattens.

` PShape[][] shapes = new PShape[4][4];

var boxCount = 3;
var[] positions = new var [boxCount] ;

var boxSize = 50;
var draggingBox = false;
var boxBeingDragged = 0;
var dragOffset = createVector(0, 0); 

var logo;
var index = 0;
function setup() 
{
   logo = loadImage("thesis_logo.png");
  createCanvas(1920, 1080, P2D); 
  rectMode(CENTER);

  for (var j=0; j < boxCount; j++) {
    var x = random(100, 600);
    var y = random(400, 680);
    positions[j]=  createVector(x, y);
  }
  noStroke();
  fill(#5BC0EB);

  shapes[0][0] = createShape(RECT,1440,450,boxSize,boxSize);
  fill(#000000);
  shapes[0][1] = createShape(RECT,1440,510,boxSize,boxSize);
  shapes[0][2] = createShape(RECT,1440,570,boxSize,boxSize);
  shapes[0][3] = createShape(RECT,1440,630,boxSize,boxSize);

   fill(#5BC0EB);
  shapes[1][0] = createShape(RECT,1350,540,boxSize,boxSize);
  fill(#000000);
  shapes[1][1] = createShape(RECT,1410,540,boxSize,boxSize);
  shapes[1][2] = createShape(RECT,1470,540,boxSize,boxSize);
  shapes[1][3] = createShape(RECT,1530,540,boxSize,boxSize);


  fill(#5BC0EB);
  shapes[2][0] = createShape(RECT,1410,510,boxSize,boxSize);
  fill(#000000);
  shapes[2][1] = createShape(RECT,1470,510,boxSize,boxSize);
  shapes[2][2] = createShape(RECT,1410,570,boxSize,boxSize);
  shapes[2][3] = createShape(RECT,1470,570,boxSize,boxSize);

  fill(#5BC0EB);
   shapes[3][0] = createShape(RECT,1410,480,boxSize,boxSize);
   fill(#000000);
  shapes[3][1] = createShape(RECT,1470,480,boxSize,boxSize);
  shapes[3][2] = createShape(RECT,1410,540,boxSize,boxSize);
  shapes[3][3] = createShape(RECT,1410,600,boxSize,boxSize);
  patternChange();

}

function draw() 
{ 
  background(255);
  fill(#5BC0EB);
  noStroke();
  rect(480,540,50,50);
  for(var j =0; j < 4;j++){
    fill(0);
   shape(shapes[index][j],50,50,boxSize,boxSize);
  }


    stroke(0);
  strokeWeight(2);
  line(width/2,0,width/2,height);
   for (var j=0; j < boxCount; j++) {
    if (draggingBox && j == boxBeingDragged) {
      stroke(255);  // white
    } else {
      noStroke();
    }
    rect( positions[j].x, positions[j].y, boxSize, boxSize) ;
  }

  patternChange();

image(logo, 50, 50, width/8, height/8);

}

function mousePressed() {
  grabBox();
}

function mouseReleased() {
  draggingBox = false;
}

function mouseDragged() {
  if (draggingBox) {
    positions[boxBeingDragged].x = mouseX + dragOffset.x;
    positions[boxBeingDragged].y = mouseY + dragOffset.y;
  }
}
//
function grabBox() {
  for (var i=0; i < boxCount; i++) {
    // Test if the cursor is over the box
    var left = mouseX > positions[i].x - boxSize/2;
    var right = mouseX < positions[i].x + boxSize/2;
    var top = mouseY > positions[i].y - boxSize/2;
    var bottom = mouseY < positions[i].y + boxSize/2;
    if ( left  && right && top && bottom) {
      prvarln ("mouseover box: "+i);
      boxBeingDragged=i;
      draggingBox = true;
      dragOffset.x = positions[i].x - mouseX;
      dragOffset.y = positions[i].y - mouseY;
      break;
    } else {
      draggingBox = false;
    }
  }
}


function patternChange(){

 if (keyPressed) { //switch statement for changing grid createCanvas
    switch(key){
    case '1':
index = 0;
scramble();
    break;
    case '2':
index = 1;
scramble();
    break;
       case '3':
index = 2;
scramble();
    break;

           case '4':
index = 3;
scramble();
    break;
    }
    }
}

function scramble(){
 for (var j=0; j < boxCount; j++) {
    var x = random(100, 600);
    var y = random(400, 680);
    positions[j]=  createVector(x, y);
  }
}`

KevinWorkman

I'd recommend googling "JavaScript 2D array" for a ton of results.