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>

Option 2:

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

void draw() {
  //remove stroke
  noStroke();
  //draw a black rectangle with really low transparency
  fill(0,4);
  rect(0,0,width,height);
}
void mousePressed(){
  //set a stroke and draw at random coordinates 
  stroke(color(168));
  strokeWeight(2);
  ellipse(random(width),random(height),20,20);
}

Demo:

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

function draw() {
  //remove stroke
  noStroke();
  //draw a black rectangle with really low transparency
  fill(0,4);
  rect(0,0,width,height);
}
function mousePressed(){
  //set a stroke and draw at random coordinates 
  stroke(color(168));
  strokeWeight(2);
  ellipse(random(width),random(height),20,20);
}

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

With the first option, transparency affects a single dot at a time. With the first option, transparency affects a multiple dots at a time (in fact, everything that's drawn). There is no right/wrong, it's all up to what's closest to what your concept is about. Have fun and explore!

Answer 2

You shouldn't use the delay() function to change the timings of animations. It just causes your program to become unresponsive.

Instead, use the frameCount variable or the millis() function to record timing information, then perform your animations based on that value.

Here's an example that displays a circle for 60 frames whenever you click the mouse:

int clickedFrame = -999;

void draw(){

  background(0);

  if(frameCount < clickedFrame + 60){
    ellipse(width/2, height/2, width, height);
  }
}

void mousePressed(){
  clickedFrame = frameCount;
}