Processing: Is there a way to put my shapes into a loop and make my code shorter?

Question

I am making an loyalty card and with every mouseclick one part of an svg image gets stamped with disableStyle().

I cannot seem to find a way in where I can make PShapes in a loop and disable their style with getChild().

I only get it to work in this way. I know it can be shorter with some solution. But how?

import processing.svg.*;
import java.util.ArrayList; 

PImage bg;
PImage bg2;
PShape bolsvg;
//PShape bol1,bol2,bol3,bol4,bol5, bol6,bol7,bol8,bol9, bol10,bol11,bol12,bol13;
PShape[] bollen = new PShape[80];
int kwartje = 0;
//ArrayList shapes = new ArrayList();


void setup() {
  size(600, 600);
  bg = loadImage("bg1.png");
  bg2 = loadImage("bg2.png");
  bolsvg = loadShape("Bolletjes.svg");

  PShape bol1 = bolsvg.getChild("1");
  PShape bol2 = bolsvg.getChild("2");
  PShape bol3 = bolsvg.getChild("3");
  PShape bol4 = bolsvg.getChild("4");
  PShape bol5 = bolsvg.getChild("5");
  PShape bol6 = bolsvg.getChild("6");
  PShape bol7 = bolsvg.getChild("7");
  PShape bol8 = bolsvg.getChild("8");
  PShape bol9 = bolsvg.getChild("9");
  PShape bol10 = bolsvg.getChild("10");

  PShape bol11 = bolsvg.getChild("11");
  PShape bol12 = bolsvg.getChild("12");
  PShape bol13 = bolsvg.getChild("13");
  PShape bol14 = bolsvg.getChild("14");
  PShape bol15 = bolsvg.getChild("15");
  PShape bol16 = bolsvg.getChild("16");
  PShape bol17 = bolsvg.getChild("17");
  PShape bol18 = bolsvg.getChild("18");
  PShape bol19 = bolsvg.getChild("19");
  PShape bol20 = bolsvg.getChild("20");

  PShape bol21 = bolsvg.getChild("21");
  PShape bol22 = bolsvg.getChild("22");
  PShape bol23 = bolsvg.getChild("23");
  PShape bol24 = bolsvg.getChild("24");
  PShape bol25 = bolsvg.getChild("25");
  PShape bol26 = bolsvg.getChild("26");
  PShape bol27 = bolsvg.getChild("27");
  PShape bol28 = bolsvg.getChild("28");
  PShape bol29 = bolsvg.getChild("29");
  PShape bol30 = bolsvg.getChild("30");

  PShape bol31 = bolsvg.getChild("31");
  PShape bol32 = bolsvg.getChild("32");
  PShape bol33 = bolsvg.getChild("33");
  PShape bol34 = bolsvg.getChild("34");
  PShape bol35 = bolsvg.getChild("35");
  PShape bol36 = bolsvg.getChild("36");
  PShape bol37 = bolsvg.getChild("37");
  PShape bol38 = bolsvg.getChild("38");
  PShape bol39 = bolsvg.getChild("39");
  PShape bol40 = bolsvg.getChild("40");

  PShape bol41 = bolsvg.getChild("41");
  PShape bol42 = bolsvg.getChild("42");
  PShape bol43 = bolsvg.getChild("43");
  PShape bol44 = bolsvg.getChild("44");
  PShape bol45 = bolsvg.getChild("45");
  PShape bol46 = bolsvg.getChild("46");
  PShape bol47 = bolsvg.getChild("47");
  PShape bol48 = bolsvg.getChild("48");
  PShape bol49 = bolsvg.getChild("49");
  PShape bol50 = bolsvg.getChild("50");

  PShape bol51 = bolsvg.getChild("51");
  PShape bol52 = bolsvg.getChild("52");
  PShape bol53 = bolsvg.getChild("53");
  PShape bol54 = bolsvg.getChild("54");
  PShape bol55 = bolsvg.getChild("55");
  PShape bol56 = bolsvg.getChild("56");
  PShape bol57 = bolsvg.getChild("57");
  PShape bol58 = bolsvg.getChild("58");
  PShape bol59 = bolsvg.getChild("59");
  PShape bol60 = bolsvg.getChild("60");

  PShape bol61 = bolsvg.getChild("61");
  PShape bol62 = bolsvg.getChild("62");
  PShape bol63 = bolsvg.getChild("63");
  PShape bol64 = bolsvg.getChild("64");
  PShape bol65 = bolsvg.getChild("65");
  PShape bol66 = bolsvg.getChild("66");
  PShape bol67 = bolsvg.getChild("67");
  PShape bol68 = bolsvg.getChild("68");
  PShape bol69 = bolsvg.getChild("69");
  PShape bol70 = bolsvg.getChild("70");

  PShape bol71 = bolsvg.getChild("71");
  PShape bol72 = bolsvg.getChild("72");
  PShape bol73 = bolsvg.getChild("73");
  PShape bol74 = bolsvg.getChild("74");
  PShape bol75 = bolsvg.getChild("75");
  PShape bol76 = bolsvg.getChild("76");
  PShape bol77 = bolsvg.getChild("77");
  PShape bol78 = bolsvg.getChild("78");
  PShape bol79 = bolsvg.getChild("79");
  PShape bol80 = bolsvg.getChild("80");

  //for(int i =0; i<20;i++){
  //  bol1 = bolsvg.getChild(i);

  //}
  bollen[0] = bol1;
  bollen[1] = bol2;
  bollen[2] = bol3;
  bollen[3] = bol4;
  bollen[4] = bol5;
  bollen[5] = bol6;
  bollen[6] = bol7;
  bollen[7] = bol8;
  bollen[8] = bol9;
  bollen[9] = bol10;

  bollen[10] = bol11;
  bollen[11] = bol12;
  bollen[12] = bol13;
  bollen[13] = bol14;
  bollen[14] = bol15;
  bollen[15] = bol16;
  bollen[16] = bol17;
  bollen[17] = bol18;
  bollen[18] = bol19;
  bollen[19] = bol20;

  bollen[20] = bol21;
  bollen[21] = bol22;
  bollen[22] = bol23;
  bollen[23] = bol24;
  bollen[24] = bol25;
  bollen[25] = bol26;
  bollen[26] = bol27;
  bollen[27] = bol28;
  bollen[28] = bol29;
  bollen[29] = bol30;

  bollen[30] = bol31;
  bollen[31] = bol32;
  bollen[32] = bol33;
  bollen[33] = bol34;
  bollen[34] = bol35;
  bollen[35] = bol36;
  bollen[36] = bol37;
  bollen[37] = bol38;
  bollen[38] = bol39;
  bollen[39] = bol40;

  bollen[40] = bol41;
  bollen[41] = bol42;
  bollen[42] = bol43;
  bollen[43] = bol44;
  bollen[44] = bol45;
  bollen[45] = bol46;
  bollen[46] = bol47;
  bollen[47] = bol48;
  bollen[48] = bol49;
  bollen[49] = bol50;
  bollen[50] = bol51;

  bollen[51] = bol52;
  bollen[52] = bol53;
  bollen[53] = bol54;
  bollen[54] = bol55;
  bollen[55] = bol56;
  bollen[56] = bol57;
  bollen[57] = bol58;
  bollen[58] = bol59;
  bollen[59] = bol60;
  bollen[60] = bol61;

  bollen[61] = bol62;
  bollen[62] = bol63;
  bollen[63] = bol64;
  bollen[64] = bol65;
  bollen[65] = bol66;
  bollen[66] = bol67;
  bollen[67] = bol68;
  bollen[68] = bol69;
  bollen[69] = bol70;
  bollen[70] = bol71;

  bollen[71] = bol72;
  bollen[72] = bol73;
  bollen[73] = bol74;
  bollen[74] = bol75;
  bollen[75] = bol76;
  bollen[76] = bol77;
  bollen[77] = bol78;
  bollen[78] = bol79;
  bollen[79] = bol80;


  //  for(int i = 1; i< 80; i++){
  //    shapes.add(bollen[i]);
  //  }
  //}
}

