Trying to change position of svg Shape to centre on sketch

Processing Coding Questions
1

Hi, I was wondering if anyone knew how to do this? I’ve changed my screen sketch size to 1968, 1080, however I can’t figure out how to position my shape in the centre of the screen? Sorry if this doesn’t make much sense.

Otherwise is there a way I can make the background transparent?

typeimport ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;
import ddf.minim.signals.*;
import ddf.minim.spi.*;
import ddf.minim.ugens.*;

import processing.serial.*;
import geomerative.*;


Minim minim;
AudioPlayer player;
AudioInput input;

RShape grp;
RPoint[][] pointPaths;

float z = 50;

String inString;  // Input string from serial port
String val;      // Data received from the serial port
int lf = 10;
Serial myPort;

int sensitivity=250;

boolean ignoringStyles = false;

void setup() 
{   

 
   //fullScreen();
   print (Serial.list());
   size(1968, 1080, P3D);

     minim = new Minim(this);
     player = minim.loadFile("WIND ONE.mp3");
     input = minim.getLineIn();
       player.play();
   // I know that the first port in the serial list on my mac
   // is always my  FTDI adaptor, so I open Serial.list()[0].
   // On Windows machines, this generally opens COM1.
   // Open whatever port is the one you're using.
   String portName = Serial.list()[1];
   myPort = new Serial(this, portName, 9600);
   myPort.bufferUntil(lf);
   
     RG.init(this);
     RG.ignoreStyles(ignoringStyles);
 
     RG.setPolygonizer(RG.ADAPTATIVE);
   
   grp = RG.loadShape("B2.svg");
  grp.centerIn(g, 100, 1, 1);
   
   pointPaths = grp.getPointsInPaths();
 
}

void draw()
{
 //z = 10 * sin( frameCount/50.0 * PI);
 
 print(inString);
     background(222,223,224);
      loadShape("B2.svg").disableStyle();  // Ignore the colors in the SVG
 fill(0);    // Set the SVG fill to blue
 stroke(0);
 shapeMode (CENTER);


 
 

for(int i = 0; i < player.bufferSize() - 1; i++)
   {
     inString=str(sensitivity*(player.left.get(i)));
   }
     float Random_var=(float(inString)/400)*50;
     translate(300,300,z);
     for(int i = 0; i<pointPaths.length; i++){
   
   translate((random((Random_var))),(random((Random_var))),z);

   if (pointPaths[i] != null) {
     beginShape();
    for(int j = 0; j<pointPaths[i].length; j++){
       vertex(pointPaths[i][j].x, pointPaths[i][j].y);
     }
     endShape();
   }
 }
   
   
 }
 
 void serialEvent(Serial p) { 
 inString = p.readString(); 
} or paste code here
1 Like
2

I don’t use PShapes too often, but have you looked at PShape.width and PShape.height?

1 Like
3

Here is the key part from the PShape tutorial on how to center a PShape on the screen:

and if we wanted the Rectangle to be drawn from its center:

PShape rectangle;

void setup() {
  size(640,360,P2D);
  rectangle = createShape(RECT,-50,-25,100,50);
}

We can then move it according to the mouse with translate.

void draw() {
  background(51);
  translate(mouseX,mouseY);
  shape(rectangle);
}
1 Like