How can i use my vector graphics as a GUI elements in Processing?!

edited November 2013 in How To...

Hello, sorry for my English) i'm a newby in Processing, i'm trying to make an application with some user friendly interface, so i made a design in Adobe illustrator, but i have no idea how to use it in processing.

I mean - is there any possibilities to import my vector graphics (and customise a ControlP5 library with it, for example).. or i have to create all of the elements by using formulas and coordinates in Processing, any way?


  • edited December 2013 Answer ✓

    yes you can customize or extend controllers, what type of controller are you looking for? a button, slider, knob, etc? You can import vector graphics with processing, see the loadShape example.

  • Thanks! I'm looking for all the types of controllers you listed, and probably such as scrolling bars and cursor icons. I've tried this example from your link and it works)

    now i need to understand how i can replace the ControlP5 library shapes on my .svg shapes. And then make it all work)

  • edited December 2013

    I've tried to modify the ControlP5Button example, but in .setImages is only accepted to use a png or jpg images, not a vector svg.. So i don't have any idea how to put my vector svg inside of this library.

    However, there also a problem with using an image of round button: it is still work as a square one. So you can click in the empty corner, and it will press the button.

  • Draw your shapes in PGraphics off-line images, then you can use them in ControlP5.

  • edited December 2013

    rendering shapes into an PGraphics/PImage element is one option. Another option would be to create a custom controller that extends a default controller, I have included an example for a Button below that renders an svg element and uses a circular intersection. Customizing Controllers based on your needs is possible but not trivial and you need to familiarize yourself with the source code of the library.

    import controlP5.*;
    // this example used processing 2.0 and controlP5 2.0.4
    ControlP5 cp5;
    void setup() {
      size(400, 400);
      cp5 = new ControlP5(this);
      // create a new custom Button that excepts a shape
      MyButton b = new MyButton(cp5, "test", loadShape("bot.svg") );
      // set some parameters for our custom Button
      b.setSize(50, 50).setPosition(100, 200);
    void draw() {
    // create a custom Button and inherit all properties and behavior 
    // from it's super class
    class MyButton extends Button {
      MyButton(ControlP5 c, String theName, final PShape s ) {
        super(c, theName);
        // ControllerViews are used to render a controller, since we
        // need a custom view to render the svg shape we need to override
        // the existing view with setView(ControllerView)
        setView(new ControllerView() {
          public void display(PApplet p, Object o) {
            if (isInside) {
              // if the mouse is detected inside our intersection area,
              // rotate the shape by 90 degrees.
              p.translate(getWidth()/2, getHeight()/2);
              p.translate(-getWidth()/2, -getHeight()/2);
            p.shape(s, 0,0, getWidth(), getHeight());
      // override the inside( ) function which by default evaluates 
      // intersections against rectangular areas. Here though we need
      // a circular area which we implement with dist() below.
      public boolean inside() {
        float x = _myParent.getAbsolutePosition( ).x + position.x + getWidth()/2;
        float y = _myParent.getAbsolutePosition( ).y + position.y + getHeight()/2;
        return dist(x, y, mouseX, mouseY)<getWidth()/2;
Sign In or Register to comment.