void draw() {
  background(255);
  image(bg, 0, 0);
  shape(bolsvg, 0, -122);
  image(bg2, 30, 82);
  //for (int i = 0; i < 10; i++) {
  // bollen[i] = kwart.getChild(i);
  //}
}

void mousePressed() {
  if (mouseButton == LEFT) {
    for (int i = 0; i < 20; i++) {
    }
    kwartje++;
    if (kwartje > 79) {
      kwartje = 79;
    }
    bollen[kwartje].disableStyle();
    print(kwartje);
    
  } else if (mouseButton == RIGHT) {
    if (kwartje < 0) {
      kwartje = 0;
    }
    bollen[kwartje].enableStyle();
    kwartje--;
    print(kwartje);
    
  } else {
    fill(251, 210, 114);
  }
}

user_89766 · Answer

In addition to Johny Mopp's answer, it's worth considering if bolsvg's children are just the layers from "1" to "80".

If so, after you load the SVG you can simply use PShape's getChildren():

bollen = bolsvg.getChildren();

In fact, since it only appears you need this array along with an index, you can just use getChild(index):

PImage bg;
PImage bg2;
PShape bolsvg;
int kwartje = 0;


void setup() {
  size(600, 600);
  bg = loadImage("bg1.png");
  bg2 = loadImage("bg2.png");
  bolsvg = loadShape("Bolletjes.svg");
}

void draw() {
  background(255);
  image(bg, 0, 0);
  shape(bolsvg, 0, -122);
  image(bg2, 30, 82);
}

void mousePressed() {
  if (mouseButton == LEFT) {
    kwartje++;
    if (kwartje > 79) {
      kwartje = 79;
    }
    bolsvg.getChild(kwartje).disableStyle();
    print(kwartje);
    
  } else if (mouseButton == RIGHT) {
    kwartje--;
    if (kwartje < 0) {
      kwartje = 0;
    }
    bolsvg.getChild(kwartje).enableStyle();
    print(kwartje);
    
  } else {
    fill(251, 210, 114);
  }
  
}

or, if there multiple layers and the naming is crucial:

PImage bg;
PImage bg2;
PShape bolsvg;
int kwartje = 0;


void setup() {
  size(600, 600);
  bg = loadImage("bg1.png");
  bg2 = loadImage("bg2.png");
  bolsvg = loadShape("Bolletjes.svg");
}

void draw() {
  background(255);
  image(bg, 0, 0);
  shape(bolsvg, 0, -122);
  image(bg2, 30, 82);
}

void mousePressed() {
  if (mouseButton == LEFT) {
    kwartje++;
    if (kwartje > 79) {
      kwartje = 79;
    }
    bolsvg.getChild(""+(kwartje+1)).disableStyle();
    print(kwartje);
    
  } else if (mouseButton == RIGHT) {
    kwartje--;
    if (kwartje < 0) {
      kwartje = 0;
    }
    bolsvg.getChild(""+(kwartje+1)).enableStyle();
    print(kwartje);
    
  } else {
    fill(251, 210, 114);
  }
  
}

The kwartje index + 1 gets to the range 1 to 80 and concatenating the int with a String("") is another of converting that int to a string. (Integer.toString(kwartje + 1) would've had the same effect)

Note the above code isn't tested so might crash on an error, but hopefully it does illustrate the idea.

Processing: Is there a way to put my shapes into a loop and make my code shorter?

1 Answers