Issue with canvas.translate within Syphon library

[jormetz]

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!

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;    
  }
 } 
}

[glv]

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:

  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:

:)

[jormetz]

@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!