Hype + PGraphics

Hi, Im using Hype (http://www.hypeframework.org) but I haven't been able so far to assign the final render to a PGraphics object. So, when in draw, Hype provides the H.drawStage(); function to draw everything on the screen. How is it then possible to assign this to a PGraphics for further processing?

void draw() {


  • Hi! Assuming you hace an HCanvas (lets call it canvas) you are drawing into, you may access the PGraphic inside it using the public canvas.graphics() method.

    Hope that helps!!

    saludos, v.

  • Thank you for your response. For sure it makes sense to extract a PGraphics rendering of the class and assign it to another PGraphics object for further processing, however, I still haven't figured out a way to do this.

    It's a pity because I can't find this information anywhere. I have also contacted the developer Joshua Davis, but no response whatsoever.

  • According to valerialaura, you just need to do:

    PGraphics pg = canvas.graphics();

    Now, the problem is to get such canvas... :-)

    I am looking at the GitHub repository, the H object has a stage() method returning a HStage object. The latter has an image() method returning a PImage. That's a first step, but you want a PGraphics.
    (I am writing this while exploring the code...)

    Mmm, I have to go, I will need to download the code to explore it further.
    More later, if you don't find it by yourself.

  • OK, I explored a bit the code of Hype. It seems well done, although lacking a bit of doc (Doxygen only partially helps there...) and tutorials... Obviously mostly a tool for self-usage of the authors which are nice enough to share it. :-)

    HCanvas is a dead end, as it is optional, actually.
    Hype does grabs the PGraphics of the PApplet it lives on, and just render the stage on it, like you said.
    If that's OK for you, you can then just grab the g variable to get the rendering.
    If what you want is an off-line graphics, you can trick Hype, like:

    void setup()
      size(640, 640);
      PGraphics o = g;
      PGraphics forHype = ...;
      g = forHype;
      g = o;
    // [...]


  • Hi there,

    Documentation... I was talking to Josh today about that and it is something we need to look at. We're currently working on some new behaviors and other fixes, but docs are on my to do list, and I'll hopefully be able to put some tutorials together on the web site in the not too distant future.

    As for grabbing the internal PGraphic of H, there are a couple of ways you can do this depending on your usage.

    If you are doing everything static in the setup(), i.e. no animations, you could use something similar to this in the draw() loop of your pde for further manipulations of your own:

    PGraphics tmp = createGraphics(width, height);
    boolean use3D = false;
    float alpha = 1;
    H.stage().paintAll(tmp, use3D, alpha);
    //do what you need to with the PGraphic tmp...
    image(tmp, 0, 0);

    That block of code is also useful for rendering out to PDF and maintaining the vector data of any shapes etc. See: https://www.dropbox.com/sh/c21kl8x9tj4y23x/AABwj5R9Q9KxWteS_-uZdmT7a/AndersonRanch2013/pdfOutput?dl=0

    Alternatively, in the setup, if you use HCanvas and add all of your drawables to that, you can grab the PGraphic from the HCanvas as mentioned above. There is one caveat in that you need to call H.drawStage() in the main draw loop for it to animate, but you can always paint over it with a call to background() and then do your thing with the PGraphic you extracted (it's not a particularly elegant solution, but might do what you need).

    If you have bugs or feature requests, a good place to put them might be on the issues page of the repo in github. https://github.com/hype/HYPE_Processing/issues

    If you could provide an example of what you're trying to do with the PGraphic in a sketch, I might be able to help some more. Give one of the above solutions a try and hopefully it could help you.

    I'll mention it to Josh about what you're trying to do, and we can have a think about adding a new method in that runs everything silently without painting to screen so you can then extract the PGraphic.


Sign In or Register to comment.