Визуализирующий пузырь Сортировать с p5.js

Автор оригинала: Robin Andrews.

Нажмите на холст, чтобы обновить анимацию

Я хотел сделать визуализацию для алгоритмической проблемы, связанной с обратно Когда я заметил, что решение было удивительно похоже на Сортировка пузыря Отказ Поскольку часто очень полезно работать над более простым, связанным с этим, чем решая сложную проблему сразу, я решил сделать Bubble Sort Visualizer Как шаг на пути к решению оригинальной задачи (который должен был найти минимальное значение, которое может быть сформировано путем замены K цифр в положительном целом). Вы можете узнать больше о Bubble Sort здесь Отказ

Я сделал немного копая, чтобы найти, если бы были какие-либо инструменты, которые могли бы помочь в этом проекте, и я наткнулся на p5.js , который фантастический инструмент на основе Javescript Отказ

P5.JS – это библиотека JavaScript для творческого кодирования, с фокусировкой на создание Accessing Accessible и включительно для художников, дизайнеров, преподавателей, начинающих и всех остальных! P5.js бесплатный и открытый источник, потому что мы верим программное обеспечение, а инструменты, чтобы узнать его, должны быть доступны всем.

С небольшим количеством работ я смог придумать визуализацию выше для Сортировка пузыря используя замечательно несколько строк кода.

Перечисление кода для визуализации сортировки пузыря с P5.JS

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

Одна вещь, которая поймала меня, получая это на работу, была Переменная область охвата Отказ Было несколько мест, где я изначально использовал JS Пусть Ключевое слово, когда я хотел получить доступ к глобальной переменной ( p5.js , по-видимому, наносят много использования …). Использование Пусть Значит новые локальные версии переменных, которые не содержали значения, которые я ожидал. Просто голова, это то, что нужно смотреть на работу с p5.js Отказ

const numBars = 10;
const fps = 1;  // Frame rate
let bars = [];
let barWidth;
let currentBar;
let i;
let j;

// The statements in the setup() function
// execute once when the program begins
function setup() {
    frameRate( fps );
    myCanvas = createCanvas( 800, 400 );
    myCanvas.parent("bubbleSort");
    barWidth = width / numBars;
    stroke( 255 );
    strokeWeight( 2 );
    myReset();
}

// The statements in the draw() function are executed until the
// program is stopped.
function draw() {
    background( 0, 0, 255 );
    bubbleSort();
    drawBars();
}

// The Bubble Sort Algorithm
function bubbleSort() {
    currentBar = j;
    if ( i < bars.length ) {
    let temp = bars[j];
    if ( bars[j] > bars[j + 1] ) {
        bars[j] = bars[j + 1];
        bars[j + 1] = temp;
    }
    j++;

    if ( j >= bars.length - i - 1 ) {
        j = 0;
        i++;
    }
    } else {
    noLoop(); // Stop calling draw() once we are done.
    }
}

// Prepare the bars for drawing by draw()
function drawBars() {
    window.console.log(bars);
    for ( const [idx, val] of bars.entries() ) {
    barHeight = ( height - 50 ) / 10 * val;
    topLeftX = idx * ( barWidth );
    topLeftY = height - barHeight
    // rect uses topLeftX, topLeftY, width, height
    if ( idx == currentBar || idx == currentBar + 1 ) {
        fill( 0, 255, 0 ); // green
    } else {
        fill( 255, 0, 0 ); // red
    }
    rect( topLeftX, topLeftY, barWidth, barHeight );
    textSize( 40 );
    textAlign( CENTER );
    fill( 255 )
    text( val, topLeftX + barWidth / 2, topLeftY - 10 );
    fill( 255, 0, 0 );
    }
}

function myReset() {
    bars = [];
    i = 0;
    j = 0;
    bars[0] = Math.floor( ( Math.random() * 9 ) + 1 );  // between 1 and 9 inc.
    for ( let i = 1; i < numBars; i++ ) {
    bars[i] = Math.floor( Math.random() * 10 ); // between 0 and 9 inc.
    }
    loop();
}

function mousePressed(){
    myReset();
}

HTML вам понадобится:

Вместе с p5.js Источник от CDN. Например.

Если вы хотите получить p5.js Вы можете скачать его или получить ссылку на CDN версия здесь Отказ

Я надеюсь, что вы найдете что-то ценное в этой статье, будь то сама визуализация сортировки пузыря или, может быть, какое-то вдохновение для проверки p5.js для себя.

Счастливые вычисления.