# Tips for speeding up this sketch

**URL:** <https://discourse.processing.org/t/tips-for-speeding-up-this-sketch/8468>\
**Category:** Coding Questions\
**Created:** [February 17, 2019, 5:35am UTC](https://discourse.processing.org/t/tips-for-speeding-up-this-sketch/8468 "2019-02-17T05:35:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![scottmetoyer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scottmetoyer/32/3702_2.png) [@scottmetoyer](https://discourse.processing.org/u/scottmetoyer)\
**Post date:** [February 17, 2019, 5:35am UTC](https://discourse.processing.org/t/tips-for-speeding-up-this-sketch/8468/1 "2019-02-17T05:35:11Z")

</div>

I’m new to Processing, and have my project working but with some performance issues.

Basically I have 10 images that I’m scaling and moving (with lerp) when a key is pressed. Eventually I’d like to get this up to 100 images, but the performance is pretty bad with just 10.

Here’s the code:

```auto
Shard[] shards = new Shard[10];

void setup() {
  size(800, 600);

  for (int i = 0; i < 10; i++) {
    shards[i] = new Shard("square.png");
  }
  smooth();
  frameRate(30);
}

void keyPressed() {
  if (key == ' ') {
    for (int i = 0; i < 10; i++) {
      shards[i].triggerPulse();
    }
  }
}

void draw(){
  background(0);

  for (int i = 0; i < 10; i++) {
    shards[i].move();
    shards[i].display();
  }
}

```

This is the code for the Shard class:

```auto
class Shard {
  PVector target;
  PVector origin;
  PVector current;

  float targetScale;
  float startScale;
  float currentScale;

  float speed;
  PImage image;

  Shard(String imagePath) {
    origin = new PVector(width/2, height/2);
    target = new PVector(random(width), random(height));
    current = new PVector(origin.x, origin.y);
    currentScale = 1.0;
    startScale = 1.0;
    targetScale = 1.0;
    speed = 0;
    image = loadImage(imagePath);
  }

  void display() {
    imageMode(CENTER);
    image(image, current.x, current.y, image.width * currentScale, image.height * currentScale);
  }

  void triggerPulse() {
    target = new PVector(random(width), random(height));
    targetScale = random(2.0);
  }

  void move() {
    speed += 0.1;

     // Compute the new positions
    current.x = lerp(current.x, target.x, sin(speed));
    current.y = lerp(current.y, target.y, sin(speed));
    currentScale = lerp(currentScale, targetScale, sin(speed));

    if (current.x == target.x || current.y == target.y) {
      target = new PVector(origin.x, origin.y);
      targetScale = startScale;
      speed = 0;
    }

    if (current.x == origin.x || current.y == origin.y) {
      speed = 0;
    }
  }
}

```

Any obvious mistakes here or improvements I can make to speed this up?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 17, 2019, 6:37am UTC](https://discourse.processing.org/t/tips-for-speeding-up-this-sketch/8468/2 "2019-02-17T06:37:02Z")

</div>

while you move and re-scale all pictures the FPS will drop,  
but when stop moving actually no use to show “many” pictures, only the ONE.  
example:

```auto
// https://discourse.processing.org/t/tips-for-speeding-up-this-sketch/8468
int many =10;
Shard[] shards = new Shard[many];
int showid = 0;

void setup() {
  size(800, 600);
  for (int i = 0; i <many; i++) shards[i] = new Shard("square.png", i);
}

void keyPressed() {
  if (key == ' ') {
    for (int i = 0; i <many; i++) shards[i].triggerPulse();
    showid = (int)random(many); // select next random picture to show
    println("new pic "+showid);
  }
}

void draw() {
  surface.setTitle("my gallery "+nf(frameRate,1,1));
  background(200, 200, 0);
  for (int i = 0; i < many; i++) shards[i].moveAndshow();
}

class Shard {
  PVector target;
  PVector origin;
  PVector current;

  float targetScale;
  float startScale;
  float currentScale;

  float speed;
  PImage image;
  int id;

  Shard(String imagePath, int id) {
    origin = new PVector(width/2, height/2);
    target = new PVector(random(width), random(height));
    current = new PVector(origin.x, origin.y);
    currentScale = 1.0;
    startScale = 1.0;
    targetScale = 1.0;
    speed = 0;
    image = loadImage(imagePath);
    this.id = id;
  }

  void display() {
    imageMode(CENTER);
    image(image, current.x, current.y, image.width * currentScale, image.height * currentScale);
    fill(0);
    text(id, width/2, height/2);
  }

  void triggerPulse() {
    target = new PVector(random(width), random(height));
    targetScale = random(2.0);
  }

  void moveAndshow() {
    if (current.x == target.x || current.y == target.y) {
      target = new PVector(origin.x, origin.y);
      targetScale = startScale;
      speed = 0;
    } else {
      speed += 0.1;
      // Compute the new positions
      current.x = lerp(current.x, target.x, sin(speed));
      current.y = lerp(current.y, target.y, sin(speed));
      currentScale = lerp(currentScale, targetScale, sin(speed));
    }

    if (current.x == origin.x || current.y == origin.y) speed = 0;
    // show it from here, not need extra call from draw
    if ( speed > 0 ) display(); // show all while moving // very slow               
    else if ( id == showid ) display(); // show only one random pic
  }
}

```

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [February 17, 2019, 7:52am UTC](https://discourse.processing.org/t/tips-for-speeding-up-this-sketch/8468/3 "2019-02-17T07:52:25Z")

</div>

i think if you switch over to the P2D renderer you will get much better results.

this runs 100 well on my machine

```auto
int amount;
Shard[] shards;

void setup() {
  size(800, 600, P2D);

  amount = 100;

  shards = new Shard[amount];
  for (int i = 0; i < amount; i++) {
    shards[i] = new Shard("square.png");
  }
  
  imageMode(CENTER);
  smooth();
  frameRate(30);
}

void keyPressed() {
  if (key == ' ') {
    for (int i = 0; i < amount; i++) {
      shards[i].triggerPulse();
    }
  }
}

void draw(){
  background(0);

  for (int i = 0; i < amount; i++) {
    shards[i].move();
    shards[i].display();
  }
}

class Shard {
  PVector target;
  PVector origin;
  PVector current;

  float targetScale;
  float startScale;
  float currentScale;

  float speed;
  PImage image;

  Shard(String imagePath) {
    origin = new PVector(width/2, height/2);
    target = new PVector(random(width), random(height));
    current = new PVector(origin.x, origin.y);
    currentScale = 1.0;
    startScale = 1.0;
    targetScale = 1.0;
    speed = 0;
    image = loadImage(imagePath);
  }

  void display() {
    image(image, current.x, current.y, image.width * currentScale, image.height * currentScale);
  }

  void triggerPulse() {
    target.x = random(width);
    target.y = random(height);
    targetScale = random(2.0);
  }

  void move() {
    speed += 0.1;

     // Compute the new positions
    float n = sin(speed);
    current.x = lerp(current.x, target.x, n);
    current.y = lerp(current.y, target.y, n);
    currentScale = lerp(currentScale, targetScale, n);

    if (current.x == target.x || current.y == target.y) {
      //if(PVector.dist(current, target) < 10) {
      target.x = origin.x;
      target.y = origin.y;
      targetScale = startScale;
      speed = 0;
    }
  }
}

```

if you mix this with kll’s great optimizations i think you will have found your solution.

---

<div class="post-metadata">

**Author:** ![scottmetoyer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scottmetoyer/32/3702_2.png) [@scottmetoyer](https://discourse.processing.org/u/scottmetoyer)\
**Post date:** [February 17, 2019, 11:03pm UTC](https://discourse.processing.org/t/tips-for-speeding-up-this-sketch/8468/4 "2019-02-17T23:03:51Z")

</div>

Awesome - switching renderers made a huge difference.

Thank you!

---

<div class="post-metadata">

**Author:** ![scottmetoyer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scottmetoyer/32/3702_2.png) [@scottmetoyer](https://discourse.processing.org/u/scottmetoyer)\
**Post date:** [February 17, 2019, 11:12pm UTC](https://discourse.processing.org/t/tips-for-speeding-up-this-sketch/8468/5 "2019-02-17T23:12:44Z")

</div>

Hmm - eventually, I’ll be using different images with varying levels of opacity, so they will need to remain visible even when not moving.

Creating a variable to hold the number of shards is a great idea though, thank you!