#137 ✓ checked-in
Paul Hinze

PShape datatype

Reported by Paul Hinze | November 29th, 2009 @ 11:04 PM | in 0.9.6

http://processing.org/reference/PShape

Datatype for storing shapes. Processing can currently load and display SVG (Scalable Vector Graphics) shapes. Before a shape is used, it must be loaded with the loadShape() function. The shape() function is used to draw the shape to the display window. The PShape object contain a group of methods, linked below, that can operate on the shape data.

Quote from old Mozilla Wiki table: "Datatype for storing shapes. Processing can currently load and display SVG (Scalable Vector Graphics) shapes. Before a shape is used, it must be loaded with the loadShape() function. The shape() function is used to draw the shape to the display window. The PShape object contain a group of methods, linked below, that can operate on the shape data." (Author Unknown)

Comments and changes to this ticket

  • Daniel H

    Daniel H November 29th, 2009 @ 11:13 PM

    • State changed from “new” to “missing-features”
  • David Humphrey

    David Humphrey March 22nd, 2010 @ 09:34 PM

    • State changed from “missing-features” to “missing-feature-blocker”
  • aSydiK

    aSydiK March 25th, 2010 @ 01:19 PM

    • State changed from “missing-feature-blocker” to “assigned”
    • Assigned user set to “aSydiK”
  • aSydiK

    aSydiK March 25th, 2010 @ 07:43 PM

    • Milestone set to 0.9 release date
  • aSydiK

    aSydiK April 15th, 2010 @ 04:21 PM

    • Milestone changed from 0.9 release date to 0.9.3 release date
  • annasob

    annasob May 21st, 2010 @ 05:22 PM

    • Milestone cleared.
  • aSydiK

    aSydiK May 24th, 2010 @ 10:16 AM

    • Milestone set to 0.9.3 release date
  • aSydiK

    aSydiK May 26th, 2010 @ 12:43 PM

    • Assigned user changed from “aSydiK” to “annasob”
  • annasob

    annasob May 28th, 2010 @ 02:44 PM

    • Milestone cleared.

    PShape, shape(), and loadShape() are all dependent on each other. In order to get loadShape() to work and XML parser is needed. This will take much longer than expected, moving to 0.9.4

  • annasob
  • annasob

    annasob May 31st, 2010 @ 03:42 PM

    • Milestone set to 0.9.3 release date
  • annasob

    annasob June 4th, 2010 @ 06:02 PM

    • Milestone changed from 0.9.3 release date to 1.0 (Final)

    completed but cannot be tested until shape() #150 is done, also waiting on xmlElement review pushing to 1.0

  • annasob

    annasob June 21st, 2010 @ 04:23 PM

    • Milestone changed from 1.0 (Final) to 0.9.7
  • Pomax

    Pomax June 23rd, 2010 @ 03:58 PM

    Be aware that loadShape(new XMLElement(string)) is legal Processing code, and will be the first thing I'll be trying to do when pjs supports both PShape and XMLElement =)

  • annasob

    annasob July 16th, 2010 @ 12:10 AM

    • Milestone changed from 0.9.7 to 0.9.6
    • State changed from “assigned” to “peer-review-requested”
    • Milestone order changed from “0” to “0”

    (from [ebf0da5086a6217f170d3888cb59d9ec8ab3f07b]) finishing touches on shape() [#150 state:peer-review-requested milestone:0.9.6] [#149 state:peer-review-requested milestone:0.9.6] [#151 state:peer-review-requested milestone:0.9.6] http://github.com/annasob/processing-js/commit/ebf0da5086a6217f170d...

  • Pomax

    Pomax July 16th, 2010 @ 02:17 AM

    Quick test before I head off to bed, but when loading the bot.svg example the Philips screw grooves (basically, the grey plusses in the five small white dots, three on the head, two in the mouth) are missing in Chrome. The bizar bit is the following, with repercussions on line 1818 of your processing.js:

    var points="65.342,42.071 63.369,42.071 63.369,40.1 61.396,40.1 61.396,42.071 59.425,42.071 59.425,44.046   61.396,44.046 61.396,46.018 63.369,46.018 63.369,44.046 65.342,44.046 ";
    var spl = points.replace(/\s+/g,' ').trim();
    alert(spl.length);
    

    This gives the value '12' in Firefox, Opera and JSDB. This is the correct value. In Chrome, it gives the completely wrong value '24'. As such, the SVG parser renders bot.svg correctly in FF and Opera, but not in Chrome.

    I am not sure WHY it would mess up this badly, but it does mean any split() operation in pjs is now liable to do bad things(tm) in Chrome...

    I'll look into it some more when I wake up tomorrow.

  • annasob
  • annasob
  • annasob
  • Pomax

    Pomax July 16th, 2010 @ 04:26 PM

    single path cutout (clockwise path with contained counter-clockwise path, or vice versa, nest infinitely) fails to render correctly.

  • Pomax

    Pomax July 16th, 2010 @ 04:54 PM

    As it turns out, path coordinates in SVG cannot be expected to have any clear separators other than whitespace between numerical entries, and simply no whitespace between control commands (M, L, C, etc) and numbers. This means the coordinate unraveling will need to be done differently.

    Instead of doing

    var pathData = this.element.getStringAttribute("d").replace(/\s+/g,' ').trim();
    if (pathData === null) { return; }
    var pathDataChars = pathData.toCharArray();
    
    var pathBuffer = "";
    var lastSeparate = false;
    
    for ( var i = 0; i < pathDataChars.length; i++ ) {
      c = pathDataChars[i].toString();
      ...
    

    Something like

    var pathData = this.element.getStringAttribute("d").replace(/,/g,' ').trim();
    if (pathData === null) { return; }
    var pathDataComponents = pathData.split(/\s+/);
    
    var pathBuffer = "";
    var lastSeparate = false;
    
    for ( var i = 0; i < pathDataComponents.length; i++ ) {
      element = pathDataComponents[i];
      var separate = false;
      ...
    

    benefit is that you don't need to reconstruct numbers this way, because there's no individual chars, it's already split in the correct sized strings.

  • Pomax

    Pomax July 16th, 2010 @ 05:39 PM

    slight inconsistency in colors object. Mostly style, but you're using mixed lower/upper for hex values between colors. however, to elaborate on your colors object with the official html/svg colors:

    var colors = {};
        colors.aliceblue = "#f0f8ff";
        colors.antiquewhite = "#faebd7";
        colors.aqua = "#00ffff";
        colors.aquamarine = "#7fffd4";
        colors.azure = "#f0ffff";
        colors.beige = "#f5f5dc";
        colors.bisque = "#ffe4c4";
        colors.black = "#000000";
        colors.blanchedalmond = "#ffebcd";
        colors.blue = "#0000ff";
        colors.blueviolet = "#8a2be2";
        colors.brown = "#a52a2a";
        colors.burlywood = "#deb887";
        colors.cadetblue = "#5f9ea0";
        colors.chartreuse = "#7fff00";
        colors.chocolate = "#d2691e";
        colors.coral = "#ff7f50";
        colors.cornflowerblue = "#6495ed";
        colors.cornsilk = "#fff8dc";
        colors.crimson = "#dc143c";
        colors.cyan = "#00ffff";
        colors.darkblue = "#00008b";
        colors.darkcyan = "#008b8b";
        colors.darkgoldenrod = "#b8860b";
        colors.darkgray = "#a9a9a9";
        colors.darkgreen = "#006400";
        colors.darkkhaki = "#bdb76b";
        colors.darkmagenta = "#8b008b";
        colors.darkolivegreen = "#556b2f";
        colors.darkorange = "#ff8c00";
        colors.darkorchid = "#9932cc";
        colors.darkred = "#8b0000";
        colors.darksalmon = "#e9967a";
        colors.darkseagreen = "#8fbc8f";
        colors.darkslateblue = "#483d8b";
        colors.darkslategray = "#2f4f4f";
        colors.darkturquoise = "#00ced1";
        colors.darkviolet = "#9400d3";
        colors.deeppink = "#ff1493";
        colors.deepskyblue = "#00bfff";
        colors.dimgray = "#696969";
        colors.dodgerblue = "#1e90ff";
        colors.firebrick = "#b22222";
        colors.floralwhite = "#fffaf0";
        colors.forestgreen = "#228b22";
        colors.fuchsia = "#ff00ff";
        colors.gainsboro = "#dcdcdc";
        colors.ghostwhite = "#f8f8ff";
        colors.gold = "#ffd700";
        colors.goldenrod = "#daa520";
        colors.gray = "#808080";
        colors.green = "#008000";
        colors.greenyellow = "#adff2f";
        colors.honeydew = "#f0fff0";
        colors.hotpink = "#ff69b4";
        colors.indianred = "#cd5c5c";
        colors.indigo = "#4b0082";
        colors.ivory = "#fffff0";
        colors.khaki = "#f0e68c";
        colors.lavender = "#e6e6fa";
        colors.lavenderblush = "#fff0f5";
        colors.lawngreen = "#7cfc00";
        colors.lemonchiffon = "#fffacd";
        colors.lightblue = "#add8e6";
        colors.lightcoral = "#f08080";
        colors.lightcyan = "#e0ffff";
        colors.lightgoldenrodyellow = "#fafad2";
        colors.lightgrey = "#d3d3d3";
        colors.lightgreen = "#90ee90";
        colors.lightpink = "#ffb6c1";
        colors.lightsalmon = "#ffa07a";
        colors.lightseagreen = "#20b2aa";
        colors.lightskyblue = "#87cefa";
        colors.lightslategray = "#778899";
        colors.lightsteelblue = "#b0c4de";
        colors.lightyellow = "#ffffe0";
        colors.lime = "#00ff00";
        colors.limegreen = "#32cd32";
        colors.linen = "#faf0e6";
        colors.magenta = "#ff00ff";
        colors.maroon = "#800000";
        colors.mediumaquamarine = "#66cdaa";
        colors.mediumblue = "#0000cd";
        colors.mediumorchid = "#ba55d3";
        colors.mediumpurple = "#9370d8";
        colors.mediumseagreen = "#3cb371";
        colors.mediumslateblue = "#7b68ee";
        colors.mediumspringgreen = "#00fa9a";
        colors.mediumturquoise = "#48d1cc";
        colors.mediumvioletred = "#c71585";
        colors.midnightblue = "#191970";
        colors.mintcream = "#f5fffa";
        colors.mistyrose = "#ffe4e1";
        colors.moccasin = "#ffe4b5";
        colors.navajowhite = "#ffdead";
        colors.navy = "#000080";
        colors.oldlace = "#fdf5e6";
        colors.olive = "#808000";
        colors.olivedrab = "#6b8e23";
        colors.orange = "#ffa500";
        colors.orangered = "#ff4500";
        colors.orchid = "#da70d6";
        colors.palegoldenrod = "#eee8aa";
        colors.palegreen = "#98fb98";
        colors.paleturquoise = "#afeeee";
        colors.palevioletred = "#d87093";
        colors.papayawhip = "#ffefd5";
        colors.peachpuff = "#ffdab9";
        colors.peru = "#cd853f";
        colors.pink = "#ffc0cb";
        colors.plum = "#dda0dd";
        colors.powderblue = "#b0e0e6";
        colors.purple = "#800080";
        colors.red = "#ff0000";
        colors.rosybrown = "#bc8f8f";
        colors.royalblue = "#4169e1";
        colors.saddlebrown = "#8b4513";
        colors.salmon = "#fa8072";
        colors.sandybrown = "#f4a460";
        colors.seagreen = "#2e8b57";
        colors.seashell = "#fff5ee";
        colors.sienna = "#a0522d";
        colors.silver = "#c0c0c0";
        colors.skyblue = "#87ceeb";
        colors.slateblue = "#6a5acd";
        colors.slategray = "#708090";
        colors.snow = "#fffafa";
        colors.springgreen = "#00ff7f";
        colors.steelblue = "#4682b4";
        colors.tan = "#d2b48c";
        colors.teal = "#008080";
        colors.thistle = "#d8bfd8";
        colors.tomato = "#ff6347";
        colors.turquoise = "#40e0d0";
        colors.violet = "#ee82ee";
        colors.wheat = "#f5deb3";
        colors.white = "#ffffff";
        colors.whitesmoke = "#f5f5f5";
        colors.yellow = "#ffff00";
        colors.yellowgreen = "#9acd32";
    
  • annasob

    annasob July 16th, 2010 @ 10:35 PM

    Ok so from the peer-review i have made 4 tickets to complete PShape:
    #800 - PShape::parsePoly() needs to be fixed so it works in Chrome and doesn't depend on separators
    #798 - PShape::parsePath() needs to be fixed to comply with SVG documentation
    #801 - add PShapeSVG(new XMLElement(svg string)) support
    #802 - SVG single path cutout not rendering correctly

  • Pomax

    Pomax July 16th, 2010 @ 10:52 PM

    • State changed from “peer-review-requested” to “super-review-requested”

    with these items split off, this seems to look good to me.

  • annasob
  • Corban

    Corban July 18th, 2010 @ 01:54 PM

    • State changed from “super-review-requested” to “review-needs-work”

    I have a few issues with ticket:

    1) A few of the examples do not work. When including examples that don't work please specify in the ticket and why they dont work. loadShape 4, 5 and 6. I assume these are added to be fixed later.

    2) There is inconsistent code style used:

    Some things to note:

    conditionals and iterators should always have a space between keyword and opening paren and space between closing paren and opening bracket:

      if (..) {
      for (..) {
    

    opening bracket should always be on the same line as the keyword. Do not do:

      for (..) 
      {
        ..
      }
    

    make sure else statements look like: "} else {" you have some areas with inconsistent spacing "}else {" for instance.

    Do not give extra padding inside conditionals and function params.

    ie.

      if( filename.indexOf(".svg") > -1 ){
    

    should be:

      if (filename.indexOf(".svg") > -1) {
    
    1. Make use of switch statements when warrented. Switch statements are optimized to check a var against multiple conditions. Switch statements are almost more readable.

    for example in the PShapeSVG class parseChild function you make multiple checks vs the name variable, this should be a switch statement.

    There are a few other places like this as well.

  • annasob
  • Pomax

    Pomax July 19th, 2010 @ 12:57 PM

    • State changed from “review-needs-work” to “super-review-requested”
  • annasob

    annasob July 19th, 2010 @ 01:01 PM

    Corban: I tried my best to catch all the formatting errors. Also the test work in all browsers (Safari, Opera, Firefox and Chrome) Chrome however doesn't render the screws in the bot.svg and the examples have to be run on the server due to the xhr permissions thing. I have all examples hosted on: http://matrix.senecac.on.ca/~asobiepa/Processing/SVG/examples/seneca/

  • Pomax

    Pomax July 19th, 2010 @ 01:19 PM

    to elaborate, the screws use the "polygon" element, which is broken in Chrome due to the specific way the 'd' and 'points' paths are parsed, vs. how the SVG spec says they can be found.

    A new ticket has been made for this issue, https://processing-js.lighthouseapp.com/projects/41284/tickets/800-...

  • Corban

    Corban July 19th, 2010 @ 07:58 PM

    • State changed from “super-review-requested” to “staged”
  • Corban

    Corban July 28th, 2010 @ 12:57 PM

    • State changed from “staged” to “checked-in”

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.

Shared Ticket Bins

Attachments

Referenced by

Pages