How to resize a children shape from a pshape in Processing

edited October 2016 in Questions about Code

I am currently building an app using Processing. I have a shape in which I was able to select its sub elements and manipulate its color and stroke... but I am not being able to resize every single element of the file. Basically, what I want is to resize the whole thing like in:

shape(shape, mouseX, mouseY, 600, 600);//parameters: shape, x-coor, y-coor, new width, new height;

and, to change the color of each element (just like the line above). The code:

PShape shape;
int noOfChilds;
/***************************************************************************/
void setup() 
{
  size(1000, 600);
  shape = loadShape("a.svg");
  noOfChilds = shape.getChildCount();
  print(noOfChilds);
  shapeMode(CENTER);
} 
/***************************************************************************/
void draw() 
{
  background(100);
  shape.enableStyle();
  stroke(255);
  shape(shape, mouseX, mouseY, 600, 600);
  //
  shape.disableStyle();
  for(int i = 0; i < noOfChilds; i++)
  {
    pushMatrix();
    translate(300, 300);
    PShape ps = shape.getChild(i);
    fill(random(255),random(255),random(255));
    shape(ps, 0, 0);//shape(ps, 0, 0, anyValue, anyValue); seems to fail :'(
    popMatrix();
  }
}
/***************************************************************************/

Answers

  • Look at reference for PShape - can't you say ps.setsize in line26?

  • PShape can be resized using PShape.scale(). (I don't see a 'setsize' listed in the reference.)

    While I believe that you could use PShape.scale() on individual child shapes, it seems like it is not necessary in your case.

    In fact, I'm not sure that you want to be resizing your PShape at all.

    This transformation is applied directly to the shape; it's not refreshed each time draw() is run.

    If you are going to scale every single draw with the mouse, then your PShape will instantly expand or shrink to nothing.

    Instead, translate and then use the basic scale() before drawing your shape. To isolate that scaling operation from anything after, use pushMatrix()and popMatrix().

  • it would be useful if you could post a.svg

  • edited October 2016 Answer ✓

    @SAFR

    I can confirm shape() does not display with scaling as expected (at all) after manipulating child shapes in your commented-out code line. I'm not sure if you were ever able to try my advice above.

    I was able to test your sketch by replacing the line shape = loadShape("a.svg"); with:

    shape = loadShape("https:// processing.org/examples/bot1.svg");
    

    Here is code that does the scaling and translation correctly. Notice the matrix transformation are on the whole shape, not the children -- move to the mouse, then scale, then align on the center of the scaled shape.

    /**
     * Resize Child Shape
     * 2016-10-23 Processing 3.2.1
     * Using pushMatrix and popMatrix to isolate shape translations and scaling while manipulating child shapes.
     * Press +/- to scale the shape up and down.
     * https:// forum.processing.org/two/discussion/18464
     **/
    
    PShape shape;
    PShape ps;
    int noOfChilds;
    float sscale;
    
    /***************************************************************************/
    void setup() 
    {
      size(400, 400);
      shape = loadShape("https:// processing.org/examples/bot1.svg");
      noOfChilds = shape.getChildCount();
      print(noOfChilds);
      shapeMode(CENTER);
      sscale = 1.0;
    } 
    /***************************************************************************/
    void draw() 
    {
      background(100);
      shape.enableStyle();
      stroke(255);
      //shape(shape, mouseX, mouseY, 600, 600);
      //
      shape.disableStyle();
      pushMatrix();
      translate(mouseX, mouseY);
      scale(sscale);
      translate(-shape.width/2,-shape.height/2);
      for (int i = 0; i < noOfChilds; i++)
      {
        ps = shape.getChild(i);
        fill(random(255), random(255), random(255));
        shape(ps, 0, 0);
      }
      popMatrix();
    }
    void keyPressed(){
      if(key=='='){ sscale = sscale * 1.1; }
      if(key=='+'){ sscale = sscale * 1.1; }
      if(key=='-'){ sscale = sscale * 0.9; }
    }
    

    ResizeChildShape

    To operate the sketch, move the mouse to translate, press +/- to change scaling factor.

  • Thanks a lot. Solved.

Sign In or Register to comment.