How do I get my sketch to perform faster?

Processing Coding Questions
1

I have written a sketch that is almost 6000 lines, and I’m still not done. I wanted to check my progress so far to see how the animation is running, and it is very laggy. I tried increasing frame rate to 30 and 60, and it still runs slow. It is a 3D sketch so maybe that has something to do with it? Not sure. It could be my laptop specs, so I’ll provide those below.

My Laptop Specs:
MacBook Pro (15-inch, 2017)
Processor: 3.1 GHz Intel Core i7
Memory: 16 GB 2133 MHz LPDDR3
Graphics: Radeon Pro 560 4 GB
Intel HD Graphics 630 1536 MB

I’m sure my code can be condensed in some way. I’m not sure if that would help. I can’t paste all of my code here because it exceeds the limit, but I’ll post part of it and you should get the general gist. I’m trying to make a music visualizer, so I’d like to have control over each “tile”. The amount of variables is a clue to how many tiles I have created so far. I’d really appreciate any help. Here’s my code:

PShape a;
PShape b;
PShape c;
PShape d;
PShape e;
PShape f;
PShape g;
PShape h;
PShape i;
PShape j;
PShape k;
PShape l;
PShape m;
PShape n;
PShape o;
PShape p;
PShape q;
PShape r;
PShape s;
PShape t;
PShape u;
PShape v;


PShape a2;
PShape b2;
PShape c2;
PShape d2;
PShape e2;
PShape f2;
PShape g2;
PShape h2;
PShape i2;
PShape j2;
PShape k2;
PShape l2;
PShape m2;
PShape n2;
PShape o2;
PShape p2;
PShape q2;
PShape r2;
PShape s2;
PShape t2;
PShape u2;
PShape v2;


PShape a3;
PShape b3;
PShape c3;
PShape d3;
PShape e3;
PShape f3;
PShape g3;
PShape h3;
PShape i3;
PShape j3;
PShape k3;
PShape l3;
PShape m3;
PShape n3;
PShape o3;
PShape p3;
PShape q3;
PShape r3;
PShape s3;
PShape t3;
PShape u3;
PShape v3;


PShape a4;
PShape b4;
PShape c4;
PShape d4;
PShape e4;
PShape f4;
PShape g4;
PShape h4;
PShape i4;
PShape j4;
PShape k4;
PShape l4;
PShape m4;
PShape n4;
PShape o4;
PShape p4;
PShape q4;
PShape r4;
PShape s4;
PShape t4;
PShape u4;
PShape v4;


PShape a5;
PShape b5;
PShape c5;
PShape d5;
PShape e5;
PShape f5;
PShape g5;
PShape h5;
PShape i5;
PShape j5;
PShape k5;
PShape l5;
PShape m5;
PShape n5;
PShape o5;
PShape p5;
PShape q5;
PShape r5;
PShape s5;
PShape t5;
PShape u5;
PShape v5;


PShape a6;
PShape b6;
PShape c6;
PShape d6;
PShape e6;
PShape f6;
PShape g6;
PShape h6;
PShape i6;
PShape j6;
PShape k6;
PShape l6;
PShape m6;
PShape n6;
PShape o6;
PShape p6;
PShape q6;
PShape r6;
PShape s6;
PShape t6;
PShape u6;
PShape v6;


PShape a7;
PShape b7;
PShape c7;
PShape d7;
PShape e7;
PShape f7;
PShape g7;
PShape h7;
PShape i7;
PShape j7;
PShape k7;
PShape l7;
PShape m7;
PShape n7;
PShape o7;
PShape p7;
PShape q7;
PShape r7;
PShape s7;
PShape t7;
PShape u7;
PShape v7;




PShape a8;
PShape b8;
PShape c8;
PShape d8;
PShape e8;
PShape f8;
PShape g8;
PShape h8;
PShape i8;
PShape j8;
PShape k8;
PShape l8;
PShape m8;
PShape n8;
PShape o8;
PShape p8;
PShape q8;
PShape r8;
PShape s8;
PShape t8;
PShape u8;
PShape v8;


PShape a9;
PShape b9;
PShape c9;
PShape d9;
PShape e9;
PShape f9;
PShape g9;
PShape h9;
PShape i9;
PShape j9;
PShape k9;
PShape l9;
PShape m9;
PShape n9;
PShape o9;
PShape p9;
PShape q9;
PShape r9;
PShape s9;
PShape t9;
PShape u9;
PShape v9;


