Медленно обрабатываете метод рисования? - PullRequest
Новая
       28

Медленно обрабатываете метод рисования?

0 голосов
/ 28 апреля 2011

Я работаю над языком обработки, и у меня есть такой код: 

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(). Однако я хочу, чтобы оно постепенно увеличивалось. Я имею в виду, что шаг делает его на 20 больше в моем коде, но я хочу, чтобы он увеличился, т. Е. Через 2 секунды, если это возможно, с анимацией. Как я могу это сделать?

РЕДАКТИРОВАТЬ: Когда я определяю объект из этого класса и вызываю метод увеличенияCircle, он становится все больше и больше, не останавливается?

1 Ответ

3 голосов
/ 28 апреля 2011

Похоже, вам нужно обновить значения в зависимости от времени.

Если вы сохраняете время запуска, вы всегда можете проверить, сколько времени прошло, используя функцию 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);
}

В этой простой демонстрации вы можете нажать, чтобы сбросить анимацию и использовать клавиши - и =, чтобы увеличить или уменьшить продолжительность анимации.

Если вам удобно использовать внешние библиотеки в Processing, вам следует взглянуть на эту библиотеку .

Вы можете запустить демонстрацию ниже: 

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