# Issue with canvas.translate within Syphon library

**URL:** <https://discourse.processing.org/t/issue-with-canvas-translate-within-syphon-library/41197>\
**Category:** Libraries\
**Created:** [March 8, 2023, 1:52pm UTC](https://discourse.processing.org/t/issue-with-canvas-translate-within-syphon-library/41197 "2023-03-08T13:52:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jormetz](https://avatars.discourse-cdn.com/v4/letter/j/aeb1de/32.png) [@jormetz](https://discourse.processing.org/u/jormetz)\
**Post date:** [March 8, 2023, 1:52pm UTC](https://discourse.processing.org/t/issue-with-canvas-translate-within-syphon-library/41197/1 "2023-03-08T13:52:56Z")

</div>

Hi everybody!

I am new to Processing & currently working with the Syphon library to send my sketch to MaxMSP. I’m having a weird issue with translating the canvas in which my sketch is not centered, or some blank canvas appears. See screenshot below. I’m posting my code below as well. Please let me know if you have any ideas or if I’m making some silly mistake… Thank you!

 ![Screenshot 2023-03-07 at 6.51.41 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/8/5877ede9dbb52bcca4f2c0f990eba2516e9939c1.png)

```auto
import codeanticode.syphon.*;
PGraphics canvas;
SyphonServer server;

WobblyRing[] rings = new WobblyRing[100];
WobblyRingShrink[] shrink = new WobblyRingShrink[100];

void setup() {
  size(900, 900, P3D);
  canvas = createGraphics (900, 900, P3D);
  //translate(width/2, height/2); try translating here
  frameRate(10);
  smooth();
  for (int i=0; i < rings.length; i++){
    float x = width/2;
    float y = height/2;
    float d = i*15;
    rings[i] = new WobblyRing(x, y, d);
  }
  for (int i=0; i < shrink.length; i++){
    float x = width/2;
    float y = height/2;
    float d = i*15;
    shrink[i] = new WobblyRingShrink(x, y, d);
  }  
  server = new SyphonServer(this, "Processing Syphon");
}

void draw(){
  canvas.beginDraw();
  canvas.translate(width/2, height/2); //try instantiating this line
  canvas.background(0);
  for (int i=0; i < rings.length; i++){
    rings[i].wobble();
    rings[i].grow();
  }
  for (int i=0; i < shrink.length; i++){
    shrink[i].wobble();
    shrink[i].shrink();
  }
  canvas.endDraw();
  //image(canvas, 0, 0); // try translating here, replace with line below
  image(canvas, width/2, height/2); // replace with previous line
  server.sendImage(canvas);
}

class WobblyRing {
  float x;
  float y;
  float d;
  float inc = .1;
  float t = 0; // Time (passed frames actually)
  float speed = 0.005; // Bobbling speed coefficient
  float bobbleRate = 0.75; // More rate -> mor sharp, Less rate - more bobble.
  
    WobblyRing(float tempX, float tempY, float tempD){
      x = tempX;
      y = tempY;
      d = tempD;
    }

void wobble(){
  beginShape(); 
  float phase = t*speed;
  noFill();
  strokeWeight(2);
  strokeJoin(ROUND);
  stroke(random(50,100), random(50), random(150,200), 250); 
 
  for (float i = 0; i <= TWO_PI; i += PI/180) {
    // Playing with bobble rate
    float xoff = map(cos(i), -1, 1, 0, bobbleRate);
    float yoff = map(sin(i), -1, 1, 0, bobbleRate);
    float noise = noise(xoff + phase, yoff + phase);
    
    float r = map(noise, 0, 1, d, d*3);
    float x = r * cos(i); 
    float y = r * sin(i);
    
    vertex(x, y);
    
  }
  endShape();
  t += 1;
  //saveFrame("frame/" + str(t) + ".jpg");
}

void grow() {
    d+= inc; 
  if (d > width){
    d=1;    
  }
 } 
} 

class WobblyRingShrink {
  float x;
  float y;
  float d;
  float inc = .1;
  float t = 0; // Time (passed frames actually)
  float speed = 0.009; // Bobbling speed coefficient
  float bobbleRate = 0.8; // More rate -> mor sharp, Less rate - more bobble.
  
    WobblyRingShrink(float tempX, float tempY, float tempD){
      x = tempX;
      y = tempY;
      d = tempD;
    }

void wobble(){
  beginShape(); 
  float phase = t*speed;
  noFill();
  strokeWeight(2);
  strokeJoin(ROUND);
  stroke(random(50,100), random(50), random(150,200), 250); 
 
  for (float i = 0; i <= TWO_PI; i += PI/180) {
    // Playing with bobble rate
    float xoff = map(cos(i), -1, 1, 0, bobbleRate);
    float yoff = map(sin(i), -1, 1, 0, bobbleRate);
    float noise = noise(xoff + phase, yoff + phase);
    
    float r = map(noise, 0, 1, d, d*3);
    float x = r * cos(i); 
    float y = r * sin(i);
    
    vertex(x, y);
    
  }
  endShape();
  t += 1;
  //saveFrame("frame/" + str(t) + ".jpg");
}

void shrink() {
    d-=.5; 
  if (d==0){
    d=900;    
  }
 } 
}

```

---

<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:** [March 8, 2023, 4:14pm UTC](https://discourse.processing.org/t/issue-with-canvas-translate-within-syphon-library/41197/2 "2023-03-08T16:14:19Z")

</div>

Hello @jormetz,

My exploration…

I removed all the translates.

You are _ **not** _ using this in your class;  
`float x = width/2;`

Consider adding this to class to make use of above:  
`float x = r * cos(i) + this.x;`

If you are adding to the _PGraphic_ canvas in the class you need to also have the _canvas_ prefix:

```auto
  canvas.beginShape(); 
  float phase = t*speed;
  canvas.noFill();
  canvas.strokeWeight(3);
  canvas.strokeJoin(ROUND);
  canvas.stroke(random(50,100), random(50), random(150,200), 200); 
 
  // Code here..
    
  canvas.vertex(x, y);  
  }
  canvas.endShape()

```

Remember that you are drawing offscreen on that _PGraphic_ canvas and then drawing an image of that on the main sketch window.

You must must know what you are drawing to and be consistent.

`image(canvas, 0, 0);`

The _canvas.translate()_ did not work as expected because you were not drawing to the _PGraphic canvas._

I used Spout on my Windows PC to test this:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/b/5bc70eb0b88481150a4a8ddea81dc7e3677f7be3.png)

`:)`

---

<div class="post-metadata">

**Author:** ![jormetz](https://avatars.discourse-cdn.com/v4/letter/j/aeb1de/32.png) [@jormetz](https://discourse.processing.org/u/jormetz)\
**Post date:** [March 8, 2023, 4:40pm UTC](https://discourse.processing.org/t/issue-with-canvas-translate-within-syphon-library/41197/3 "2023-03-08T16:40:26Z")

</div>

> [@glv](#):
>
> float x = r \* cos(i) + this.x;

Thank you so much @glv ! The examples I referenced to implement the Syphon library did not have classes, so I wasn’t aware the canvas.“” syntax needed to extend throughout the entire code.

Everything is working now. Appreciate the help!