Can u someone help me to draw this? (beziers)

edited May 2018 in How To...

I need draw only the ears please, i am not too good drawing bezierVertex, then i just need the ears, pleasee :(

Answers

  • edited May 2018

    here is my bezier editor where you can draw and the sketch generates your code that you can use in the other sketch (your target sketch. Example below)

        // see https : // www.processing.org/tutorials/curves/
        // see https : // forum.processing.org/two/discussion/26216/can-someone-help-me-to-draw-this#latest
    
        final String helpText = 
          "BezierVertex-Editor: You can make a vertex here and use it in another program.\nYou can click mouse to add new points, drag and drop existing points to move them.\n"
          +"Backspace to remove last entry (or all entries), use Delete key to remove highlighted point (green point),\n"
          +"space to export with println (to the direct window). \nThen you need to copy / paste the code from direct window to your target sketch.\n(click x to hide/show this text)."; 
    
        ArrayList<PVector> listPV = new ArrayList();
    
        // drag and drop 
        boolean hold=false; 
        int holding_i=-1;
    
        // help text on off 
        boolean textHelpIsOn = true; 
    
        void setup() {
          size(840, 880);
          background(255);
          makeArrayList();
        }
    
        void draw() {
          background(255);
    
          // drag and drop management
          if (hold) {
            PVector pv = listPV.get(holding_i);
            pv.x=mouseX;
            pv.y=mouseY;
          }
    
          // show ArrayList
          showArrayList(); 
    
          // text help 
          if (textHelpIsOn) {
            fill(255, 0, 0) ;
            text(helpText, 17, 17);
          }
        }// func draw() 
    
        // -----------------------------------------------------
    
        void showArrayList() {
    
          // show the curve 
          noFill();
          stroke(0);
          beginShape();
          int i=0;
          if (listPV.size()>0) {
            curveVertexPVector(listPV.get(i));
            for ( i = 0; i < listPV.size(); i++) {
              curveVertexPVector(listPV.get(i));
            }
            i=listPV.size()-1;
            curveVertexPVector(listPV.get(i));
          }
          endShape();
    
          //show the points (additionally)
          noStroke();
          float rad=3;
          for ( i = 0; i < listPV.size(); i++) {
            PVector pv=listPV.get(i);
            // if we are close to the mouse, color green, else red
            if (dist(mouseX, mouseY, pv.x, pv.y)<11) {
              // near to mouse 
              fill( 0, 255, 0); // green
              rad=7;
            } else {
              // normal 
              fill(255, 0, 0);  // red
              rad=3;
            }
            ellipse(pv.x, pv.y, 
              rad, rad);
          }//for
        }//func
    
        // ----------------------------------------------------------
        // Tools 
    
        void makeArrayList() {
    
          // init
    
          int[] coords = {
            // alternating x and y value (which belong together: 0 and 1 is a pair, 2 and 3 is a pair....)
            40, 90, 110, 90, 140, 130, 60, 150, 50, 180
          };
    
          // read coords[]
          for (int i = 0; i < coords.length; i += 2) {
            listPV.add ( new PVector(coords[i], coords[i + 1]));
          }
        }//func 
    
        void curveVertexPVector(PVector pv) {
          // like curveVertex but gets a PVector as input  
          // (just an easy way to use vectors for curveVertex)
          curveVertex(pv.x, pv.y);
        }
    
        // ----------------------------------------------------------
    
        void keyPressed() {
    
          if (key==BACKSPACE) {
            if (listPV.size()>0)
              listPV.remove(listPV.size()-1);
          }
          // ----------------
          else if (key==' ') {
            // SPACE BAR
            String xval="float[] xValues = { ", 
              yval="float[] yValues = { ";
            for (int i = 0; i < listPV.size(); i++) {
              PVector pv=listPV.get(i);
              xval += str(pv.x)+",";
              yval += str(pv.y)+",";
            }//for
            println (xval+" };"); 
            println (yval+" };");
            println ("remove last comma");
          }// else if SPACE BAR
          //------------------------
          else if (key=='x') {
            textHelpIsOn = !textHelpIsOn;
          }//else if
          //----------------------------
          else if (key==DELETE) {
            for (int i = 0; i < listPV.size(); i++) {
              PVector pv=listPV.get(i);
              if (dist(mouseX, mouseY, pv.x, pv.y)<11) {
                listPV.remove(i);
                return;
              }//if
            }//for
          }//else if
          //----------------------------
          else if (key==ESC) {
            key=0;
          }
          //----------------------------
        }//func 
    
        void mousePressed() {
    
          // apply drag and drop
          for (int i = 0; i < listPV.size(); i++) {
            PVector pv=listPV.get(i);
            if (dist(mouseX, mouseY, pv.x, pv.y)<11) {
              hold=true; 
              holding_i=i;
              return;
            }
          }
    
          // no drag and drop, add point   
          listPV.add(new PVector(mouseX, mouseY));
        }
    
        void mouseReleased() {
          // end drag and drop
          hold=false;
        }
        //---------------------------------------------------------------
    
  • Answer ✓

    the resulting data can be used in your target sketch:

        ArrayList<PVector> listPV = new ArrayList();
    
        // YOUR DATA !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        float[] xValues = { 40.0, 110.0, 140.0, 60.0, 50.0, 231.0 };
        float[] yValues = { 90.0, 90.0, 130.0, 150.0, 180.0, 267.0 };
        // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    
        void setup() {
          size(840, 880);
          background(255);
    
          // read coords[]
          for (int i = 0; i < xValues.length; i += 1) {
            listPV.add ( new PVector(xValues[i], yValues[i]));
          }
        }
    
        // ---------------------------------------------------------------------
    
        void draw() {
          // show the curve 
          noFill();
          stroke(0);
          beginShape();
          int i=0;
          if (listPV.size()>0) {
            curveVertexPVector(listPV.get(i));
            for ( i = 0; i < listPV.size(); i++) {
              curveVertexPVector(listPV.get(i));
            }
            i=listPV.size()-1;
            curveVertexPVector(listPV.get(i));
          }
          endShape();
        }
    
        void curveVertexPVector(PVector pv) {
          // like curveVertex but gets a PVector as input  
          // (just an easy way to use vectors for curveVertex)
          curveVertex(pv.x, pv.y);
        }
        //
    
  • Thanks sir!

  • @Chrisir -- have you ever thought about wrapping your bezier editor in a Tool? Kind of like a color picker?

  • There was a tool that did this. Was useful but I didn't reinstall it when P3 was released.

    Oh, it's still there, in the tools section of the website: http://drifkin.net/processing/beziereditor/

  • I extended my sketch

    Same principle

    but you can now add points BETWEEN existing points and you can also select GROUPS of points (button select) and then drag the entire group (button Drag)

    Chrisir ;-)

    // see https : // www.processing.org/tutorials/curves/
    // see https : // forum.processing.org/two/discussion/26216/can-someone-help-me-to-draw-this#latest
    // see https : // forum.processing.org/two/discussion/comment/123853/#Comment_123853
    
    final String helpText = 
      "BezierVertex-Editor: You can make a vertex here and use it in another program.\n\nThe 3 buttons on the right allow to change the mode.\nNormal Mode: You can click mouse to add new points,\n"
      +"drag and drop existing points to move them.\nRight mouse click to INSERT additional point between 2 existing points\n\n"
      +"Use Backspace to remove last entry (or all entries), use Delete key to remove highlighted point (click green point first),\n"
      +"\nNormal Mode has just been described. \nIn selection mode you can select a GROUP of points, \nin drag mode you can drag the entire group.\n\nEscape key to unselect all points. "
      +"\n\nSpace to export with println (to the direct window). \nThen you need to copy / paste the code from direct window to your target sketch.\n"
      +"For how to use the data see TARGET SKETCH at the end of the sketch which you need to make to a new sketch.\n\n(click x to hide/show this text)."; 
    
    ArrayList<PointMy> listPV = new ArrayList();
    
    // drag and drop 
    boolean hold=false; 
    int holding_i=-1;
    
    // help text on off 
    boolean textHelpIsOn = true; 
    
    // buttons
    Button[] buttons;
    
    String status="Normal Mode"; 
    int mode=0;
    
    PVector startPV=new PVector(0, 0); 
    
    // -----------------------------------------------------
    
    void setup() {
      size(840, 880);
      background(255);
    
      makeArrayList();   // just a test list, you can leave listPV as well empty
    
      makeButtons(); // buttons
    }// func 
    
    void draw() {
      background(255);
    
      switch(mode) {
      case 0:
        // standard mode 
        // drag and drop management 
        if (hold) {
          PointMy pm = listPV.get(holding_i);
          pm.p.x=mouseX;
          pm.p.y=mouseY;
        }
        break;
    
      case 1:
        // select mode
        if (hold) {
          // rect for show the rect 
          noFill();
          stroke(0); 
          rect(startPV.x, startPV.y, 
            mouseX-startPV.x, mouseY-startPV.y);
    
          // select points 
          for (int i = 0; i < listPV.size(); i++) {
            PointMy pm=listPV.get(i);
            if (pm.p.x>startPV.x&&
              pm.p.y>startPV.y&&
              pm.p.x<mouseX&&
              pm.p.y<mouseY) {
              pm.selected=true;
            }//if
            else {
              pm.selected=false;
            }//else
          }//for
        }//if
        break; 
    
      case 2: 
        // drag mode (for selection) 
        if (hold) {
          for (int i = 0; i < listPV.size(); i++) {
            PointMy pm=listPV.get(i);
            if (pm.selected) {
              pm.p.x+=mouseX-pmouseX;
              pm.p.y+=mouseY-pmouseY;
            }//if
          }//for
        }//if
        break;
    
      default:
        println("unknown mode in draw(): "+mode);
        exit(); 
        return;
      } // switch 
    
      // in ALL modes: 
    
      // show status
      fill(0);
      text(status, 5, height-4);
      stroke(0);
      line(0, height-21, 
        width, height-21);
    
      // show ArrayList
      showArrayList(); 
    
      // text help 
      if (textHelpIsOn) {
        fill(0) ;
        text(helpText, 17, 17);
      }
    
      // show Menu
      for (Button but : buttons) {
        but.update();
        but.display();
      }//for
      //
    }// func draw() 
    
    // -----------------------------------------------------
    
    void showArrayList() {
    
      // show the curve 
      noFill();
      stroke(0);
      beginShape();
      int i=0;
      if (listPV.size()>0) {
        curveVertexPVector(listPV.get(i).p);
        for ( i = 0; i < listPV.size(); i++) {
          curveVertexPVector(listPV.get(i).p);
        }
        i=listPV.size()-1;
        curveVertexPVector(listPV.get(i).p);
      }
      endShape();
    
      //show the points (additionally)
      noStroke();
      float rad=3;
      for ( i = 0; i < listPV.size(); i++) {
        PointMy pm = listPV.get(i);
        PVector pv=pm.p;
        // if we are close to the mouse, color green, else red
        if (dist(mouseX, mouseY, pv.x, pv.y)<11||pm.selected) {
          // near to mouse 
          fill( 0, 255, 0); // green
          rad=7;
        } else {
          // normal 
          fill(255, 0, 0);  // red
          rad=3;
        }
        ellipse(pv.x, pv.y, 
          rad, rad);
      }//for
    }//func
    
    // ----------------------------------------------------------
    // Tools 
    
    void makeArrayList() {
    
      // init
    
      int[] coords = {
        // alternating x and y value (which belong together: 0 and 1 is a pair, 2 and 3 is a pair....)
        40, 190, 
        110, 190, 
        140, 230, 
        60, 250, 
        50, 280
      };
    
      // read coords[]
      for (int i = 0; i < coords.length; i += 2) {
        listPV.add (  new PointMy ( new PVector(coords[i], coords[i + 1]+130), false ));
      }
    }//func 
    
    void curveVertexPVector(PVector pv) {
      // like curveVertex but gets a PVector as input  
      // (just an easy way to use vectors for curveVertex)
      curveVertex(pv.x, pv.y);
    }
    
    void makeButtons() {
      buttons = new Button[3];
      String[] buttonTexts={ "Normal", "Select", "Drag"   };
      if (buttons.length!=buttonTexts.length) {
        println("Arrays do not have the same length in setup()");
        exit();
        return;
      }
      int unit=29;
      for (int i = 0; i < buttons.length; i++) {
        Button newButton = new Button(
          buttonTexts[i], 
          width-80, i*unit+40, 
          74, unit-6, 
          i);
        buttons[i] = newButton;
      }
    }
    
    // ----------------------------------------------------------
    
    void keyPressed() {
    
      if (key==BACKSPACE) {
        if (listPV.size()>0)
          listPV.remove(listPV.size()-1);
      }
      // ----------------
      else if (key==' ') {
        // SPACE BAR
        String xval="float[] xValues = { ", 
          yval="float[] yValues = { ";
        for (int i = 0; i < listPV.size(); i++) {
          PVector pv=listPV.get(i).p;
          xval += str(pv.x)+",";
          yval += str(pv.y)+",";
        }//for
        println (xval+" };"); 
        println (yval+" };");
        println ("remove last comma");
      }// else if SPACE BAR
      //------------------------
      else if (key=='x') {
        textHelpIsOn = !textHelpIsOn;
      }//else if
      //----------------------------
      else if (key==DELETE) {
        for (int i = 0; i < listPV.size(); i++) {
          PointMy pm=listPV.get(i);
          if (dist(mouseX, mouseY, pm.p.x, pm.p.y)<11) {
            listPV.remove(i);
            return;
          }//if
        }//for
      }//else if
      //----------------------------
      else if (key==ESC) {
        key=0; // kill ESC
        for (int i = 0; i < listPV.size(); i++) {
          PointMy pm=listPV.get(i);
          pm.selected=false;
        }
      }
      //----------------------------
    }//func 
    
    void mousePressed() {
    
      // this applies in all modes !!! 
      if (mouseButton==LEFT) {
        // right screen border?
        if (mouseX>buttons[0].x) {
          if ( checkMouseOnMenu()) 
            return;
        }
      }
    
      switch(mode) {
    
      case 0:
        //  standard mode
        mousePressedForModeNormal();
        break;
    
      case 1:
        // Select 
        hold=true;
        startPV=new PVector (mouseX, mouseY); 
        break; 
    
      case 2: 
        // Drag selection
        hold=true;
        break;
    
      default:
        println("unknown mode in mousePressed: "+mode);
        exit(); 
        return;
      } // switch
    }
    
    void mousePressedForModeNormal() {
    
      if (mouseButton==LEFT) {
    
        // apply drag and drop
        for (int i = 0; i < listPV.size(); i++) {
          PVector pv=listPV.get(i).p;
          if (dist(mouseX, mouseY, pv.x, pv.y)<11) {
            hold=true; 
            holding_i=i;
            return;
          }
        }
    
        // no drag and drop, add point   
        listPV.add(new PointMy(new PVector(mouseX, mouseY), false));
      }//if
    
      // ---------------------------------------
    
      else if (mouseButton==RIGHT) {
    
        int result=-1; 
    
        float minDist = 10000; 
    
        println("here 4");
    
        // search pos
        for (int i = 0; i < listPV.size()-1; i++) {
          PVector pv1=listPV.get(i).p;
          PVector pv2=listPV.get(i+1).p;
    
          float dist= dist(mouseX, mouseY, (pv1.x+pv2.x)/2, (pv1.y+pv2.y)/2);
    
          if (dist<minDist&&dist<110) {
            result=i+1;
            minDist=dist;
          }//if
        }//for 
    
        // found something
        if (result>-1) {
          // no drag and drop, add point   
          listPV.add(result, new PointMy(new PVector(mouseX, mouseY), false));
        }
        //
      }//else if
    }//func 
    
    void mouseReleased() {
      // end drag and drop
      hold=false;
    }
    
    // -----------------------------
    
    boolean checkMouseOnMenu() {
      for (Button but : buttons) {
        but.press();
        if (but.pressed) {
          println(but.index);
          doCommand(but.index);
          return true; // Other buttons won't be pressed, just stop
        }
      }//for
      return false;
    }
    
    
    void doCommand(int cmd) {
      switch(cmd) {
      case 0:
        status="Normal Mode";
        mode=0;
        break; 
    
      case 1:
        status="Mode to select points (drag and drop mouse over the points)";
        mode=1;
        break; 
    
      case 2:
        status="Drag Mode (drag the group of points previously selected)";
        mode = 2; 
        break; 
    
      default:
        status="Error";
        mode=-1; // unknown
        println ("Error in doCommand: "+cmd); 
        exit();
        return;
      }//switch
    }//func 
    
    //============================================================================
    
    class Button {
    
      String btnText; 
    
      int x, y; // The x- and y-coordinates
      int sizeWidth, sizeHeight; // Dimension (width and height)
    
      //color baseGray; // Default gray value
      //color overGray; // Value when mouse is over the button
      //color pressGray; // Value when mouse is over and pressed
    
      boolean over = false; // True when the mouse is over
      boolean pressed = false; // True when the mouse is over and pressed
    
      int index;
    
      // constructor 
      Button(String text_, 
        int xp_, int yp_, 
        int sizeWidth_, int sizeHeight_, 
        int index_) {
    
        btnText=text_;
    
        x = xp_;
        y = yp_;
    
        sizeWidth = sizeWidth_;
        sizeHeight = sizeHeight_; 
    
        //baseGray = b_;
        //overGray = o_;
        //pressGray = p_;
    
        index=index_;
      } // constructor 
    
      // Updates the over field every frame
      void update() {
        if ((mouseX >= x) && (mouseX <= x + sizeWidth) &&
          (mouseY >= y) && (mouseY <= y + sizeHeight)) {
          over = true;
        } else {
          over = false;
        }
      }
    
      boolean press() {
        if (over) {
          pressed = true;
          return true;
        } else {
          pressed = false; 
          return false;
        }
      }
    
      void release() {
        pressed = false; // Set to false when the mouse is released
      }
    
      void display() {
    
        //if (pressed) {
        //  fill(pressGray);
        //} else if (over) {
        //  fill(overGray);
        //} else {
        //  fill(baseGray);
        //}
    
        // noFill(); 
        fill(111);
        noStroke(); 
        rect(x, y, 
          sizeWidth, sizeHeight);
    
        noFill(); 
        noStroke(); 
        if (mode==index)
          stroke(0, 225, 0);
        // else stroke(0);
        float dist = 2; 
        rect(x+dist, y+dist, 
          sizeWidth-dist-dist, sizeHeight-dist-dist);
    
        fill(255);  // green
        //  textAlign(CENTER); 
        // text(but.index, but.x+but.sizeWidth/2, 40);
        text(btnText, x+6, y+16);
        textAlign(LEFT);
      }
    }//class
    
    //============================================================================
    
    class PointMy {
      PVector p;
      boolean selected=false;
    
      PointMy( PVector p_, boolean selected_) {
        p=p_.copy();
        selected=selected_;
      }//constr
    }//class
    
    // ##############################################################
    //---------------------------------------------------------------
    
    // TARGET SKETCH 
    //
    //ArrayList<PVector> listPV = new ArrayList();
    
    //// YOUR DATA !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    //float[] xValues = { 40.0, 110.0, 140.0, 60.0, 50.0, 231.0 };
    //float[] yValues = { 90.0, 90.0, 130.0, 150.0, 180.0, 267.0 };
    //// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    
    //void setup() {
    //  size(840, 880);
    //  background(255);
    
    //  // read coords[]
    //  for (int i = 0; i < xValues.length; i += 1) {
    //    listPV.add ( new PVector(xValues[i], yValues[i]));
    //  }
    //}
    
    //// ---------------------------------------------------------------------
    
    //void draw() {
    //  // show the curve 
    //  noFill();
    //  stroke(0);
    //  beginShape();
    //  int i=0;
    //  if (listPV.size()>0) {
    //    curveVertexPVector(listPV.get(i));
    //    for ( i = 0; i < listPV.size(); i++) {
    //      curveVertexPVector(listPV.get(i));
    //    }
    //    i=listPV.size()-1;
    //    curveVertexPVector(listPV.get(i));
    //  }
    //  endShape();
    //}
    
    //void curveVertexPVector(PVector pv) {
    //  // like curveVertex but gets a PVector as input  
    //  // (just an easy way to use vectors for curveVertex)
    //  curveVertex(pv.x, pv.y);
    //}
    ////
    
  • @Chrisir -- once you are ready, I hope that you post this under Share Your Work (well, Gallery) in the new forum!

  • @Chrisir Great effort. Like it very much.

    Kf

  • Thanks for the feedback, friends.

    ;-)

  • I think it's finished

    Any feature requests from you guys?

    I appreciate it

    Chrisir ;-)

  • there was a Bazier Tool but it hasn't been updated in 5 years and you can't install it in P3. source is in github, maybe it can be updated. https://github.com/drifkin/bezier-editor-tool

    alternatively, maybe Chrisir can make his code into a Tool.

  • Similar to the program above, I made a shape / PShape editor, where you can draw by clicking the mouse and then export an entire sketch including the drawn PShape.

    Regards, Chrisir ;-)

    (the red cross is only decoration)

    final String HELP = 
      "Click mouse to draw vertex."
      +"\nBackspace to delete last item."
      +"\nHit c to delete entire list." 
      +"\nHit Space bar: fill on/off." 
      +"\nHit e to export." ;
    
    ArrayList<PVector> list = new ArrayList();  
    boolean showFill = false;  
    
    void setup() {
      size(888, 888);
      background(111);
    }
    
    void draw() {
      background(111);
      // example shape / optional 
      showCross(300, 300);
      // the list that has been entered 
      showList();
      // show Instructions
      showInstructions();
    }
    
    // ----------------------------------------------
    // Inputs 
    
    void mousePressed () {
      //println(
      //  "vertex("
      //  +mouseX
      //  +", "
      //  +mouseY
      //  +");");
      PVector pv = new PVector(mouseX, mouseY) ;
      list.add(pv);
    }
    
    void keyPressed() {
      if (key=='c') {
        // delete all 
        list.clear();
      } else if (key==BACKSPACE) {
        // delete last 
        if (list.size()>0) {
          list.remove(list.size()-1);
        }
      } else if ( key==' ' ) {
        // toggle 
        showFill = !showFill ;
      } else if ( key=='e' ) {
        // export 
        export();
      }// else if
    }//func 
    
    //------------------------------------------------------------
    // Tools 
    
    void showInstructions() {
      fill(255);
      text("Mouse: "
        +mouseX
        +","
        +mouseY
        +"\n\n" + HELP, 
        width-210, 19, 
        200, 900);
    }
    
    void export() {
      //
      println(   "\n// -------------------------------");
      println(   "\n//   " +  dateTimeStamp() ); 
      println(   "void setup() {");
      println(   "  size(888, 888);");
      println(   "  background(111);");
      println(   "} //func");
      println(   "");
    
      println(   "void draw() {");
      println(   "  background(111);");
      println(   "  drawShape1();");
      println(   "} //func");
      println(   "");
      println(   "void drawShape1() {"); 
      println(   "  beginShape();" ); 
      println(   "  stroke(0); " );
      println(   "  fill( 255, 0, 0); " );
      for (PVector pv : list) {
        println(
          "  vertex("
          +pv.x
          +", "
          +pv.y
          +");");
      }//for
      println(   "  endShape(CLOSE); " );
      println(   "} //func");
      println(   "// -------------------------------");
    }
    
    void showList() {
      beginShape();
      if (showFill) { 
        fill( 255, 0, 0);
      } else { 
        noFill();
      }
      noStroke();
      stroke(0); 
      for (PVector pv : list) {
        vertex(pv.x, pv.y);
      }
      endShape();
      //
      for (PVector pv : list) {
        pointPVector(pv);
      }
    }
    
    void pointPVector( PVector pv) {
      // 
      fill(0, 0, 255);
      stroke(255);
      point  (pv.x, pv.y);
    
      point  (pv.x, pv.y+1);
      point  (pv.x+1, pv.y);
    
      point  (pv.x, pv.y+2);
      point  (pv.x+2, pv.y);
    }
    
    // ----------------------------------------------------------------------
    // Tools date and time
    
    String dateTimeStamp() {
      // short version for file names
      return getDate() + ", " + getTime();
    }
    
    String getDate() {
      return leadingZeros(year()) 
        + "/"+leadingZeros(month()) 
        + "/"+leadingZeros(day());
    }
    
    String getTime() {
      return leadingZeros(hour()) 
        + ":"+leadingZeros(minute()) 
        + ":"+leadingZeros(second());
    }
    
    String leadingZeros(int a) {
      String Buffer;
      Buffer=nf(a, 2);
      return(Buffer);
    }
    
    //-----------------------------------------------------------------------
    // optional 
    
    void showCross(float x1, float y1) {
    
      // example shape / optional 
    
      pushMatrix(); 
    
      // the \ line ----------
      beginShape();
      fill( 255, 0, 0);
      noStroke();
      vertex(35, 27);
      vertex(48, 17);
      vertex(85, 80);
      vertex(85-13, 80+3);
      endShape(CLOSE);
    
      // the / line -------
    
      beginShape();
      fill( 255, 0, 0);
      vertex(35, 80);
      vertex(48, 87);
      vertex(85, 20);
      vertex(85-13, 20-3-2);
      endShape(CLOSE);
    
      popMatrix();
    }
    //
    
    • end of sketch

    Example for an exported sketch (resulting sketch):

    // -------------------------------
    
    //   2018/10/01, 15:05:26
    void setup() {
      size(888, 888);
      background(111);
    } //func
    
    void draw() {
      background(111);
      drawShape1();
    } //func
    
    void drawShape1() {
      beginShape();
      stroke(0); 
      fill( 255, 0, 0); 
      vertex(316.0, 321.0);
      vertex(429.0, 395.0);
      vertex(287.0, 516.0);
      endShape(CLOSE);
    } //func
    // -------------------------------
    
  • edited October 2018

    here is yet another graphical Editor.

    This time the editor uses three steps:

    • you can enter points with the mouse, when you are ready, hit e to go to next step

    • you can connect points to shapes (triangles are most common, rectangles and other shapes possible as well). End each single shape with hitting return/enter, then continue clicking with the mouse to make the next shape. You can define as much shapes as you want. All are based on the initial points.

    • hit e to export (using println()) to a full self running sketch

    Example usage:

    Typical example is a cube with 8 corners. You define the corners as points (step 1), you connect points to fore front (4 points), backside front, 4 walls (step 2), you export (step 3).

    when I have time, I'll post in the new forum as well

    Chrisir ;-)

    // https://forum.processing.org/two/discussion/comment/124510/#Comment_124510 
    // https://en.wikipedia.org/wiki/Vertex_(computer_graphics)#Application_to_3D_models
    
    final String HELP1 = 
      "Click mouse to enter points."
      +"\nBackspace to delete last item."
      +"\nHit c to delete entire list." 
      +"\nHit e for connect mode." ;
    
    final String HELP2 = 
      "Click mouse to connect points."
      +"\nBackspace to delete last item."
      +"\nHit c to delete entire list." 
      +"\nHit Space bar: fill on/off." 
      +"\nHit p to go back to points mode"
      +"\nHit e to export." ;
    
    final int textBigSize = 19; 
    
    ArrayList<PVector> listPoints = new ArrayList();  
    ArrayList<OneShape> listShapes = new ArrayList();
    
    // current shape index for listShapes
    int currShape; 
    
    boolean showFill = true;  
    boolean flagExported = false; 
    
    //states 
    final int STATE_DRAW_POINTS = 0; // corners const  
    final int STATE_DRAW_SHAPES  = 1; // shapes const
    int state =  STATE_DRAW_POINTS; // current state 
    
    void setup() {
      size(1200, 888);
      background(111);
      listShapes.add(new OneShape());
    }
    
    void draw() {
    
      switch(state) {
    
      case STATE_DRAW_POINTS:
        drawForSTATE_DRAW_POINTS();
        break; 
    
      case STATE_DRAW_SHAPES:
        drawForSTATE_DRAW_SHAPES();
        break;
        //
      } //switch
      //
    } //func 
    
    // --------------------------------------------------------------------
    // called from draw() 
    
    void drawForSTATE_DRAW_POINTS() {
    
      background(111);
    
      // the list that has been entered 
      showlistPoints1();
      // show Instructions
      showInstructions(HELP1);
    
      // Mode Headline 
      textAlign(CENTER); 
      fill(255); 
      textSize(textBigSize); 
      text("Mode draw points (hit e to go to edges mode)", 
        width/2, 19);
      textAlign(LEFT);
      textSize(11);
    }
    
    void drawForSTATE_DRAW_SHAPES() {
      background(111);
      // the list that has been entered 
      showlistPoints1();
      // show Instructions
      showInstructions(HELP2);
    
      // on mouse over - effect 
      for (int i = 0; i < listPoints.size(); i++) {
        if (dist(mouseX, mouseY, listPoints.get(i).x, listPoints.get(i).y) < 20) {
          //
          stroke(255, 0, 0); 
          pointPVector(listPoints.get(i));
          break;
        }
      }
    
      // text curr shape  -------------------------------
      String a1=""; 
      for (int i : listShapes.get(currShape).indices) {
        a1 += str(i)+", ";
      }
      fill(255); 
      text("Current shape consists of corners # \nUse mouse to connect points\n"
        +a1
        +"\nHit enter to close current shape.", 
        width-210, 200); 
    
      // List of shapes : ---------------------------------
    
      for (OneShape os : listShapes) {
        // get edges of os 
        for (int i : os.indices) {
          a1 += str(i)+", ";
        }
        a1+="\n";
      }//for
      fill(255);
      String flagExportedText="";
    
      if (flagExported) 
        flagExportedText="(exported)\n";
      else flagExportedText="(not exported)\n";
    
      text(flagExportedText
        +"\nList of shapes :\n"
        +a1, 
        width-210, 300); 
    
      // lines for curr shapes -------------------------------------- 
    
      for (int i = 0; i < listShapes.get(currShape).indices.size()-1; i++) {
        stroke(0); 
        line( listPoints.get(listShapes.get(currShape).indices.get(i)) .x, 
          listPoints.get(listShapes.get(currShape).indices.get(i)) .y, 
          listPoints.get(listShapes.get(currShape).indices.get(i+1)) .x, 
          listPoints.get(listShapes.get(currShape).indices.get(i+1)) .y
          );
      }//for 
    
      // all Shapes
      for (OneShape os : listShapes) {
        os.show();
      }
    
      // Mode Headline 
      textAlign(CENTER); 
      fill(255); 
      textSize(textBigSize); 
      text("Mode draw edges (hit p to go to points mode)", 
        width/2, 19); 
      textAlign(LEFT);
      textSize(11);
    }
    
    // -----------------------------------------------------------
    // Inputs MOUSE
    
    void mousePressed () {
    
      switch(state) {
    
      case STATE_DRAW_POINTS : 
        PVector pv1 = new PVector(mouseX, mouseY); 
        listPoints.add(pv1); 
        flagExported = false; 
        break; 
    
      case STATE_DRAW_SHAPES : 
        for (int i=0; i<listPoints.size(); i++) {
          PVector pv = listPoints.get(i); 
    
          if (dist(mouseX, mouseY, pv.x, pv.y) < 20) {
            listShapes.get(currShape).indices.add ( i );
            flagExported = false; 
            return;
          }
        }//for
        break;
      } //switch
      //
    } //func
    
    // -----------------------------------------------------------
    // Inputs KEYBOARD 
    
    void keyPressed() {
      switch(state) {
    
      case STATE_DRAW_POINTS : 
        keyPressedForSTATE_DRAW_POINTS(); 
        break; 
    
      case STATE_DRAW_SHAPES : 
        keyPressedForSTATE_DRAW_SHAPES(); 
        break;
      }//switch
    }//func 
    
    void keyPressedForSTATE_DRAW_POINTS () {
      if (key=='c') {
        // delete all 
        listPoints.clear();
      } else if (key==BACKSPACE) {
        // delete last 
        if (listPoints.size()>0) {
          listPoints.remove(listPoints.size()-1);
        }
      } else if ( key=='e' ) {
        // toggle 
        state =  STATE_DRAW_SHAPES; // current state
      }
    }//func 
    
    void keyPressedForSTATE_DRAW_SHAPES () {
      if (key=='c') {
        // delete all indices in current shape
        listShapes.get(currShape).indices.clear();
      } else if (key==BACKSPACE) {
        // delete last 
        if (listShapes.get(currShape).indices.size()>0) {
          listShapes.get(currShape).indices.remove(listShapes.get(currShape).indices.size()-1);
        }
      } else if ( key==' ' ) {
        // toggle 
        showFill = !showFill;
      } else if ( key=='p' ) {
        state =  STATE_DRAW_POINTS; // set current state
      } else if (key==RETURN||key==ENTER) {
        listShapes.add(new OneShape());
        currShape++;
      } else if ( key=='e' ) {
        // export 
        export();
      }// else if
    }//func 
    
    //------------------------------------------------------------
    // Tools 
    
    void showInstructions(String localHelp) {
      fill(255); 
      text("Mouse: "
        +mouseX
        +","
        +mouseY
        +"\n\n" 
        + localHelp, 
        width-210, 19, 
        200, 900);
    }
    
    void export() {
      // export 
    
      flagExported = false; 
    
      println(   "\n// -------------------------------"); 
      println(   "\n// " +  dateTimeStamp() ); 
    
      // step 1: show list of points as array ----
    
      println(   "\nPVector[] listPVector = {");
    
      String as1="";
      for (PVector pv : listPoints) {
        as1+=
          "   new PVector("
          +pv.x
          +", "
          +pv.y
          +"),\n";
      }//for  
    
      if (as1.length()>0) {
        if (as1.charAt(as1.length()-1) == '\n' ) {
          as1 = as1.substring (0, as1.length()-1); 
          if (as1.charAt(as1.length()-1) == ',' )
            as1 = as1.substring (0, as1.length()-1);
        }
      }
    
      println(as1 + "\n    }; \n");
    
      // step 2: show list of shapes as array ----
    
      println("int[][] layout =  {");
    
      // all Shapes
      as1="";
      for (OneShape os : listShapes) {
        as1 += os.asString();
      }
    
      if (as1.length() > 0) {
        if (as1.charAt(as1.length()-1) == '\n' ) 
          as1 = as1.substring (0, as1.length()-1); 
        if (as1.charAt(as1.length()-1) == ',' )
          as1 = as1.substring (0, as1.length()-1);
      }
      println(as1 + "\n         };"); 
    
      // step 3: setup and draw ----
    
      println(   "\nvoid setup() {"); 
      println(   "  size(888, 888);"); 
      println(   "  background(111);"); 
      println(   "} //func"); 
      println(   ""); 
    
      println(   "void draw() {"); 
      println(   "  background(111);"); 
      println(   "  drawShape1();"); 
      println(   "} //func"); 
      println(   ""); 
    
      // step 4: function to use data  ----
    
      println(   "void drawShape1() {"); 
      println(   "  beginShape();" ); 
      println(   "  stroke(0); " ); 
      println(   "  fill( 255, 0, 0); " ); 
    
      println(   "  for (int i=0; i < layout.length; i++) {" ); 
      println(   "    beginShape();" ); 
      println(   "    for (int i2=0; i2 < layout[i].length; i2++) {" ); 
      println(   "      vertex( listPVector[  layout[i][i2]  ] .x, " ); 
      println(   "              listPVector[  layout[i][i2]   ] .y );" ); 
      println(   "    }//for" );
      println(   "    endShape(); " );
      println(   "  }//for\n" );
    
      println(   "  endShape(CLOSE); " ); 
      println(   "} //func"); 
      println(   "// -------------------------------");
    }
    
    void showlistPoints1() {
      //
      for (PVector pv : listPoints) {
        stroke(255); 
        pointPVector(pv);
      }
    }
    
    void pointPVector( PVector pv) {
      // 
      point  (pv.x, pv.y); 
    
      point  (pv.x, pv.y+1); 
      point  (pv.x+1, pv.y); 
    
      point  (pv.x, pv.y+2); 
      point  (pv.x+2, pv.y);
    }
    
    // ----------------------------------------------------------------------
    // Tools date and time
    
    String dateTimeStamp() {
      // short version 
      return getDate() + ", " + getTime();
    }
    
    String getDate() {
      return leadingZeros(year()) 
        + "/"+leadingZeros(month()) 
        + "/"+leadingZeros(day());
    }
    
    String getTime() {
      return leadingZeros(hour()) 
        + ":"+leadingZeros(minute()) 
        + ":"+leadingZeros(second());
    }
    
    String leadingZeros(int a) {
      String Buffer; 
      Buffer=nf(a, 2); 
      return(Buffer);
    }
    //
    
    // ===========================================================
    
    class OneShape {
    
      // one shape has a different number of points. The points are stored as indices for the list listPoints.
    
      ArrayList<Integer> indices = new ArrayList(); 
    
      // no constructor 
    
      void show() {
    
        beginShape(); 
        if (showFill)
          fill( 255, 0, 0, 66);
        else noFill(); 
        noStroke(); 
    
        // lines for curr edges 
        for (int i = 0; i < indices.size()-1; i++) {
          stroke(0); 
          vertex( listPoints.get(indices.get(i)) .x, 
            listPoints.get(indices.get(i)) .y);
        }//for
    
        endShape(CLOSE);
      }
    
      String asString() {
        // for export
    
        // empty?
        if (indices.size()<=0)
          return ""; // abort 
    
        String result = "  {"; 
        for (int i = 0; i < indices.size(); i++) {
          result +=  indices.get(i) + ", ";
        }
        return result+"},\n";
      }
      //
    } // class
    // 
    
  • edited October 2018

    typical exported sketch (resulting sketch using the data entered with the mouse):

    // -------------------------------
    
    // 2018/10/04, 10:54:21
    
    PVector[] listPVector = {
      new PVector(316.0, 220.0), 
      new PVector(386.0, 230.0), 
      new PVector(375.0, 294.0), 
      new PVector(293.0, 295.0), 
      new PVector(530.0, 280.0), 
      new PVector(529.0, 304.0), 
      new PVector(575.0, 315.0), 
      new PVector(580.0, 270.0)
    }; 
    
    int[][] layout =  {
      {0, 1, 2, 3, 0, }, 
      {4, 7, 6, 5, 4, }
    };
    
    void setup() {
      size(888, 888);
      background(111);
    } //func
    
    void draw() {
      background(111);
      drawShape1();
    } //func
    
    void drawShape1() {
      beginShape();
      stroke(0); 
      fill( 255, 0, 0); 
      for (int i=0; i < layout.length; i++) {
        beginShape();
        for (int i2=0; i2 < layout[i].length; i2++) {
          vertex( listPVector[  layout[i][i2]  ] .x, 
            listPVector[  layout[i][i2]   ] .y );
        }//for
        endShape();
      }//for
    
      endShape(CLOSE);
    } //func
    // -------------------------------
    
  • edited November 2018

    similar to the 2D editor above, here is a 3D Editor.

    the editor uses three steps:

    • you can enter points with the mouse, when you are ready, hit e to go to next step (you can go back to this step any time). You can edit the points and move them in x, y and z direction.

    • you can connect points to shapes (triangles are most common, rectangles and other shapes possible as well). End each single shape with hitting return/enter, then continue clicking with the mouse to make the next shape. You can define as much shapes as you want. All are based on the initial points.

    • hit x to export (using println()) to a full self running sketch

    Example usage:

    Typical example is a cube with 8 corners. You define the corners as points (step 1), you connect points to fore front (4 points), backside front, 4 walls (step 2), you export (step 3).

    Download:

    • Because of the complexity of the sketch (and the usage of multiple tabs) I posted it on github (and not here as the other sketches).

    name: vertexEditorForFill3Dc

    https://github.com/Kango/3DSketches

    Best, Chrisir ;-)

Sign In or Register to comment.