PShape getChild positioning and size behaviour

[kasperkamperman]

In Processing 2.2.1 the child is positioned and sizes relatively to the parent. In Processingjs 1.4.8 the behaviour is different.

The width and height parameters are ignored with child shapes. According to the processingjs reference it should work: shape(sh,x,y,width,height) [http://processingjs.org/reference/shape_/]

It's strange because getChild returns a new PShape object. disableStyle(), enabelStyle() doesn't matter. Scaling the Shape with the scale function works.

PShape knob;
PShape knobInside;

void setup() {
  size(800, 800); 

  knob = loadShape("lumiflow_colorknob.svg");
  knob.disableStyle();  
  knobInside = knob.getChild("pointer");  
}

void draw() {  
  background(0,0,0);  

  fill(255,0,0); 
  shape(knob, 0, 0, 400,400);

  fill(255,255,0);
  shape(knobInside, 0,0, 400,400);  
}

Processing 2.2.1

ProcessingJS 1.4.8

Link to the SVG file

Folder with the whole code

[kasperkamperman]

If you do println(knobInside.width) it prints 'null' while println(knob.width) returns 800.

[tdhsmith]

I haven't surveyed this part of the code, so I don't know what a fix would be like, but according to this comment, PShapeSVG.js does not provide a getChild method yet:

  /**
   * PShapeSVG methods
   * missing: getChild(), print(), parseStyleAttributes(), styles() - deals with strokeGradient and fillGradient
   */
  PShapeSVG.prototype = new PShape();

So instead you're getting the output of the parent class' (PShape) method, which probably returns a valid object, but not one that could correctly inherit values from a parent SVG element.

[kasperkamperman]

In the reference there is even an example that uses the getChild method (with an SVG): [http://processingjs.org/reference/PShape_getChild_/]

So strange that in the code getChild() seems missing.

It also returns the child only the size parameters don't work.

My work around is to scale the returned shape myself with a calculated scalefactor (by the size of the parent).

[Pomax]

@tdhsmith that comment is out of date. PShapeSVG inherits getChild from https://github.com/processing-js/processing-js/blob/863b36de7ec23e23fb83ad3e5176596981c1b701/src/Objects/PShape.js#L397

[Pomax]

shape data is encoded as absolute coordinate data, irrespective of nesting, so the getChild method might need to be corrected for its parent's top-left coordinate before being returned in the PShape object definition.

[tdhsmith]

Yeah so I just noticed. Sorry for leaping to conclusions!

[Pomax]

no worries, nested code with outdated comments is always the inverse of a winner. Step one: let's remove that comment =D

[kasperkamperman]

Well the top-left coördinate seems good and relative to the parent. Adding knobInside.scale(0.5); in the setup scales the knobInside shape to the correct size and position (but also scales the child in the original knob).