在处理中制作一个“poke back”程序

Question

x-post Processing Forum

我正在尝试制作一个超级简单的草图，其中用户使用 mousePressed 输入一个点，然后（延迟后）处理在屏幕上的随机位置绘制一个点，然后这些点慢慢淡入一个半透明的背景。这是我的代码，我尝试了很多不同的想法，但似乎没有任何效果，现在我处于一个根本没有任何效果的地步。有什么指点吗？

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

我会将问题分成两个更简单的问题：

1. 选择一个随机位置（使用random() 函数非常简单）
2. 慢慢淡化点

要慢慢淡化这一点，我至少可以想到几个选项：

1. 将透明度值传递给stroke()，然后慢慢减小该值
2. 绘制一个透明度较低的深色矩形以缓慢淡化整个框架，而不是立即清除框架

（stroke() 上的快速提示：如果您传递单个值，它将被用作灰度值。请务必阅读参考并查看可供您使用的选项）

选项 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);
}

演示：

//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>

选项 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);
}

演示：

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>

使用第一个选项时，透明度一次只影响一个点。 使用第一个选项，透明度一次影响多个点（实际上，所有绘制的点）。 没有对错之分，这完全取决于最接近您的概念的内容。玩得开心，探索！

Answer 2

您不应该使用delay() 函数来更改动画的时间。它只会导致您的程序变得无响应。

改为使用frameCount 变量或millis() 函数记录时间信息，然后根据该值执行动画。

这是一个示例，当您单击鼠标时会显示一个 60 帧的圆圈：

int clickedFrame = -999;

void draw(){

  background(0);

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

void mousePressed(){
  clickedFrame = frameCount;
}