# Making shapes and deleting them?
**URL:** https://discourse.processing.org/t/making-shapes-and-deleting-them/13888
**Category:** Coding Questions
**Created:** [September 9, 2019, 6:15am UTC](https://discourse.processing.org/t/making-shapes-and-deleting-them/13888 "2019-09-09T06:15:23Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@freek\_b](https://discourse.processing.org/u/freek_b)
#### Post date: [September 9, 2019, 6:15am UTC](https://discourse.processing.org/t/making-shapes-and-deleting-them/13888/1 "2019-09-09T06:15:23Z")
i have tried to find a way to add shapes (circles and so) while its running just the problem is i am not able to find the right command
i have found a few people saying that i should use something alike
new circle(20,20,10); but it doesn’t recognize the new (my intention is to make a shape and let it sit there for 5 seconds and then make it disappear) which command can i use to make and delete shapes?
(i mean this as in making a trail behind your mouse which is going to make the last few shapes disappear after a few second)
---
### Author:  [@Pvag](https://discourse.processing.org/u/Pvag)
#### Post date: [September 9, 2019, 6:39am UTC](https://discourse.processing.org/t/making-shapes-and-deleting-them/13888/2 "2019-09-09T06:39:45Z")
One trick is to draw a rectangle as wide and tall as your canvas. This rectangle should be filled with a color which is not fully opaque.
Here’s an example:
```auto
void draw() {
fill(0, 10); // I am setting a black transparent fill, in order to make the trail, with a value of 10 for the alpha value (which is the value for the opacity)
rect(0, 0, width, height); // this draws the transparent rectangle, which is as big as the canvas
// draw your shapes here, for example white circles
fill(255);
ellipse(mouseX, mouseY, 10, 10);
}
```
Enjoy 🌴
---
### Author:  [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [September 9, 2019, 6:54am UTC](https://discourse.processing.org/t/making-shapes-and-deleting-them/13888/3 "2019-09-09T06:54:28Z")
Example code:
```auto
ArrayList ps = new ArrayList();
int c = 0;
void setup(){
size(600,400);
colorMode(HSB,255);
noStroke();
}
void draw(){
background(0);
ps.add( new PVector( mouseX, mouseY, c ) );
if( millis() > 5000 ) ps.remove(0);
for( int i = 0; i < ps.size(); i++ ){
fill( ps.get(i).z, 255, 255 );
ellipse( ps.get(i).x, ps.get(i).y, 20, 20 );
}
c++;
c%=255;
}
```
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [September 9, 2019, 7:00am UTC](https://discourse.processing.org/t/making-shapes-and-deleting-them/13888/4 "2019-09-09T07:00:34Z")
@Pvag , @TfGuy44
possibly here p5.js examples needed?
---
### Author:  [@Pvag](https://discourse.processing.org/u/Pvag)
#### Post date: [September 9, 2019, 7:03am UTC](https://discourse.processing.org/t/making-shapes-and-deleting-them/13888/5 "2019-09-09T07:03:19Z")
ohh sorry, I didn’t notice this was posted in the p5.js section ! I am quite new to this forum, sorry !
---
### Author:  [@Pvag](https://discourse.processing.org/u/Pvag)
#### Post date: [September 9, 2019, 7:07am UTC](https://discourse.processing.org/t/making-shapes-and-deleting-them/13888/6 "2019-09-09T07:07:46Z")
Here’s a p5.js implementation of my previous answer:
```auto
function setup() {
createCanvas(600, 200);
background(0);
}
function draw() {
fill(0, 10); // change the 10, from 0 to 255, for a different trail length
rect(0, 0, width, height);
fill(255);
ellipse(mouseX, mouseY, 10, 10);
}
```
---
### Author:  [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [September 9, 2019, 7:15am UTC](https://discourse.processing.org/t/making-shapes-and-deleting-them/13888/7 "2019-09-09T07:15:40Z")
P5.js example code:
```auto
let ps = [];
let c = 0;
function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB, 255);
noStroke();
}
function draw() {
background(0);
let j = [mouseX, mouseY, c];
ps.push( j );
if( millis() > 5000 ) { ps.shift(); }
for( var i = 0; i < ps.length; i++ ){
fill( ps[i][2], 255, 255 );
ellipse( ps[i][0], ps[i][1], 20, 20 );
}
c++;
c %= 255;
}
```
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [September 9, 2019, 7:36am UTC](https://discourse.processing.org/t/making-shapes-and-deleting-them/13888/8 "2019-09-09T07:36:24Z")
array of class with timeout
paint with mouse pressed / drag
[https://editor.p5js.org/kll/sketches/zRCXLMYUZ](https://editor.p5js.org/kll/sketches/zRCXLMYUZ)
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [September 9, 2019, 3:58pm UTC](https://discourse.processing.org/t/making-shapes-and-deleting-them/13888/9 "2019-09-09T15:58:04Z")
Hmm – @kll this is a nice solution!
However it does have a concurrent modification bug – you can’t splice(i, 1) inside a forward loop in that way, as [removing while iterating](https://coderwall.com/p/prvrnw/remove-items-from-array-while-iterating-over-it) reindexes the list and [skips the next entry](https://stackoverflow.com/questions/9882284/looping-through-array-and-removing-items-without-breaking-for-loop). To see it more clearly, try dropping your framerate and testing the sketch – deleted trails jump in and out because the loop fails to delete (and draw!) neighboring timeouts.
```
frameRate(4)
```
One easy fix is to bump the index after each delete.
```auto
function draw() {
background(50, 89, 100);
for (let i = 0; i < circlist.length; i++) {
circlist[i].display();
if ( circlist[i].timeout ){
circlist.splice(i,1);
i--;
}
}
}
```
The classic way is to iterate backwards through a loop that you want to delete from. However, in this case you want to draw forwards – so you would need two loops.
```auto
// delete
for (let i = circlist.length-1; i >=0 ; --i) {
if ( circlist[i].timeout ){
circlist.splice(i,1);
}
}
// display
for (let i = 0; i < circlist.length; i++) {
circlist[i].display();
}
```