Javascript

🖥 p5.js — open-source библиотека JavaScript, заточенная под создание визуализаций, анимаций и т.д.

В p5.js сделан упор на простоту использования и лаконичность
К примеру, вот код для визуализации пузырьковой сортировки:

let values = [];
let i = 0;
let j = 0;

function setup() {
  createCanvas(720, 400);
  for(let i = 0;i<width/8;i++){
    values.push(random(height));
  }
}

function draw() {
  background(220);
  bubbleSort();
  simulateSorting();
}

function bubbleSort() {
  for(let k = 0;k<8;k++){
    if(i<values.length){
      let temp = values[j];
      if(values[j] > values[j+1]){
        values[j] = values[j+1];
        values[j+1] = temp;
      }
      j++;
      
      if(j>=values.length-i-1){
        j = 0;
        i++;
      }
    }
    else{
      noLoop();
    }
  }
}

function simulateSorting(){
  for(let i = 0;i<values.length;i++){
    stroke(100, 143, 143);
     fill(50);
     rect(i*8 , height, 8, -values[i],20);
   }
}

🖥 GitHub
🟡 Примеры использования p5.js

@javascriptv

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥12👍6❤5

www.tgoop.com/javascriptv/1425

4.4K viewsJul 4, 2024 at 14:03

🖥 p5.js — open-source библиотека JavaScript, заточенная под создание визуализаций, анимаций и т.д.

В p5.js сделан упор на простоту использования и лаконичность
К примеру, вот код для визуализации пузырьковой сортировки:

let values = [];
let i = 0;
let j = 0;

function setup() {
  createCanvas(720, 400);
  for(let i = 0;i<width/8;i++){
    values.push(random(height));
  }
}

function draw() {
  background(220);
  bubbleSort();
  simulateSorting();
}

function bubbleSort() {
  for(let k = 0;k<8;k++){
    if(i<values.length){
      let temp = values[j];
      if(values[j] > values[j+1]){
        values[j] = values[j+1];
        values[j+1] = temp;
      }
      j++;
      
      if(j>=values.length-i-1){
        j = 0;
        i++;
      }
    }
    else{
      noLoop();
    }
  }
}

function simulateSorting(){
  for(let i = 0;i<values.length;i++){
    stroke(100, 143, 143);
     fill(50);
     rect(i*8 , height, 8, -values[i],20);
   }
}