PShape a10;
PShape b10;
PShape c10;
PShape d10;
PShape e10;
PShape f10;
PShape g10;
PShape h10;
PShape i10;
PShape j10;
PShape k10;
PShape l10;
PShape m10;
PShape n10;
PShape o10;
PShape p10;
PShape q10;
PShape r10;
PShape s10;
PShape t10;
PShape u10;
PShape v10;


PShape a11;
PShape b11;
PShape c11;
PShape d11;
PShape e11;
PShape f11;
PShape g11;
PShape h11;
PShape i11;
PShape j11;
PShape k11;
PShape l11;
PShape m11;
PShape n11;
PShape o11;
PShape p11;
PShape q11;
PShape r11;
PShape s11;
PShape t11;
PShape u11;
PShape v11;


float move1;
float rate;

import peasy.*;

PeasyCam cam;

void setup() {
  size(1680,1005,P3D);
   pixelDensity(displayDensity());
   
   move1 = 200;
   rate = 50;
   
   frameRate(60);
  /*
  cam = new PeasyCam(this, 500);
  cam.setMinimumDistance(0);
  cam.setMaximumDistance(100);
  */
}



void draw() {
  background(0);
  
 move1 = move1 + rate;
  
     camera(70.0, 35.0, 120.0, move1, 500.0, 0.0, 
       0.0, 1.0, 0.0);
       
   if(move1 == 750 || move1 == 100){
     rate = -rate;
   }
       
       
  
  /*
  rotateX(-.25);
  rotateY(-.25);
  */
  
  
  /////BOX 1//////
  /////SIDE 1/////
  
  
  
  a = createShape();
  a.beginShape();
  a.fill(0, 0, 255, 255);
  a.stroke(255);
  a.strokeWeight(0.50);
  a.vertex(250, 500);
  a.vertex(250, 600);
  a.vertex(350, 600);
  a.vertex(350, 500);
  a.endShape(CLOSE);
  
  shape(a, 25, 25);
  
  
  
  b = createShape();
  b.beginShape();
  b.fill(255, 0, 255, 255);
  b.stroke(255);
  b.strokeWeight(0.50);
  b.vertex(350, 500);
  b.vertex(350, 600);
  b.vertex(450, 600);
  b.vertex(450, 500);
  b.endShape(CLOSE);
  
  shape(b, 25, 25);
  
  
  c = createShape();
  c.beginShape();
  c.fill(0, 255, 255, 255);
  c.stroke(255);
  c.strokeWeight(0.50);
  c.vertex(450, 600);
  c.vertex(450, 500);
  c.vertex(550, 500);
  c.vertex(550, 600);
  c.endShape(CLOSE);
  
  shape(c, 25, 25);
  
  
  
  d = createShape();
  d.beginShape();
  d.fill(255, 255, 0, 255);
  d.stroke(255);
  d.strokeWeight(0.50);
  d.vertex(550, 500);
  d.vertex(550, 600);
  d.vertex(650, 600);
  d.vertex(650, 500);
  d.endShape(CLOSE);
  
  shape(d, 25, 25);
  
  
  
  
  
  /////SIDE 2//////
  
  
  
  e = createShape();
  e.beginShape();
  e.fill(255, 255, 0, 255);
  e.stroke(255);
  e.strokeWeight(0.50);
  e.vertex(250, 500, 100);
  e.vertex(250, 600, 100);
  e.vertex(350, 600, 100);
  e.vertex(350, 500, 100);
  e.endShape(CLOSE);
  
  shape(e, 25, 25);
  
  
  
  f = createShape();
  f.beginShape();
  f.fill(255, 0, 255, 255);
  f.stroke(255);
  f.strokeWeight(0.50);
  f.vertex(350, 500, 100);
  f.vertex(350, 600, 100);
  f.vertex(450, 600, 100);
  f.vertex(450, 500, 100);
  f.endShape(CLOSE);
  
  shape(f, 25, 25);
  
  
  
  g = createShape();
  g.beginShape();
  g.fill(0, 255, 255, 255);
  g.stroke(255);
  g.strokeWeight(0.50);
  g.vertex(450, 600, 100);
  g.vertex(450, 500, 100);
  g.vertex(550, 500, 100);
  g.vertex(550, 600, 100);
  g.endShape(CLOSE);
  
  shape(g, 25, 25);
  
  
  
  
  h = createShape();
  h.beginShape();
  h.fill(255, 255, 0, 255);
  h.stroke(255);
  h.strokeWeight(0.50);
  h.vertex(550, 500, 100);
  h.vertex(550, 600, 100);
  h.vertex(650, 600, 100);
  h.vertex(650, 500, 100);
  h.endShape(CLOSE);
  
  shape(h, 25, 25);
  
  
  
  
  
  /////SIDE 3//////
  
  
  
  
  i = createShape();
  i.beginShape();
  i.fill(255, 255);
  i.stroke(255);
  i.strokeWeight(0.50);
  i.vertex(250, 500, 0);
  i.vertex(250, 500, 100);
  i.vertex(250, 600, 100);
  i.vertex(250, 600, 0);
  i.endShape(CLOSE);
  
  shape(i, 25, 25);
  
  
  
  
  j = createShape();
  j.beginShape();
  j.fill(255, 255);
  j.stroke(255);
  j.strokeWeight(0.50);
  j.vertex(350, 500, 0);
  j.vertex(350, 500, 100);
  j.vertex(350, 600, 100);
  j.vertex(350, 600, 0);
  j.endShape(CLOSE);
  
  shape(j, 25, 25);
  
  
  
  
  k = createShape();
  k.beginShape();
  k.fill(255, 255);
  k.stroke(255);
  k.strokeWeight(0.50);
  k.vertex(450, 500, 0);
  k.vertex(450, 500, 100);
  k.vertex(450, 600, 100);
  k.vertex(450, 600, 0);
  k.endShape(CLOSE);
  
  shape(k, 25, 25);
    
  
  
  
  l = createShape();
  l.beginShape();
  l.fill(255, 255);
  l.stroke(255);
  l.strokeWeight(0.50);
  l.vertex(550, 500, 0);
  l.vertex(550, 500, 100);
  l.vertex(550, 600, 100);
  l.vertex(550, 600, 0);
  l.endShape(CLOSE);
  
  shape(l, 25, 25);
    
  
  
  
  m = createShape();
  m.beginShape();
  m.fill(255, 255);
  m.stroke(255);
  m.strokeWeight(0.50);
  m.vertex(650, 500, 0);
  m.vertex(650, 500, 100);
  m.vertex(650, 600, 100);
  m.vertex(650, 600, 0);
  m.endShape(CLOSE);
  
  shape(m, 25, 25);
  
  
  
  
  
  /////SIDE 4//////
  
  
  
  
  n = createShape();
  n.beginShape();
  n.fill(0, 255, 0, 255);
  n.stroke(255);
  n.strokeWeight(0.50);
  n.vertex(250, 600);
  n.vertex(250, 600, 100);
  n.vertex(350, 600, 100);
  n.vertex(350, 600);
  n.endShape(CLOSE);
  
  shape(n, 25, 25);
    
  
  
  
  o = createShape();
  o.beginShape();
  o.fill(0, 255, 0, 255);
  o.stroke(255);
  o.strokeWeight(0.50);
  o.vertex(350, 600);
  o.vertex(350, 600, 100);
  o.vertex(450, 600, 100);
  o.vertex(450, 600);
  o.endShape(CLOSE);
  
  shape(o, 25, 25);
  
  
  
  
  p = createShape();
  p.beginShape();
  p.fill(0, 255, 0, 255);
  p.stroke(255);
  p.strokeWeight(0.50);
  p.vertex(450, 600);
  p.vertex(450, 600, 100);
  p.vertex(550, 600, 100);
  p.vertex(550, 600);
  p.endShape(CLOSE);
  
  shape(p, 25, 25);
    
  
  
  
  q = createShape();
  q.beginShape();
  q.fill(0, 255, 0, 255);
  q.stroke(255);
  q.strokeWeight(0.50);
  q.vertex(550, 600);
  q.vertex(550, 600, 100);
  q.vertex(650, 600, 100);
  q.vertex(650, 600);
  q.endShape(CLOSE);
  
  shape(q, 25, 25);
  
  
  
  
  
  /////SIDE 5//////
  
  
  
  r = createShape();
  r.beginShape();
  r.fill(0, 0, 255, 255);
  r.stroke(255);
  r.strokeWeight(0.50);
  r.vertex(250, 500);
  r.vertex(350, 500);
  r.vertex(350, 500, 100);
  r.vertex(250, 500, 100);
  r.endShape(CLOSE);
  
  shape(r, 25, 25);
    
  
  
  s = createShape();
  s.beginShape();
  s.fill(0, 0, 255, 255);
  s.stroke(255);
  s.strokeWeight(0.50);
  s.vertex(350, 500);
  s.vertex(450, 500);
  s.vertex(450, 500, 100);
  s.vertex(350, 500, 100);
  s.endShape(CLOSE);
  
  shape(s, 25, 25);
      
  
  
  t = createShape();
  t.beginShape();
  t.fill(0, 0, 255, 255);
  t.stroke(255);
  t.strokeWeight(0.50);
  t.vertex(450, 500);
  t.vertex(550, 500);
  t.vertex(550, 500, 100);
  t.vertex(450, 500, 100);
  t.endShape(CLOSE);
  
  shape(t, 25, 25);
        
  
  
  u = createShape();
  u.beginShape();
  u.fill(0, 0, 255, 255);
  u.stroke(255);
  u.strokeWeight(0.50);
  u.vertex(550, 500);
  u.vertex(650, 500);
  u.vertex(650, 500, 100);
  u.vertex(550, 500, 100);
  u.endShape(CLOSE);
  
  shape(u, 25, 25);
  
}
2

