Recreating the Photoshop Pen Tool in Processing

Hello. I am working on a school project. I am supposed to create a Snapchat filter. I am trying to create something close to the pen tool with Processing 3.

So far I have not been able to figure out how to use arrays along with vertex to form shapes.
Here’s the code I am stuck with

 for (int i = PenToolY.length-1; i > 0; i--) { 

    PenToolY[i] = PenToolY[i-1]; 


  for (int i = PenToolX.length-1; i > 0; i--) { 

    PenToolX[i] = PenToolX[i-1]; 


  // Add new values to the beginning 

  PenToolY[0] = mouseY; 

  // Display each pair of values as a line 

  for (int i = 1; i < PenToolY.length; i++) { 

    line(i, PenToolY[i], i-1, PenToolY[i-1]); 


    //vertex(i, PenToolY[i], i-1, PenToolY[i-1]); 



  PenToolX[0] = mouseX; 

  // Display each pair of values as a line 

  for (int i = 1; i < PenToolX.length; i++) { 

   line(i, PenToolX[i], i-1, PenToolX[i-1]); 

I have used the line function to see how arrays can affect the coordinates when combine with mouse interaction.

Here’s the full code:

This is what its results in:

I am a coding noob. Sorry if sharing a Word Doc comes across as naive.
Thanks in advance.

Hey there

First: I cant see download your sketch. Make a zip-archive to share.

Could you directly draw onto the canvas? Then its very easy:

// Based on

void setup() {
  size(480, 120);

void draw() {
  if (mousePressed) {
    //Draw line from previous frame to current)
    line(pmouseX, pmouseY, mouseX, mouseY);

If you need to recreate the drawings you need a form to store the information.
An array in Processing is suboptimal, because it has a fixed length.
Try looking into ArrayLists instead. They are sort of the same but work different.

Add a point to the array list each frame, the you can recall those with something like createShape and add each point as vertex.

// Initialize at the beginning of the sketch
ArrayList<PVector> points = new ArrayList<PVector>();

void setup() {
  size(480, 120);
  points = new ArrayList<PVector>();

void draw() {
  if (mousePressed) {
    //Add the point to the arrayList
    points.add(new PVector(mouseX, mouseY));
  // Draw the shape
  for (int i = 0; i < points.size(); i++) {
    PVector p = points.get(i);
    vertex(p.x, p.y);

1 Like

Sorry. I should have known better. Here is a zip file of the sketch: