making a "poke back" program in processing

Question

x-post Processing Forum

I'm trying to make a super simple sketch where the user inputs a point with mousePressed, then (after a delay), processing plots a point at a random place on the screen back at you, and the points slowly fade into a semitransparent background. Here's my code, I've tried a bunch of different ideas but nothing seems to have worked, and now I'm at a point where nothing is working at all. Any pointers?

void setup() {
  size(600, 600);
  background(0);
  stroke(color(168, 168, 168));
  strokeWeight(2);
  frameRate(60);
  smooth();
}

void draw() {
  if (mousePressed) {
    ellipse(mouseX,mouseY,20,20);
    }
  else if (mousePressed) {
    delay(10);
    ellipse(random(mouseX), random(mouseY),20,20);
    } 
  else {
    fill(0,55,0, 2);
    rect(0, 0, width, height, 2);
  }
}

Answer 1

I would split the problem in two easier ones:

1. picking a random position (simple enough using the random() function)
2. slowly fading the point

To slowly fade the point there are at least a couple of options I can think of:

1. Pass a transparency value to stroke() and slowly decrease this value
2. Draw a dark rectangle with a low transparency to fade the whole frame slowly rather than instantly clearing the frame

(Quick tip on stroke(): if you pass a single value it will be used as a grayscale value. Be sure read the reference and see what options are available for you to play with)

Option 1:

//store current transparency
int transparency = 255;
//store random x,y positions
float randomX;
float randomY;

void setup() {
  size(600, 600);
  noFill();
  frameRate(60);
  smooth();
}

void draw() {
  //slowly fade out = decrease transparency
  transparency = transparency-1;
  //stop at 0 though
  if(transparency < 0) transparency = 0;

  background(0);
  stroke(168, 168, 168,transparency);
  strokeWeight(2);
  ellipse(randomX,randomY,20,20);
}
void mousePressed(){
  //reset transparency
  transparency = 255;
  //pick random coordinates
  randomX = random(width);
  randomY = random(height);
}

Demo:

//store current transparency
var transparency = 255;
//store random x,y positions
var randomX;
var randomY;

function setup() {
  createCanvas(600, 600);
  noFill();
  frameRate(60);
  smooth();
}

function draw() {
  //slowly fade out = decrease transparency
  transparency = transparency-1;
  //stop at 0 though
  if(transparency < 0) transparency = 0;
  
  background(0);
  stroke(168,transparency);
  strokeWeight(2);
  ellipse(randomX,randomY,20,20);
}
function mousePressed(){
  //reset transparency
  transparency = 255;
  //pick random coordinates
  randomX = random(width);
  randomY = random(height);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>