to = new ArrayList();
// necessary to know if the mouse enters a "from" or a "to" point of a line
int situation=0;
// -------------------------------------------------------------------------
// processing core functions
void setup() {
size(600, 1000);
stroke(255);
}//func
void draw() {
background (0);
stroke(255);
// show all stored lines
for (int i = 0; i < to.size(); i++) {
PVector currentFrom = from.get(i);
PVector currentTo = to.get(i);
// the line
linePV ( currentFrom,
currentTo );
}//for
// we show current line
if (situation==1) {
stroke(0, 255, 0);
linePV(from.get(from.size()-1),
new PVector(mouseX, mouseY));
}
}//func
// -------------------------------------------------------------------------
// Inputs
void mousePressed() {
// depending on situation we store mouse-position as "from" or as "to" point
if (situation==0)
from.add (new PVector (mouseX, mouseY));
else if (situation==1)
to.add (new PVector (mouseX, mouseY));
// manage situation variable
situation++;
if (situation>1)
situation=0;
}//func
// -------------------------------------------------------------------------
// Tools
void linePV ( PVector pv1, PVector pv2) {
line(pv1.x, pv1.y,
pv2.x, pv2.y);
}//func
//
```
---
### Author:  [@rajmb](https://discourse.processing.org/u/rajmb)
#### Post date: [October 21, 2020, 5:12am UTC](https://discourse.processing.org/t/continuously-update-drawing-during-mousedragged/24762/3 "2020-10-21T05:12:24Z")
Thank you Chrisir for your welcome and the prompt response. I was previously thinking of using PGraphics to store the last known image and paint over it with the new shape. But this is a great idea to use an ArrayList as it provides a way to create an Undo feature too - It does seem difficult as I need to distinguish the shape being drawn currently from all that has been drawn previously. Let me think thru the solution.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 21, 2020, 9:26am UTC](https://discourse.processing.org/t/continuously-update-drawing-during-mousedragged/24762/4 "2020-10-21T09:26:29Z")
> [@rajmb](#):
>
> It does seem difficult as I need to distinguish the shape being drawn currently from all that has been drawn
That’s not difficult.
Just draw the content of the ArrayList and on top the current moving ellipse.
* * *
**An idea**
What is more difficult:
to work with 2 parallel ArrayLists is cumbersome and error-prone. Instead you could make a class Ellipse with x,y and width and height and then let the ArrayList contain objects of that type:
`ArrayList ellipses = new ArrayList();`
Then you can just store the data in the object of the class.
`ellipses.add(new Ellipse(x,y,w,h));`
There is a tutorial about objects. Please read it. [Objects / Processing.org](https://www.processing.org/tutorials/objects/)
Chrisir
---
### Author:  [@rajmb](https://discourse.processing.org/u/rajmb)
#### Post date: [October 21, 2020, 1:36pm UTC](https://discourse.processing.org/t/continuously-update-drawing-during-mousedragged/24762/5 "2020-10-21T13:36:00Z")
Thank you Chrisir once again. I have tried implementing the same here: [https://editor.p5js.org/rajmb502/sketches/0UB2fQ9t-](https://editor.p5js.org/rajmb502/sketches/0UB2fQ9t-)
But I think I am making some mistake as the ellipse does not stop drawing even when mouse is released. Trying to debug now.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 21, 2020, 1:40pm UTC](https://discourse.processing.org/t/continuously-update-drawing-during-mousedragged/24762/6 "2020-10-21T13:40:03Z")
in mousePressed say hold=true;
in mouseReleased say hold =false;
in mouseDragged run its content only when `if (hold==true)`
before setup say `boolean hold=false;`
---
### Author:  [@rajmb](https://discourse.processing.org/u/rajmb)
#### Post date: [October 21, 2020, 1:54pm UTC](https://discourse.processing.org/t/continuously-update-drawing-during-mousedragged/24762/7 "2020-10-21T13:54:41Z")
Thanks Chrisir. It is done and is working fine now 🙂
Pasting code here for other’s reference:
```auto
let penColor = '#ffffff';
let bgColor = '#000000';
let strokeWt = 4;
let globalX = 0;
let globalY = 0;
let arrayOfShapes = [];
let data;
let shape = 'ellipse';
let hold = false;
function setup() {
createCanvas(400, 400);
stroke(penColor);
strokeWeight(strokeWt);
noFill();
frameRate(10);
}
function draw() {
background(color(bgColor));
if (arrayOfShapes != null) {
for(let i = 0; i < arrayOfShapes.length;i++) {
if (arrayOfShapes[i].tool == 'ellipse') {
ellipseMode(CORNERS);
ellipse(arrayOfShapes[i].x, arrayOfShapes[i].y, arrayOfShapes[i].px, arrayOfShapes[i].py);
}
}
}
}
function mouseReleased() {
data = {x:globalX, y:globalY, px:pmouseX, py:pmouseY, foregroundColor:penColor.toString('#rrggbb'), sW:strokeWt, tool:shape};
arrayOfShapes.push(data);
hold = false;
}
function mouseDragged() {
if (hold == true) {
push();
strokeWeight(strokeWt/2);
ellipseMode(CORNERS);
ellipse(globalX, globalY, mouseX, mouseY);
pop();
}
}
function mousePressed() {
if ((mouseX > 0) && (mouseY > 0)) {
globalX = mouseX;
globalY = mouseY;
hold = true;
}
}
```