Making shapes and deleting them?

p5.js Coding Questions
1

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)

2

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:

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 :palm_tree:

1 Like
3

Example code:

ArrayList<PVector> 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;
}
1 Like
4

@Pvag , @TfGuy44
possibly here p5.js examples needed?

1 Like
5

ohh sorry, I didn’t notice this was posted in the p5.js section ! I am quite new to this forum, sorry !

6

Here’s a p5.js implementation of my previous answer:

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);
}
2 Likes
7

P5.js example code:

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;
}
2 Likes
8

array of class with timeout
paint with mouse pressed / drag
https://editor.p5js.org/kll/sketches/zRCXLMYUZ

2 Likes
9

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 reindexes the list and skips the next entry. 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.

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.

  // 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();
  }
1 Like