Create a function to create your shapes and call it from setup, then just display your shapes in your draw().
Currently, you are recreating each shape every frame.

3

Ah, that was it. Thank you!

4

It looks like you are cutting and pasting the same tile code over and over again, filling it out like a form. Don’t do this. Just write a function:

PShape a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v;

void setup() {
  size(600, 600, P3D);
  a = myTile(250, 500, 100, 100, color(0, 0, 255));
  b = myTile(350, 500, 100, 100, color(255, 0, 255));
  c = myTile(450, 500, 100, 100, color(0, 255, 255));
  d = myTile(550, 500, 100, 100, color(255, 255, 0));
  noLoop();
}
void draw() {
  translate(-250, -250);
  shape(a, 25, 25);
  shape(b, 25, 25);
  shape(c, 25, 25);
  shape(d, 25, 25);
}

PShape myTile(float x, float y, float w, float h, color clr) {
  PShape ps = createShape();
  ps.beginShape();
  ps.fill(clr);
  ps.stroke(255);
  ps.strokeWeight(0.50);
  ps.vertex(x, y);
  ps.vertex(x, y+h);
  ps.vertex(x+w, y+h);
  ps.vertex(x+w, y);
  ps.endShape(CLOSE);
  return ps;
}

Still, those calls to myTile and to shape look extremely repetitive. Don’t do that. Just make an array and loop through.

