Как я могу использовать JavaScript setTimeout в p5. js, чтобы проиллюстрировать сортировку слиянием? - PullRequest
Новая
       55

Как я могу использовать JavaScript setTimeout в p5. js, чтобы проиллюстрировать сортировку слиянием?

0 голосов
/ 30 апреля 2020

Я создал JavaScript & p5. js иллюстрацию для сортировки слиянием. Он работает отлично, все, что я хочу, это сделать его сортировку через заданные промежутки времени Куда мне нужно поместить функцию setTimeout или setInterval, чтобы показать сортировку чисел с интервалом 500 мс? Это моя ссылка для редактора p5: https://editor.p5js.org/alexrotariu/sketches/m4AFV21qJ

numbers = [15, 20, 4, 1, 25, 45, 32, 4];

function doMergeSort() {
    numbers = mergeSort(numbers);
}

function mergeSort(array) {
    if (array.length < 2) {
        return array;
    }
    let middle = parseInt(array.length/2);
    let left = array.slice(0, middle);
    let right = array.slice(middle, array.length);
    return merge(mergeSort(left), mergeSort(right))
}

function merge(left, right) {
    let result = [];
    while (left.length && right.length) {
        if (left[0] <= right[0]) {
            result.push(left.shift());
        } else {
            result.push(right.shift());            
        }
    }
    while (left.length) {
        result.push(left.shift());
    }
    while (right.length) {
        result.push(right.shift());
    }
    return result;
}

1 Ответ

0 голосов
/ 07 мая 2020

Чтобы ответить полностью, мне нужно посмотреть, как вы справляетесь с вашим методом рисования. Помните, что он является основным в вашей заявке. Это означает, что он не изменится при вызове методов при отрисовке l oop, а только выдаст вам результаты всего в конце отрисовки и обновит экран этим.

Если вы вызываете doMergeSort () в методе draw вы всегда будете рисовать отсортированный массив.

Вам нужно будет найти какой-нибудь способ разбить алгоритм сортировки слиянием, чтобы каждый шаг увеличивался на al oop через draw. Обычно для этого требуется «сломать» алгоритм каким-то образом с целью его демонстрации.

Вот очень простой пример концепции, о которой я говорю:

Обратите внимание, как circleB не обновляется для каждая итерация UpdateCircleB () для l oop обновляется только после достижения конца Draw (). 

let circleA = {
  y : 200,
  x : 30,
  r : 50

}

let circleB = {
  y : 300,
  x : 30,
  r : 50
}

function setup() {
  createCanvas(400, 800);
}

function draw() {
  //Increment Purple circle using draw loop
  //Every time we draw a frame, we move circle A 1 pixel to the right
  circleA.x++;
  
  //The green circle uses a for loop inside a method call to update
  //Every time we draw a frame, we move circle B 50 pixels to the right
  moveCircleB();
  
  //draw purple circle
  fill(152, 114, 132);
  ellipse(circleA.x,circleA.y,circleA.r);
  
  //draw green circle
  fill(157, 191, 158);
  ellipse(circleB.x,circleB.y,circleB.r);
}

function moveCircleB(){
  for(var i = 0; i < 50; i++){
    circleB.x++;
  }
}
html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>
...