new SVGShape API Design about p5.js-svg HOT 14 CLOSED

Processing's PShape Example

PShape s;

void setup() {
  size(100, 100, P2D);

  // Make a shape
  s = createShape();
  s.beginShape();
  s.noStroke();

  // Exterior part of shape
  s.vertex(-50,-50);
  s.vertex(50,-50);
  s.vertex(50,50);
  s.vertex(-50,50);

  // Interior part of shape
  s.beginContour();
  s.vertex(-20,-20);
  s.vertex(20,-20);
  s.vertex(20,20);
  s.vertex(-20,20);
  s.endContour();

  // Finish off shape
  s.endShape();
}

void draw() {
  background(52);
  translate(width/2, height/2);
  s.rotate(0.01);
  shape(s);
}

from p5.js-svg.

s = createSVGShape();
s.beginShape();
circle();
rect();
s.endShape();

from p5.js-svg.

s = new SVGShape();
s.beginShape();
s.circle();
s.rect();
s.endShape();
c = new SVGShape.Circle();

from p5.js-svg.

s = createSVGShape();
beginShape();
circle();
rect();
endShape();

No, not this one.

from p5.js-svg.

s.translate(100, 100); // move towards right bottom 
s.translate(100, 100); // again
s.rotate(angle); // should respect angleMode
s.rotateTo(angle);

from p5.js-svg.

var blur = new SVGFilter.Blur(5);
s.addFilter(blur);
s.removeFilter(blur);

from p5.js-svg.

s = new SVGShape();
s.circle();
s.rect();
c = new SVGShape.Circle();

This is makes SVGShape easy to modify and reuse. What's more, it's simple.

SVGShape Object should keep ref to this.groupElement

from p5.js-svg.

s.scale()
s.scaleTo()

from p5.js-svg.

e = new SVGShape.Ellipse();
e.width = newWidth;
e.height = newHeight;
e.x = newX;
e.y = newY;

from p5.js-svg.

s = new SVGShape();
c = new SVGShape.Circle(x, y, r);
s.append(c);
c.r = newR;

from p5.js-svg.

Maybe we can just extends RendererSVG? And provide some extra API for Graphics?

from p5.js-svg.

This might be handy, but once this API added, it might break the consistency of p5.js.I think our users might be confused.

from p5.js-svg.

@dannewoo

from p5.js-svg.

SVGElement.prototype.filter and SVGElement.prototype.unfilter was already provided.
But I decided not to add SVGShape for the consistency of p5.js.

from p5.js-svg.