慢慢处理做画法吗？ [英] Processing making a draw method slowly?

问题描述

我正在研究处理语言，我有一个这样的代码：

int fatness=30;
int step=20;

void drawCircle() {  
 fill(48, 139, 206);
 ellipse(width - fatness, height - fatness, fatness, fatness);   
}

void increaseCircle(){
 fatness = fatness + step;  
}

在另一个类中，我想调用increaseCircle()方法。不过，我想让它慢慢变大。我的意思是，在我的代码中，Step会让它更大20，但我希望它更大，即如果可能的话，在动画中增加2秒。我如何才能做到这一点？

编辑：当我从该类定义对象并调用increeneCircle方法时，它会越来越大，不会停止吗？

推荐答案

听起来您需要根据时间更新值。

如果存储开始时间，则始终可以使用millis()函数检查经过了多少时间。

一旦您知道经过了多少时间，您就可以将这一差异除以您想要更新变量的持续时间(在您的情况下是肥胖)。

这将为您提供介于0.0和1.0之间的值，您可以使用该值来缩放/乘以变量的最终所需值(例如，肥胖度从20到200)。

我的意思是：

int startTime;
int duration = 1000;
float startValue = 20;
float endValue = 200;
float currentValue = startValue;

void setup(){
  size(400,400,P2D);
  ellipseMode(CENTER);
  startTime = millis();
}
void draw(){
  background(255);
  increaseCircle();
  drawCircle();
}
void drawCircle() {  
 fill(48, 139, 206);
 ellipse(width - currentValue, height - currentValue, currentValue, currentValue);
}

void increaseCircle(){
  float progress = (float)(millis()-startTime)/duration;//millis()-startTime = difference in time from start until now
  if(progress <= 1.0) currentValue = startValue + (endValue * progress);//the current value is the final value scaled/multiplied by the ratio between the current duration of the update and the total duration
}
void mousePressed(){//reset value and time
  currentValue = startValue;
  startTime = millis();
}
void keyPressed(){//update duration
  if(key == '-') if(duration > 0) duration -= 100;
  if(key == '=' || key == '+') duration += 100;
  println("duration: " + duration);
}

在此简单演示中，您可以单击以重置动画，并使用-和=键增加或减少动画持续时间。

如果您习惯于在处理过程中使用外部库，则应该查看this library。

您可以运行以下演示：

var startTime;
var duration = 1000;
var startValue = 20;
var endValue = 200;
var currentValue = startValue;

function setup(){
  createCanvas(400,400);
  ellipseMode(CENTER);
  startTime = millis();
}
function draw(){
  background(255);
  increaseCircle();
  drawCircle();
}
function drawCircle() {  
 fill(48, 139, 206);
 ellipse(width - currentValue, height - currentValue, currentValue, currentValue);
}

function increaseCircle(){
  var progress = (float)(millis()-startTime)/duration;//millis()-startTime = difference in time from start until now
  if(progress <= 1.0) currentValue = startValue + (endValue * progress);//the current value is the final value scaled/multiplied by the ratio between the current duration of the update and the total duration
}
function mousePressed(){//reset value and time
  currentValue = startValue;
  startTime = millis();
}
function keyPressed(){//update duration
  if(key == '-') if(duration > 0) duration -= 100;
  if(key == '=' || key == '+') duration += 100;
  println("duration: " + duration);
}

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

这篇关于慢慢处理做画法吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！