# Trying to change position of svg Shape to centre on sketch

**URL:** <https://discourse.processing.org/t/trying-to-change-position-of-svg-shape-to-centre-on-sketch/3080>\
**Category:** Coding Questions\
**Created:** [August 28, 2018, 5:23pm UTC](https://discourse.processing.org/t/trying-to-change-position-of-svg-shape-to-centre-on-sketch/3080 "2018-08-28T17:23:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![12345](https://avatars.discourse-cdn.com/v4/letter/1/ec9cab/32.png) [@12345](https://discourse.processing.org/u/12345)\
**Post date:** [August 28, 2018, 5:23pm UTC](https://discourse.processing.org/t/trying-to-change-position-of-svg-shape-to-centre-on-sketch/3080/1 "2018-08-28T17:23:45Z")

</div>

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?

```auto
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

```

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [August 28, 2018, 5:56pm UTC](https://discourse.processing.org/t/trying-to-change-position-of-svg-shape-to-centre-on-sketch/3080/2 "2018-08-28T17:56:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 11, 2018, 4:52pm UTC](https://discourse.processing.org/t/trying-to-change-position-of-svg-shape-to-centre-on-sketch/3080/3 "2018-09-11T16:52:23Z")

</div>

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

> **[PShape](https://processing.org/tutorials/pshape/)**
>
> How to use the PShape class in Processing.

> and if we wanted the Rectangle to be drawn from its center:
> 
> ```auto
> 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.
> 
> ```auto
> void draw() {
> background(51);
> translate(mouseX,mouseY);
> shape(rectangle);
> }
> 
> ```