PShape[] tiles = new PShape[4];
color[] colors = new color[]{
  color(0, 0, 255), 
  color(255, 0, 255), 
  color(0, 255, 255), 
  color(255, 255, 0)
};

void setup() {
  size(600, 600, P3D);
  for (int i=0; i<4; i++) {
    tiles[i] = myTile(250 + 100*i, 500, 100, 100, colors[i]);
  }
  noLoop();
}
void draw() {
  translate(-250, -250);
  for (int i=0; i<tiles.length; i++) {
    shape(tiles[i], 25, 25);
  }
}

PShape myTile(float x, float y, float w, float h, color clr) {
  PShape ps = createShape();
  ps.beginShape();
  ps.fill(clr);
  ps.stroke(255);
  ps.strokeWeight(0.50);
  ps.vertex(x, y);
  ps.vertex(x, y+h);
  ps.vertex(x+w, y+h);
  ps.vertex(x+w, y);
  ps.endShape(CLOSE);
  return ps;
}

Now, if you are hand-sculpting your data, there may not be a few elegant loops – although you could do it that way. You could also load it from a data file or data array, and use that to create the shapes. This is much simpler than writing “createShape” 176 times. You really only need to write it once.

https://processing.org/tutorials/arrays/

5

Thanks for this! I’ll mull over it