allows to draw a shape with the mouse.
  It shows the current input  with the mouse -
  stop it  with esc.
  Undo with backspace.
  Quit with q.
 r - println CODE for the shape to console (copy from there).

1. // question / idea from
2. // https://forum.processing.org/topic/creating-shapes-on-grid
3. // Code from
4. // http://processing.org/learning/topics/arraylistclass.html
5. // allows to draw a shape with the mouse.
6. // It shows the current input  with the mouse -
7. // stop it  with esc.
8. // Undo with backspace.
9. // Quit with q.
10. // r - println CODE.
11. // these are the vertices of the shape
12. ArrayList vertices;
13. // when Mouse clicked, this is your starting point
14. PVector startingPoint;
15. // when mouse is clicked and hold / dragged, this is true
16. boolean   MouseHold=false ;
17. void setup() {
18.   // init
19.   size(600, 600);
20.   // Create an empty ArrayList
21.   vertices = new ArrayList();
22.   // Vector
23.   startingPoint = new PVector(0, 0);
24. } // func
25. //
26. //
27. void draw() {
28.   // run again and again
29.   background(0);
30.   stroke(255);
31.   strokeWeight(0);
32.   // -------------- 
33.   // Grid
34.   for (int i = 0; i < width; i+=30) {
35.     line (i, 0, i, height);
36.   }
37.   for (int i = 0; i < height; i+=30) {
38.     line (0, i, width, i);
39.   }
40.   // -------------- 
41.   // Information in the upper screen
42.   fill(0);    // black rectangle = background for information
43.   noStroke();
44.   rect(0, 0, width, 50);
45.   fill(255);  // Text
46.   text ("Mouse: " + mouseX + ", " + mouseY, width-100, 30);
47.   text ("drag mouse-draw shape; q-quit; esc-drop line; Backspace-undo; d-del; r-CODE", 10, 30);
48.   // -------------- 
49.   // Shape begin
50.   beginShape();
51.   // With an array, we say vertices.length, with an ArrayList, we say vertices.size().
52.   // The length of an ArrayList is dynamic.
53.   // Notice how we are looping through the ArrayList backwards.
54.   for (int i = vertices.size()-1; i >= 0; i--) {
55.     // An ArrayList doesn't know what it is storing so we have to cast the object coming out
56.     VertexClass myVertex = (VertexClass) vertices.get(i);
57.     vertex(myVertex.x, myVertex.y);
58.     stroke(0, 255, 0);
59.     fill(255); 
60.     text ( myVertex.getCoor(), myVertex.x, myVertex.y);
61.     myVertex.display();
62.   } 
63.   // When user is currently drawing, show the current mouse pos
64.   // as if already part of the shape
65.   if (MouseHold) {
66.     vertex( mouseX, mouseY);
67.   }
68.   fill(0, 0, 255); 
69.   endShape(); // shape end
70.   //
71.   // -------------- 
72.   // When user is currently drawing
73.   if (MouseHold) {
74.     // show line of current mouse Input
75.     stroke(255, 0, 0);
76.     line(startingPoint.x, startingPoint.y, mouseX, mouseY);
77.   } // if
78. } // func
79. // ----------------------------------------------------------------------
80. void mousePressed() {
81.   startingPoint.set( mouseX, mouseY, 0 );
82.   MouseHold=true;
83.   // when empty
84.   if (vertices.isEmpty()) {
85.     // A new vertex object is added to the ArrayList (by default to the end)
86.     vertices.add(new VertexClass(mouseX, mouseY));
87.   } // if
88. } // func
89. void mouseDragged() {
90.   MouseHold=true;
91. } // func
92. void mouseReleased() {
93.   if (MouseHold) {
94.     // A new vertex object is added to the ArrayList (by default to the end)
95.     vertices.add(new VertexClass(mouseX, mouseY));
96.     MouseHold=false;
97.   } // if
98. } // func
99. // -----------------------------------------------------------------------------------
100. void keyPressed() {
101.   switch (key) {
102.   case BACKSPACE:
103.     // remove last vertex / undo
104.     // println ("BACKSPACE");
105.     if (!vertices.isEmpty()) {
106.       vertices.remove(vertices.size()-1);
107.     }
108.     break;
109.   case ESC:
110.     if (MouseHold) {
111.       key = 0;
112.       // println("Esc"); // kill Esc
113.       MouseHold=false;
114.     }
115.     else
116.     {
117.       // key = 0 ; // kill Esc
118.     }
119.     break;
120.   case 'd':
121.     vertices.clear();
122.     break;
123.   case 'p':
124.     printTheArrayList();
125.     break;  
126.   case 'r':   
127.     // result
128.     printTheArrayListAsCode ();
129.     break;  
130.   case 'q':
131.     exit();
132.     break;
133.   default:
134.     break;
135.   } // switch
136. } // func
137. // -----------------------------------------------------------------------------------
138. void printTheArrayList() {
139.   for (int i = 0; i<vertices.size(); i++) {
140.     // An ArrayList doesn't know what it is storing so we have to cast the object coming out
141.     VertexClass myVertex = (VertexClass) vertices.get(i);
142.     println("i: " + myVertex.getCoor() + "." );
143.   } // for
144. } // func
145. 
     
146. void printTheArrayListAsCode () {
147.   println("beginShape();");
148.   for (int i = 0; i<vertices.size(); i++) {
149.     // An ArrayList doesn't know what it is storing so we have to cast the object coming out
150.     VertexClass myVertex = (VertexClass) vertices.get(i);
151.     println("  vertex( " + myVertex.getCoor() + " );" );
152.   } // for
153.   VertexClass myVertex = (VertexClass) vertices.get(0);
154.   println("  vertex( " + myVertex.getCoor() + " );" );
155.   println("endShape();");
156. } // func
157. 
     
158. // -----------------------------------------------------------------------------------
159. // Simple vertex class
160. class VertexClass {
161.   float x;
162.   float y;
163.   VertexClass(float tempX, float tempY ) {
164.     x = tempX;
165.     y = tempY;
166.   } // func
167.   String getCoor() {
168.     return ( x + ", " + y );
169.   }
170.   void display() {
171.     // Display as circle
172.     ellipse(x, y, 7, 7);
173.   } // func
174. } // class