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

Fabboy

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

Chrisir

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;
    }
    //---------------------------------------------------------------

Chrisir

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);
    }
    //

Fabboy

Thanks sir!

Chrisir

;-)

jeremydouglass

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

koogs

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/

Chrisir

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);
//}
////

jeremydouglass

@Chrisir -- once you are ready, I hope that you post this under Share Your Work (well, Gallery) in the new forum!

kfrajer

@Chrisir Great effort. Like it very much.

Kf

Chrisir

Thanks for the feedback, friends.

;-)

Chrisir

I think it's finished

Any feature requests from you guys?

I appreciate it

Chrisir ;-)

koogs

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.

Chrisir

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
// -------------------------------

Chrisir

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
// 

Chrisir

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
// -------------------------------

Chrisir

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 ;-)