How to draw a lot of Shapes the best way?

edited October 2015 in Questions about Code

Hi,

I wonder what is the best way to draw a lot of shapes and/or images to the screen. Since my tests show a hard drop to the FPS even when drawing a shape a few times.

Here is a simple example. The following code draws an svg Image 7 x 12 times to the screen. In my opinion this should be doable with even the slowest machines out there. But if I run this sample the FPS drop from 60 to 40. What's wrong with my code? I can't believe that processing is that slow? What if I want to draw hundreds of different shapes to the screen when it is already slow by drawing 84 times the same shape? Will drawing pixel images be faster than shapes?

PShape imgTest;

public void setup() {
  imgTest = loadShape("test.svg");

  size(1280, 720, JAVA2D);
}

public void draw() {
  background(0);
  for(int y = 0; y < 7; y++) {
    for(int x = 0; x < 12; x++) {
      shape(imgTest, x * 110 + 10 , y * 110 + 20, 100, 100);
    }
  }

  text(int(frameRate) + " fps", 5, 15);
}

Tagged:

Answers

  • In my opinion this should be doable with even the slowest machines out there

    in my opinion your opinion is wrong. 8)

    svg is a scalable vector graphic. it's decoding the instructions and rendering the shape every single time, it's not just copying bits.

    you could try writing the shape to a PGraphic and copying that (one render, n copies)

  • So, you mean in general pixel graphics would be faster than vector graphics? Copying the one image x-times is just an example... in the end there are several different images instead of just one. Just want to make a little game but with this slowness this doesn't make any sense at all.

    And calculating and rendering 84 vector graphics can't be that hard at all compared with other games or programs around... I sure know that processing is not the prefered language for making games but I thought that there might be another way getting some more speed out of it. Just wondering about it's slowness.

    So I will try your hint by converting graphics into pixel graphics... perhaps that helps. Thanks.

  • the other games aren't using svgs for their images.

    i don't have the file you're using but there's a similar one here: https://upload.wikimedia.org/wikipedia/commons/1/11/Blue_question_mark_icon.svg

    hit ctrl-u to view the source and you'll see

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!-- Created with Inkscape (http://www.inkscape.org/) -->
    
    <svg
       xmlns:dc="http://purl.org/dc/elements/1.1/"
       xmlns:cc="http://creativecommons.org/ns#"
       xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns:svg="http://www.w3.org/2000/svg"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       version="1.1"
       width="100.06725"
       height="99.947037"
       id="svg3854">
      <defs
         id="defs3856">
        <linearGradient
           x1="117.05355"
           y1="83.525589"
           x2="116.83034"
           y2="62.245369"
           id="linearGradient3852"
           xlink:href="#linearGradient3766"
           gradientUnits="userSpaceOnUse" />
        <linearGradient
           id="linearGradient3766">
          <stop
             id="stop3768"
             style="stop-color:#0645ad;stop-opacity:1"
             offset="0" />
          <stop
             id="stop3770"
             style="stop-color:#398fea;stop-opacity:1"
             offset="1" />
        </linearGradient>
        <linearGradient
           x1="117.05355"
           y1="83.525589"
           x2="116.83034"
           y2="62.245369"
           id="linearGradient3823"
           xlink:href="#linearGradient3766"
           gradientUnits="userSpaceOnUse" />
        <linearGradient
           id="linearGradient3877">
          <stop
             id="stop3879"
             style="stop-color:#0755d4;stop-opacity:1"
             offset="0" />
          <stop
             id="stop3881"
             style="stop-color:#39b2ea;stop-opacity:1"
             offset="1" />
        </linearGradient>
        <linearGradient
           x1="117.05355"
           y1="83.525589"
           x2="116.83034"
           y2="62.245369"
           id="linearGradient3886"
           xlink:href="#linearGradient3766"
           gradientUnits="userSpaceOnUse" />
        <linearGradient
           x1="117.05355"
           y1="83.525589"
           x2="116.83034"
           y2="62.245369"
           id="linearGradient3888"
           xlink:href="#linearGradient3766"
           gradientUnits="userSpaceOnUse" />
      </defs>
      <metadata
         id="metadata3859">
        <rdf:RDF>
          <cc:Work
             rdf:about="">
            <dc:format>image/svg+xml</dc:format>
            <dc:type
               rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
            <dc:title></dc:title>
          </cc:Work>
        </rdf:RDF>
      </metadata>
      <g
         transform="translate(-245.36448,-335.58716)"
         id="layer1">
        <path
           d="m 126.875,72.920212 a 9.9776783,9.9776783 0 1 1 -19.95535,0 9.9776783,9.9776783 0 1 1 19.95535,0 z"
           transform="matrix(4.5679772,0,0,4.5624894,-238.5556,52.855392)"
           id="path2996"
           style="fill:url(#linearGradient3886);fill-opacity:1;stroke:url(#linearGradient3888);stroke-width:1.93733549;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
        <path
           d="m 277.2878,360.81916 -0.33251,0.33167 1.33428,6.66299 3.00199,0.33168 c 15.96053,-19.24912 32.85575,-0.70752 17.05131,14.94242 -5.27871,5.22696 -6.63016,10.83884 -6.67107,17.65699 0,0.61085 2.3028,1.3327 3.00198,1.3327 0.69918,0 2.66848,-0.72252 2.66848,-1.3327 -0.88719,-5.92497 1.93321,-10.25348 5.33679,-13.65923 11.07525,-11.08209 16.17721,-22.35535 6.4104,-30.42962 -6.91416,-5.71596 -19.99521,-6.66515 -31.8014,4.16177 z"
           id="path3836"
           style="font-size:8.1874342px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0.37215605px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:3.53775477;stroke-miterlimit:4;stroke-dasharray:none;font-family:Linux Biolinum O;-inkscape-font-specification:Linux Biolinum O Bold" />
        <path
           d="m 294.54019,410.67423 c -2.75331,1.08552 -4.036,2.58372 -4.97786,4.97186 l 0,0.27667 c 0.79669,3.03949 2.00721,4.32069 4.97786,4.97195 l 0.55335,0 c 2.60848,-0.65168 3.96359,-2.00479 4.97795,-4.97195 l 0,-0.27667 c -0.94194,-2.60523 -2.29714,-4.03109 -4.97795,-4.97186 z"
           id="text3774"
           style="font-size:8.1874342px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0.37215605px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:3.53775477;stroke-miterlimit:4;stroke-dasharray:none;font-family:Linux Biolinum O;-inkscape-font-specification:Linux Biolinum O Bold" />
      </g>
    </svg>
    

    that's the instructions for how to draw the file. all of which depend on the size that is being requested.

    still think this is simple?

  • Answer ✓

    i did a little test and even the naivest of code using a png instead of an svg gets 8 times the framerate.

  • Thnx, so I will try that out and eventually switch completely to png. I thought of svg cause it's resize capability. Using png needs to save the Images in the largest used Resolution. But that should not be a Problem.

    Thanks

Sign In or Register to comment.