# Recreating the Photoshop Pen Tool in Processing
**URL:** https://discourse.processing.org/t/recreating-the-photoshop-pen-tool-in-processing/33042
**Category:** Coding Questions
**Tags:** homework
**Created:** [October 24, 2021, 2:11pm UTC](https://discourse.processing.org/t/recreating-the-photoshop-pen-tool-in-processing/33042 "2021-10-24T14:11:04Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@sebest\_design](https://discourse.processing.org/u/sebest_design)
#### Post date: [October 24, 2021, 2:11pm UTC](https://discourse.processing.org/t/recreating-the-photoshop-pen-tool-in-processing/33042/1 "2021-10-24T14:11:04Z")
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
```auto
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](https://dmail-my.sharepoint.com/:w:/g/personal/2452239_dundee_ac_uk/EeDiLjfflZROqOfftoxH7UoBPWgS49sv5ff9CB-16qtVVw?e=RMAs73)
This is what its results in:
I am a coding noob. Sorry if sharing a Word Doc comes across as naive.
Thanks in advance.
---
### Author:  [@philipplehmann](https://discourse.processing.org/u/philipplehmann)
#### Post date: [October 25, 2021, 9:22am UTC](https://discourse.processing.org/t/recreating-the-photoshop-pen-tool-in-processing/33042/2 "2021-10-25T09:22:30Z")
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:
```auto
// 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.
> **[Reference](https://processing.org/reference/ArrayList.html)**
>
> An ArrayList stores a variable number of objects. This is similar to making an array of objects, but with an ArrayList, items can be easily added and removed from the ArrayList and it is…
Add a point to the array list each frame, the you can recall those with something like createShape and add each point as vertex.
```auto
// Initialize at the beginning of the sketch
ArrayList points = new ArrayList();
void setup() {
size(480, 120);
points = new ArrayList();
}
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();
}
```
---
### Author:  [@sebest\_design](https://discourse.processing.org/u/sebest_design)
#### Post date: [October 25, 2021, 2:50pm UTC](https://discourse.processing.org/t/recreating-the-photoshop-pen-tool-in-processing/33042/3 "2021-10-25T14:50:49Z")
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](https://dmail-my.sharepoint.com/:f:/g/personal/2452239_dundee_ac_uk/EpWv_YopcEJHtrXiPbkqBXwBTp9Icb5NoWVIJJP_ce6VYA?e=TlvGWh)