I'm thinking that the lines should be drawn between each point by using vertex() (or maybe curveVertex()). I tried out a couple of different approaches to get it to work but the result isn't really what I'm looking for. Right now a straight line is drawn at each point but they are not connecting to each other. My coding attempts can be found at rows 86-105.

Press the mouse to draw, press 'v' to change between points and lines.

2. //  *** SIZE VARIABLES *** // 
3. float ringDiameter;              //Diameter of the outer ring
4. float wheelDiameter;             //Diameter of the inner wheel
5. float ringRadius;                //Radius of the outer ring
6. float wheelRadius;               //Radius of the inner wheel
7. float distance;
8. 
   
9. // *** ROTATION VARIABLES *** //
10. float wheelCenterRotation;      //Start angle for the centerpoint of the wheel
11. float wheelCenterRotationInc;   //Rotation increment
12. float lineRotation;             //Start angle for the line inside the wheel
13. float lineRotationInc;          //Rotation increment
14. 
    
15. // *** GRAPHICAL VARIABLES *** //
16. float penHue;                     
17. float penSat;                     
18. float penBright;
19. float penOpacity;
20. float penStrokeWeight;          
21. float penOffset;                //Position of the pen point
22. boolean penRainbowStroke;       //Activate/inactivate rainbow coloured pen stroke
23. boolean showBackground;         //Show/hide the background, i.e the outer ring and the inner wheel
24. boolean showGUIControls;        //Show/hide the GUI controls
25. boolean drawLines;              //Switch between drawing lines and points
26. PGraphics offscreen;            //PGraphic off-screen to which the pattern is drawn
27. 
    
28. void setup () {
29.   size(500, 700);
30.   colorMode(HSB, 360, 100, 100, 100);
31.   
32.   //Offscreen settings
33.     offscreen = createGraphics(width, height, JAVA2D);
34.     offscreen.beginDraw();
35.     offscreen.colorMode(HSB, 360, 100, 100, 100);
36.     offscreen.endDraw();
37.     
38.   //Assigning variables  
39.     ringDiameter = 400;
40.     wheelDiameter = 100;
41.     ringRadius = ringDiameter/2;
42.     wheelRadius = wheelDiameter/2;
43.     distance = 300;
44.     wheelCenterRotation = PI/4; 
45.     wheelCenterRotationInc = TWO_PI/distance;
46.     lineRotation = PI/4; 
47.     lineRotationInc = wheelCenterRotationInc * (ringRadius - wheelRadius) / wheelRadius;
48.     penHue = 300;
49.     penSat = 90;
50.     penBright = 90;
51.     penOpacity = 75;
52.     penStrokeWeight = 3; 
53.     penOffset = 66.666;
54.     penRainbowStroke = false;
55.     showBackground = true;
56.     showGUIControls = true;
57.     drawLines = false;
58. }
59. 
    
60. void update() {    
61.   //Re-calculate rotation if distance has changed
62.     wheelCenterRotationInc = TWO_PI/distance;
63.     
64.   //Rotation increment
65.     wheelCenterRotation = wheelCenterRotation + wheelCenterRotationInc;
66.     lineRotation = lineRotation + lineRotationInc;   
67. }
68. 
    
69. // *** OFF-SCREEN CANVAS TO WHICH THE PATTERN IS DRAWN *** //
70. void drawOffscreen() {    
71.     offscreen.beginDraw();
72.     offscreen.pushMatrix();
73.     offscreen.translate(width/2, height/1.5);
74.     offscreen.translate((ringRadius-wheelRadius)*cos(wheelCenterRotation), (ringRadius-wheelRadius)*sin(wheelCenterRotation));
75.     offscreen.strokeWeight(penStrokeWeight);
76.     offscreen.stroke(penHue, penSat, penBright, penOpacity);
77.     //Rainbow stroke
78.       if (penRainbowStroke) {
79.         stroke(penHue, penSat, penBright, penOpacity);
80.         penHue = penHue + 1;
81.         if (penHue > 360) {
82.           penHue = 0;
83.         }
84.       }
85.     
86.     //Draw points
87.       if (!drawLines){
88.         offscreen.point(penOffset*sin(lineRotation), penOffset*cos(lineRotation));
89.       }
90. 
    
91.     //Draw lines
92.       if (drawLines){
93.         offscreen.beginShape();
94.         offscreen.vertex(penOffset*sin(lineRotation), penOffset*cos(lineRotation));
95.         offscreen.vertex(penOffset*sin(lineRotation+lineRotation), penOffset*cos(lineRotation+lineRotation));
96.     
97.         //for (float i = 0; i < 2; i++) {
98.         //float angle = i*wheelCenterRotationInc;
99.         //offscreen.vertex(penOffset*sin(angle), penOffset*cos(angle));
100.         //}
101.         offscreen.endShape();      
102.       }    
103.     offscreen.popMatrix();
104.     offscreen.endDraw();
105. }
106. 
     
107. // *** OUTER RING & INNER WHEEL *** // 
108. void drawBackground() { 
109.   pushMatrix();
110.   pushStyle();
111.     //Re-calculate if the size of the wheel has changed
112.       ringDiameter = ringDiameter; 
113.       wheelDiameter = wheelDiameter;
114.       ringRadius = ringDiameter/2; 
115.       wheelRadius = wheelDiameter/2;
116.     
117.     
118.       distance = distance;
119.     
120.     //Re-calculate the rotation increment if the size of the wheel has changed 
121.       lineRotationInc = wheelCenterRotationInc * (ringRadius - wheelRadius) / wheelRadius;
122.       
123.     //Print loops per lap
124.       pushStyle();
125.       noFill();
126.       stroke(203, 71, 92);
127.       strokeWeight(3);
128.       ellipse(50, 310, 50, 50);
129.       popStyle();
130.       
131.       pushStyle();
132.         fill(29, 99, 79);
133.         textAlign(CENTER, CENTER);
134.         textSize(12);
135.         text("Loops per lap", 50, 270);
136.         textSize(14);
137.         text(ringDiameter/wheelDiameter, 50, 310);
138.         textAlign(LEFT);
139.       popStyle();
140. 
     
141.       pushStyle();
142.         fill(29, 99, 79);
143.         textAlign(LEFT, CENTER);
144.         textSize(10);
145.         text("Tip! An integer, like", 20, 640);
146.         text("3 or 8, requires one lap", 20, 655);
147.         text("to draw a complete pattern.", 20, 670);
148.         text("A no. like X.5 requires", 380, 640);
149.         text("2 laps. A no. like X.25", 380, 655);
150.         text("requires 4 laps & so forth.", 380, 670);
151.         textAlign(LEFT);
152.       popStyle();
153. 
     
154.       translate(width/2, height/1.5); 
155.         
156.     //Outer ring
157.       noFill();
158.       stroke(29, 99, 79);
159.       strokeWeight(3);
160.       ellipse(0, 0, ringDiameter, ringDiameter);
161.       
162.     //Calculate the new midpoint from where to draw the inner wheel
163.       translate((ringRadius-wheelRadius)*cos(wheelCenterRotation), (ringRadius-wheelRadius)*sin(wheelCenterRotation));
164.       
165.     //Inner wheel
166.       noFill();
167.       stroke(203, 71, 92);
168.       strokeWeight(2);
169.       wheelDiameter = min(wheelDiameter, ringDiameter/2);
170.       ellipse(0, 0, wheelDiameter, wheelDiameter);
171.       
172.     //Point to show the current 0-point
173.       strokeWeight(5);
174.       stroke(203, 71, 92);
175.       point(0, 0);
176.       
177.     //Line inside the inner wheel
178.       stroke(203, 71, 92);
179.       strokeWeight(2);
180.       wheelDiameter = min(wheelDiameter, ringDiameter/2);
181.       line(0, 0, wheelRadius*sin(lineRotation), wheelRadius*cos(lineRotation));
182.       
183.     //Point to show the current position, colour and stroke weight of the pen point
184.       stroke(penHue, penSat, penBright, penOpacity);
185.       strokeWeight(5);
186.       penOffset = min(penOffset, wheelRadius); //Constrain the offset point to the radius of the wheel
187.       point(penOffset*sin(lineRotation), penOffset*cos(lineRotation));
188.     popStyle();  
189.     popMatrix();
190. }
191. 
     
192. // *** GUI CONTROLS *** //
193. void drawGUIControls () { 
194.      float yPosLine1 = 30;
195.      float yPosLine2 = 55;
196.      float yPosLine3 = 75;
197.      float yPosLine4 = 95;
198.      float yPosLine5 = 115;
199.      float yPosLine6 = 135;
200.      float yPosLine7 = 155;
201.      
202.      float xPosCol1 = 15;
203.      float xPosCol2 = width/2;
204.      
205.      float yIndexStartLine1 = 47;
206.      float yIndexEndLine1 = 63;
207.      float yIndexStartLine2 = 67;
208.      float yIndexEndLine2 = 83;
209.      float yIndexStartLine3 = 87;
210.      float yIndexEndLine3 = 103;
211.      float yIndexStartLine4 = 107;
212.      float yIndexEndLine4 = 123;
213.      float yIndexStartLine5 = 127;
214.      float yIndexEndLine5 = 143;
215.      
216.      float keyStartPos1 = 105;
217.      float keyEndPos1 = 215;
218.      float windowStartPos1 = 130;
219.      float windowEndPos1 = 210;
220. 
     
221.      float keyStartPos2 = 325;
222.      float keyEndPos2 = 455;     
223.      float windowStartPos2 = 350;
224.      float windowEndPos2 = 450;
225.      
226.      float rainbowDisp = 0.0;
227.      float rainbowInc = TWO_PI/12.0;
228. 
     
229.     //Background rectangles
230.       pushStyle();
231.         noStroke();
232.         fill(199, 99, 59);
233.         rect(2.5, 2.5, width-6, 245-2.5);
234.   
235.         fill(29, 99, 79);
236.         rect(5, 5, width-10, 245-6);
237.         
238.         fill(203, 71, 92);
239.         rect(6.5, 6.5, width-14, 245-10);
240.       popStyle();
241.     
242.     //Headlines column 1
243.       pushStyle();
244.         fill(360, 0, 100);
245.         textSize(14);
246.         text("SETTINGS", xPosCol1, yPosLine1);
247.         textSize(12);
248.         text("Ring Size", xPosCol1, yPosLine2);
249.         text("Wheel Size", xPosCol1, yPosLine3);
250.         text("Pen Position", xPosCol1, yPosLine4);
251.         text("Point Distance", xPosCol1, yPosLine5);
252.         text("Points or Line", xPosCol1, yPosLine6);
253.         text("Pen Size", xPosCol1, yPosLine7);
254.     
255.     //Headlines column 2        
256.         textSize(14);
257.         text("STYLE", xPosCol2, yPosLine1);
258.         textSize(12);
259.         text("Current Colour", xPosCol2, yPosLine2);
260.         text("Hue", xPosCol2, yPosLine3);
261.         text("Saturation", xPosCol2, yPosLine4);
262.         text("Brightness", xPosCol2, yPosLine5);
263.         text("Opacity", xPosCol2, yPosLine6);
264.         text("Rainbow", xPosCol2, yPosLine7);
265.       popStyle();
266. 
     
267.     //Instructions
268.       pushStyle();
269.         fill(360, 0, 100);
270.         textSize(12);      
271.         text("Hold the mouse pressed to draw your own spirograph pattern!", xPosCol1, 190);
272.         text("Press 'enter' to show/hide the guidelines and menu. Press 'delete' to reset the canvas.", xPosCol1, 210);
273.       popStyle();
274.      
275.     //Ring size
276.       pushStyle();
277.         textSize(12);
278.         fill(360, 0, 100);
279.         text("q <", keyStartPos1, yPosLine2);
280.         text("> w", keyEndPos1, yPosLine2);
281.         stroke(360, 0, 100);
282.         line(windowStartPos1, 55, windowEndPos1, 55);
283.         line(map(ringDiameter, 50, 400, windowStartPos1, windowEndPos1), yIndexStartLine1, map(ringDiameter, 50, 400, windowStartPos1, windowEndPos1), yIndexEndLine1);
284.       popStyle();
285.       
286.     //Wheel size
287.       pushStyle();
288.         textSize(12);
289.         fill(360, 0, 100);
290.         text("a <", keyStartPos1, yPosLine3);
291.         text("> s", keyEndPos1, yPosLine3);
292.         stroke(360, 0, 100);
293.         line(windowStartPos1, 75, windowEndPos1, 75);
294.         line(map(wheelDiameter, 20, ringRadius, windowStartPos1, windowEndPos1), yIndexStartLine2, map(wheelDiameter, 20, ringRadius, windowStartPos1, windowEndPos1), yIndexEndLine2);
295.       popStyle();
296.       
297.     //Pen position
298.       pushStyle();
299.         textSize(12);
300.         fill(360, 0, 100);
301.         text("z <", keyStartPos1, yPosLine4);
302.         text("> x", keyEndPos1, yPosLine4);
303.         stroke(360, 0, 100);
304.         line(windowStartPos1, 95, windowEndPos1, 95);
305.         line(map(penOffset, 0, wheelRadius, windowStartPos1, windowEndPos1), yIndexStartLine3, map(penOffset, 0, wheelRadius, windowStartPos1, windowEndPos1), yIndexEndLine3);
306.       popStyle();
307.       
308.     //Point distance
309.       pushStyle();
310.         textSize(12);
311.         fill(360, 0, 100);
312.         text("e <", keyStartPos1, yPosLine5);
313.         text("> r", keyEndPos1, yPosLine5);
314.         stroke(360, 0, 100);
315.         line(windowStartPos1, 115, windowEndPos1, 115);
316.         line(map(distance, 500, 100, windowStartPos1, windowEndPos1), yIndexStartLine4, map(distance, 500, 100, windowStartPos1, windowEndPos1), yIndexEndLine4);
317.       popStyle();
318.       
319.     //Pen size
320.       pushStyle();
321.         textSize(12);
322.         fill(360, 0, 100);
323.         text("g <", keyStartPos1, yPosLine7);
324.         text("> h", keyEndPos1, yPosLine7);
325.       popStyle();
326.       
327.       pushStyle();
328.         for (int i = 130; i <= 205; i = i + 15) {
329.           stroke(penHue, penSat, penBright, penOpacity);
330.           strokeWeight(penStrokeWeight);
331.           point(i, 155); 
332.         }
333.       popStyle();      
334.       
335.     //Current colour
336.       pushStyle();
337.         textSize(12);
338.         stroke(360, 0, 100, 100);
339.         fill(360, 0, 100, 100);
340.         rect(windowStartPos2, 50, 100, 10);    
341.         stroke(penHue, penSat, penBright, penOpacity);
342.         fill(penHue, penSat, penBright, penOpacity);
343.         rect(windowStartPos2, 50, 100, 10);
344.       popStyle();
345.         
346.     //Hue
347.       pushStyle();
348.         textSize(12);
349.         fill(360, 0, 100);
350.         text("i <", keyStartPos2, yPosLine3);
351.         text("> o", keyEndPos2, yPosLine3);
352.       popStyle();
353.       
354.       pushStyle();
355.           for (int h = 0; h < 100; h = h + 1) {
356.             strokeWeight(1);
357.             stroke(h*3.6, 100, 100);
358.             line(windowStartPos2+h, 70, windowStartPos2+h, 80);
359.           }
360.       popStyle();
361.       
362.       pushStyle();
363.         strokeWeight(1);
364.         stroke(360, 0, 100, 100);
365.         line(map(penHue, 0, 360, windowStartPos2, windowEndPos2), yIndexStartLine2, map(penHue, 0, 360, windowStartPos2, windowEndPos2), yIndexEndLine2);
366.       popStyle();
367.       
368.     //Saturation
369.       pushStyle();
370.         textSize(12);
371.         fill(360, 0, 100);
372.         text("j <", keyStartPos2, yPosLine4);
373.         text("> k", keyEndPos2, yPosLine4);
374.       popStyle();
375.       
376.       pushStyle();
377.         for (int s = 0; s < 100; s = s + 1) {
378.           stroke(penHue, s, 100);
379.           line(windowStartPos2+s, 90, windowStartPos2+s, 100);
380.         }    
381.       popStyle();
382.       
383.       pushStyle();
384.         strokeWeight(1);
385.         stroke(360, 0, 100, 100);
386.         line(map(penSat, 0, 100, windowStartPos2, windowEndPos2), yIndexStartLine3, map(penSat, 0, 100, windowStartPos2, windowEndPos2), yIndexEndLine3);
387.       popStyle();
388.       
389.     //Brightness
390.       pushStyle();
391.         textSize(12);
392.         fill(360, 0, 100);
393.         text("n <", keyStartPos2, yPosLine5);
394.         text("> m", keyEndPos2, yPosLine5);
395.       popStyle();
396.       
397.       pushStyle();
398.         for (int b = 0; b < 100; b = b + 1) {
399.           stroke(penHue, 100, b);
400.           line(windowStartPos2+b, 110, windowStartPos2+b, 120);
401.         }
402.       popStyle();
403.       
404.       pushStyle();
405.         strokeWeight(1);
406.         stroke(360, 0, 100, 100);
407.         line(map(penBright, 0, 100, windowStartPos2, windowEndPos2), yIndexStartLine4, map(penBright, 0, 100, windowStartPos2, windowEndPos2), yIndexEndLine4);
408.       popStyle();
409.       
410.     //Opacity
411.       pushStyle();
412.         textSize(12);
413.         fill(360, 0, 100);
414.         text("y <", keyStartPos2, yPosLine6);
415.         text("> u", keyEndPos2, yPosLine6);
416.       popStyle();
417.       
418.       pushStyle();
419.         for (int o = 0; o < 100; o = o + 1) {
420.           stroke(penHue, 100, 100, o);
421.           line(windowStartPos2+o, 130, windowStartPos2+o, 140);
422.         }    
423.       popStyle();
424.       
425.       pushStyle();
426.         strokeWeight(1);
427.         stroke(360, 0, 100, 100);
428.         line(map(penOpacity, 0, 100, windowStartPos2, windowEndPos2), yIndexStartLine5, map(penOpacity, 0, 100, windowStartPos2, windowEndPos2), yIndexEndLine5);
429.       popStyle();
430. 
     
431.     //Rainbow colour
432.       pushStyle();
433.         textSize(12);
434.         text("b |", keyStartPos2, yPosLine7);
435.         text("| b", keyEndPos2, yPosLine7);
436.       popStyle();
437.       
438.     //Rainbow colour ON
439.       if (penRainbowStroke) {
440.         pushStyle();
441.           for (int i = 0; i < 100; i=i+5) {
442.             strokeWeight(3);
443.             stroke(i*3, penSat, penBright, penOpacity);
444.             point(350+i, 150+sin(rainbowDisp)*6.0);
445.             rainbowDisp = rainbowDisp + rainbowInc;
446.           }
447.         popStyle();  
448.       }
449.     
450.     //Rainbow colour OFF
451.       if (!penRainbowStroke) {
452.         pushStyle();
453.           textSize(12);
454.           fill(360, 0, 100);
455.           textAlign(CENTER);
456.           text("OFF", 400, yPosLine7);
457.           textAlign(LEFT);
458.         popStyle();
459.       }
460. }
461. 
     
462. // *** DRAW *** //
463. void draw() {
464.   if (mousePressed) {
465.     update();
466.     drawOffscreen();
467.   }
468.   background(360, 0, 100);
469.   if (showBackground) drawBackground();
470.   if (showGUIControls) drawGUIControls();
471.   image(offscreen, 0, 0);
472. }
473. 
     
474. // *** INPUTS *** //
475. void keyPressed() {
476.   //Show/hide the background
477.     if ((key == ENTER)||(key == RETURN)) {    
478.       showBackground = !showBackground;
479.       showGUIControls = !showGUIControls;
480.     }
481.     
482.   //Reset the canvas
483.     if ((key == BACKSPACE) || (key == DELETE)){
484.       setup();
485.     }
486.     
487.   //Press z to activate/inactivate rainbow stroke
488.     if (key == 'b') {    
489.       penRainbowStroke = !penRainbowStroke;
490.     }
491.     
492.   //Adjust the pen hue, constrained to values between 0 - 360
493.     if (key == 'o') {
494.       penHue = min(penHue + 5, 360);
495.     }
496.     if (key == 'i') {
497.       penHue = max(penHue - 5, 0);
498.     }
499.     
500.   //Adjust the pen saturation, constrained to values between 0 - 100
501.     if (key == 'k') {
502.       penSat = min(penSat + 5, 100);
503.     }
504.     if (key == 'j') {
505.       penSat = max(penSat - 5, 0);
506.     }
507.     
508.   //Adjust the pen brightness, constrained to values between 0 - 100
509.     if (key == 'm') {
510.       penBright = min(penBright + 5, 100);
511.     }
512.     if (key == 'n') {
513.       penBright = max(penBright - 5, 0);
514.     }
515.   
516.   //Adjust the pen opacity, constrained to values between 0 - 100
517.     if (key == 'u') {
518.       penOpacity = min(penOpacity + 5, 100);
519.     }
520.     if (key == 'y') {
521.       penOpacity = max(penOpacity - 5, 0);
522.     }
523.     
524.   //Adjust stroke weight, constrained to values between 2 - 5
525.     if (key == 'h') {
526.       penStrokeWeight = min(penStrokeWeight + 1, 8);
527.     }
528.     if (key == 'g') {
529.       penStrokeWeight = max(penStrokeWeight - 1, 2);
530.     }
531.   
532.   //Adjust the size of the inner wheel, constrained to values between 20 and the radius of the outer ring
533.     if (key == 's') {
534.       wheelDiameter = min(wheelDiameter + 5, ringRadius);
535.     }
536.     if (key == 'a') {
537.       wheelDiameter = max(wheelDiameter - 5, 20);
538.     }
539.  
540.   //Adjust the offset of the penpoint, constrained to the radius of the wheel
541.     if (key == 'x') {
542.       penOffset = min(penOffset + 10, wheelRadius);
543.     }
544.     if (key == 'z') {
545.       penOffset = max(penOffset - 10, 0);
546.     }
547.   
548.   //Adjust the distance between each point
549.     if (key == 'e') {
550.       distance = min(distance + 10, 500);
551.     }
552.     if (key == 'r') {
553.       distance = max(distance - 10, 100);
554.     }
555.     
556.   //Adjust the size of the outer ring, constrained to values between 50 and 400
557.     if (key == 'w') {
558.       ringDiameter = min(ringDiameter + 5, 400);
559.     }
560.     if (key == 'q') {
561.       ringDiameter = max(ringDiameter - 5, 50);
562.     }
563.  
564.    //Press v to draw lines/points
565.     if (key == 'v') {    
566.       drawLines = !drawLines;
567.     }   
568. }