# Graphics quality compared to OpenFrameworks

**URL:** <https://discourse.processing.org/t/graphics-quality-compared-to-openframeworks/34308>\
**Category:** Beginners\
**Created:** [December 26, 2021, 11:30pm UTC](https://discourse.processing.org/t/graphics-quality-compared-to-openframeworks/34308 "2021-12-26T23:30:32Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![woodwindblues](https://avatars.discourse-cdn.com/v4/letter/w/ba8739/32.png) [@woodwindblues](https://discourse.processing.org/u/woodwindblues)\
**Post date:** [December 26, 2021, 11:30pm UTC](https://discourse.processing.org/t/graphics-quality-compared-to-openframeworks/34308/1 "2021-12-26T23:30:32Z")

</div>

I am working on a sketch that is basically a very simple particle system, but the trails are drawn as lines. I wrote one version of the code in processing and one in openFrameworks. The code is nearly identical, but the output isn’t. While I expected some differences, the processing version does not render smooth lines, whenever the particles are moving quickly, there are some clearly visible stripes/artifacts/gaps in the lines. Also, the aliasing is quite noticeable (I enabled smooth(16)).

Is there anything I can do to improve the output of the processing sketch? I’d prefer to work in an environement without xcode and with shorter compile-time, but if the difference in quality is that noticeable, I can’t justify not choosing openFrameworks.

Images:

[[Album] OF vs Processing ![](https://i.imgur.com/I12l8B4.png?fb "OF vs Processing") ](https://imgur.com/a/TOlI8Sb)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [December 27, 2021, 1:40am UTC](https://discourse.processing.org/t/graphics-quality-compared-to-openframeworks/34308/2 "2021-12-27T01:40:26Z")

</div>

Welcome to the community. Is it possible to see the source code that you are using in Processing? It would also be nice to see screen shots of the two outputs so that we can compare them.

---

<div class="post-metadata">

**Author:** ![woodwindblues](https://avatars.discourse-cdn.com/v4/letter/w/ba8739/32.png) [@woodwindblues](https://discourse.processing.org/u/woodwindblues)\
**Post date:** [December 27, 2021, 2:31am UTC](https://discourse.processing.org/t/graphics-quality-compared-to-openframeworks/34308/3 "2021-12-27T02:31:00Z")

</div>

Sure. In the original post is a link to an imgur album with screenshots. This is the source code:

```auto
PVector[] pos;
PVector[] vel;
PVector[] prevPos;
float[] mass;
int number;

void setup() {
  size(800, 600);
  surface.setResizable(true);
  background(0);
  stroke(255, 255, 255, 5);
  strokeWeight(1);
  smooth(16);
  number = 500;
  pos = new PVector[number];
  vel = new PVector[number];
  prevPos = new PVector[number];
  mass = new float[number];
  
  for (int i = 0; i < number; i++) {
    pos[i] = PVector.random2D().mult(5.0);
    vel[i] = PVector.random2D();
    prevPos[i] = pos[i];
    mass[i] = random(0.3);
  }
}

void draw() {
  PVector mouse = new PVector(mouseX, mouseY);
  for (int i = 0; i < number; i++) {
    PVector acc = PVector.sub(mouse, pos[i]);
    acc.mult(0.01);
    acc.mult(mass[i]);
    vel[i].add(acc);
    pos[i].add(vel[i]);
    
    line(prevPos[i].x, prevPos[i].y, pos[i].x, pos[i].y);
    
    vel[i].mult(0.97);
    prevPos[i] = pos[i];
  }
}

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [December 27, 2021, 2:53am UTC](https://discourse.processing.org/t/graphics-quality-compared-to-openframeworks/34308/4 "2021-12-27T02:53:37Z")

</div>

> [@woodwindblues](#):
>
> original post is a link to an imgur album with screenshots

Sorry, I didn’t scroll down. I can see that there is a clear difference and I would be surprised if we can’t match it, but will defer to others with more experience for their comments.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [December 27, 2021, 9:10am UTC](https://discourse.processing.org/t/graphics-quality-compared-to-openframeworks/34308/5 "2021-12-27T09:10:19Z")

</div>

Obviously OF and Java2D (Processing) render lines differently so it would seem we have to tweak the code between to get similar results.

I got this in Processing by increasing the lines opacity with `stroke(255, 255, 255, 14);` which seems an improvement, at least to me 😁

 ![Screenshot 2021-12-27 at 09.03.29](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/71c2cc97cadc948ea1f4d2c48a1f095d2c48f12a.png)

---

<div class="post-metadata">

**Author:** ![woodwindblues](https://avatars.discourse-cdn.com/v4/letter/w/ba8739/32.png) [@woodwindblues](https://discourse.processing.org/u/woodwindblues)\
**Post date:** [December 27, 2021, 4:48pm UTC](https://discourse.processing.org/t/graphics-quality-compared-to-openframeworks/34308/6 "2021-12-27T16:48:38Z")

</div>

Yes, that does improve the overall look, but sadly the lines still seem to be a series of spaced points rather than continuous lines. Is there anything I can to about that?

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [December 27, 2021, 5:09pm UTC](https://discourse.processing.org/t/graphics-quality-compared-to-openframeworks/34308/7 "2021-12-27T17:09:20Z")

</div>

I think it is very much such it and see. I tried changing the initial velocity with

` vel[i] = PVector.random2D().mult(3);`

and doubled the frame rate by adding the following statement at the end of the setup() function

` frameRate(120);`

and got this which i think is a slight improvement

 ![Screenshot 2021-12-27 at 17.03.42](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/036aa13a9c7095ed73791ba08a0eb099a4480271.jpeg)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 27, 2021, 5:23pm UTC](https://discourse.processing.org/t/graphics-quality-compared-to-openframeworks/34308/8 "2021-12-27T17:23:58Z")

</div>

Hello @woodwindblues,

Take a look at my comments and modifications in the code you provided:

```auto
// Code from:
// https://discourse.processing.org/t/graphics-quality-compared-to-openframeworks/34308/3
// Some modifications made

PVector[] pos;
PVector[] vel;
PVector[] prevPos;
float[] mass;
int number;

void setup() {
  size(800, 600);
  surface.setResizable(true);
  background(255);
  stroke(255);
  strokeWeight(2);
  //smooth(16);
  number = 500;
  pos = new PVector[number];
  vel = new PVector[number];
  prevPos = new PVector[number];
  mass = new float[number];
  
  for (int i = 0; i < number; i++) {
    pos[i] = PVector.random2D().mult(5.0);
    vel[i] = PVector.random2D();
    prevPos[i] = pos[i];
    mass[i] = random(0.3);
  }
}

void draw() 
  {
  PVector mouse = new PVector(mouseX, mouseY);
  for (int i = 0; i < number; i++) 
    {
    //PVector mouse = new PVector(mouseX, mouseY);
    PVector acc = PVector.sub(mouse, pos[i]);
    acc.mult(0.01);
    acc.mult(mass[i]);
    vel[i].add(acc);
    pos[i].add(vel[i]);
    
   // Check to see if vector updated:
    if (prevPos[i].x != pos[i].x)
    println(prevPos[i].x, prevPos[i].y, pos[i].x, pos[i].y);
    
    stroke(255, 0, 0, 5);
    line(prevPos[i].x, prevPos[i].y, pos[i].x, pos[i].y);
    
    vel[i].mult(0.97);
    //Try it with and without copy()
    prevPos[i] = pos[i].copy();
    //prevPos[i] = pos[i];
    }
  }

```

Take a look at where I used `copy();`

References:

- [PVector / Processing.org](https://processing.org/tutorials/pvector)
- [The Nature of Code](https://natureofcode.com/book/chapter-1-vectors/)

`:)`

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [December 27, 2021, 5:58pm UTC](https://discourse.processing.org/t/graphics-quality-compared-to-openframeworks/34308/9 "2021-12-27T17:58:04Z")

</div>

Well spotted @glv I have slightly modified your code to avoid creating new objects in the draw method. The copy is now made in setup and the `pos[]` contents is copied to `prevPos[]` in draw.

```auto
PVector[] pos;
PVector[] vel;
PVector[] prevPos;
float[] mass;
int number;

void setup() {
  size(800, 600);
  surface.setResizable(true);
  background(0);
  stroke(255, 255, 255, 5);
  strokeWeight(1);
  smooth(16);
  number = 500;
  pos = new PVector[number];
  vel = new PVector[number];
  prevPos = new PVector[number];
  mass = new float[number];

  for (int i = 0; i < number; i++) {
    pos[i] = PVector.random2D().mult(5.0);
    vel[i] = PVector.random2D();
    prevPos[i] = pos[i].copy();
    mass[i] = random(0.3);
  }
}

void draw() {
  PVector mouse = new PVector(mouseX, mouseY);
  for (int i = 0; i < number; i++) {
    PVector acc = PVector.sub(mouse, pos[i]);
    acc.mult(0.01);
    acc.mult(mass[i]);
    vel[i].add(acc);
    pos[i].add(vel[i]);

    line(prevPos[i].x, prevPos[i].y, pos[i].x, pos[i].y);

    vel[i].mult(0.97);
    prevPos[i].set(pos[i]);
  }
}

```

---

<div class="post-metadata">

**Author:** ![woodwindblues](https://avatars.discourse-cdn.com/v4/letter/w/ba8739/32.png) [@woodwindblues](https://discourse.processing.org/u/woodwindblues)\
**Post date:** [December 27, 2021, 9:11pm UTC](https://discourse.processing.org/t/graphics-quality-compared-to-openframeworks/34308/10 "2021-12-27T21:11:02Z")

</div>

Thank you, now it looks almost as good as the OF version. I checked the references you linked, but I still don’t quite unterstand, why the original code is slower.

Does

```auto
prevPos[i] = pos[i]

```

point prevPos to the vector in pos instead of copying it and that makes it slower?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 27, 2021, 10:08pm UTC](https://discourse.processing.org/t/graphics-quality-compared-to-openframeworks/34308/11 "2021-12-27T22:08:48Z")

</div>

Hello,

> [@woodwindblues](#):
>
> the lines still seem to be a series of spaced points rather than continuous lines. Is there anything I can to about that?

The example I provided illustrated that you were not copying the PVector and I was addressing that issue only.

> [@woodwindblues](#):
>
> Does
> 
> ```auto
> prevPos[i] = pos[i]
> 
> ```
> 
> point prevPos to the vector in pos instead of copying it and that makes it slower?

The _Nature of Code_ references discusses this in the _1.9 Static vs. Non-Static Functions_ section.

The “slower” is a different issue.

`:)`

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [December 28, 2021, 9:10am UTC](https://discourse.processing.org/t/graphics-quality-compared-to-openframeworks/34308/12 "2021-12-28T09:10:28Z")

</div>

> [@woodwindblues](#):
>
> `prevPos[i] = pos[i];`

Both `prevPos[i]` and `pos[i]` are _references_ to a PVector object. When you execute the code above you copy the _reference_ not the object. It means that both `prevPos[i]` and `pos[i]` refer to the same PVector object.

The statement  
`prevPos[i] = pos[i].copy();`

creates a new PVector object with its own reference which is stored in `prevPos[i]`. So now both `prevPos[i]` and `pos[i]` refer to different objects.