Recreating the Photoshop Pen Tool in Processing

Processing Coding Questions
1

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

    //beginShape(); 

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

    //endShape(CLOSE); 

  } 

  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: https://dmail-my.sharepoint.com/:w:/g/personal/2452239_dundee_ac_uk/EeDiLjfflZROqOfftoxH7UoBPWgS49sv5ff9CB-16qtVVw?e=RMAs73

This is what its results in:
image004

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

2

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 https://processing.org/tutorials/gettingstarted

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

void draw() {
  if (mousePressed) {
    //Draw line from previous frame to current)
    fill(0);
    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
  beginShape();
  for (int i = 0; i < points.size(); i++) {
    PVector p = points.get(i);
    vertex(p.x, p.y);
  }
  endShape();
}
1 Like
3

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

https://dmail-my.sharepoint.com/:f:/g/personal/2452239_dundee_ac_uk/EpWv_YopcEJHtrXiPbkqBXwBTp9Icb5NoWVIJJP_ce6VYA?e=TlvGWh