TGViewer
Javascript Javascript @javascriptv · 16.9K subscribers
Post #1425 4.44K
🖥 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
  • 🔥 12
  • 👍 6
  • ❤ 5
More from @javascriptv
  1. Oct 3, 2026Импорт локальных изображений vs использование изображений из папки / public в Next.js
  2. Oct 2, 2026Совет по веб-доступности 💡 Лучший способ сделать ваши ссылки, состоящие только из иконок,…
  3. Sep 30, 2026🌐 Человек, который создал первый веб-браузер, сервер и заложил основу современного интерн…
  4. Sep 29, 2026🛠️ Awesome SRE - большая подборка ресурсов для Site Reliability Engineering Репозиторий a…
  5. Sep 26, 2026Card Carousel Этот элемент веб-дизайна реализован с использованием HTML и CSS. Он представ…
  6. Sep 24, 2026photo post
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →