做一个“回击"正在处理的程序 [英] making a "poke back" program in processing

问题描述

x-post 处理论坛

我正在尝试制作一个超级简单的草图，其中用户用鼠标按下输入一个点，然后(延迟后)，处理在屏幕上的随机位置绘制一个点回到您身边，然后这些点慢慢淡入半透明的背景.这是我的代码，我尝试了很多不同的想法，但似乎没有任何效果，现在我处于什么都不起作用的地步.有什么指点吗?

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

推荐答案

我会把问题分成两个更简单的:

I would split the problem in two easier ones:

1. 选择一个随机位置(使用 random() 函数足够简单)
2. 慢慢淡出重点

要慢慢淡出重点，我至少可以想到几个选项:

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

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

(关于 stroke() 的快速提示:如果您传递单个值，它将用作灰度值.请务必阅读参考资料，看看有哪些选项可供您使用)

(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)

选项 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>

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

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!

这篇关于做一个“回击"正在处理的程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！