pbInfo.ro
Probleme
Probleme - clasa a IX-a
Probleme - clasa a X-a
Probleme - clasa a XI-a
Probleme din concursuri
Căutare problemă
Exerciții
Programează cu Blockly
Desenează cu Processing
Exersează SQL
Soluţii
Resurse
Resurse pentru clasa a IX-a
Resurse pentru clasa a X-a
Resurse pentru clasa a XI-a
Articole recomandate
Subiecte bacalaureat
Ajutor
Autentificare
Înregistrare
Autentificare
Utilizator sau email
Parola
Acest site foloseşte cookies. Navigând în continuare, vă exprimaţi acordul asupra folosirii cookie-urilor.
Îti place pbInfo? Atunci acceptă-l cu totul! Dezactivează modulul de blocare a reclamelor!
Radial Fill - Processing
Lista scripturi
Script Nou
Ajutor
ID
Autor
Duplicat din
Ultima modificare
#7265
7B-Necsulescu Stefan Matei (Stefan_Matei_Necsulescu)
-
Luni, 25 mai 2026, 20:42
let isCooldown = false; let cooldownProgress = 0; // De la 0 la 1 (0% la 100%) let cooldownDuration = 0.01; // Viteza de umplere la fiecare cadru const centerX = 300; const centerY = 200; const maxRadius = 80; function setup() { createCanvas(400, 400); angleMode(RADIANS); // Lucrăm în radiani pentru precizie matematică } function draw() { background(25, 27, 33); // Desenăm instrucțiunile fill(255, 200); noStroke(); textSize(16); textAlign(CENTER); // 1. Desenăm fundalul iconiței (cercul gol) fill(50, 55, 65); stroke(80, 90, 100); strokeWeight(4); ellipse(centerX, centerY, maxRadius * 2); // Dacă suntem în starea de cooldown, calculăm umplerea radială pixel cu pixel if (isCooldown) { cooldownProgress += cooldownDuration; if (cooldownProgress >= 1) { cooldownProgress = 1; isCooldown = false; // Cooldown terminat } } // 2. ALGORITMUL RADIAL FILL (Randare prin geometrie unghiulară) // Calculăm unghiul maxim până la care trebuie să umplem cercul (în radiani) // Două rotații complete înseamnă TWO_PI (360 de grade) let targetAngle = cooldownProgress * TWO_PI; // Folosim funcțiile geometrice din p5.js pentru a desena un "arc" de cerc plin if (cooldownProgress > 0) { fill(0, 210, 255, 150); // Cyan Neon semi-transparent noStroke(); // arc(x, y, lățime, înălțime, unghi_start, unghi_stop, mod) // Începem de la -HALF_PI (-90 de grade) ca umplerea să pornească de SUS, nu din dreapta arc( centerX, centerY, maxRadius * 2 - 2, maxRadius * 2 - 2, -HALF_PI, -HALF_PI + targetAngle, PIE // Modul 'PIE' forțează liniile să se conecteze în centru, creând felia perfectă ); } // 3. Detalii estetice (Afișare procentaj în centru) fill(255); textSize(20); textAlign(CENTER, CENTER); let procent = floor(cooldownProgress * 100); text(procent + "%", centerX, centerY); } function mousePressed() { // Resetăm și pornim umplerea radială la click if (!isCooldown) { isCooldown = true; cooldownProgress = 0; } }
Duplicare
Executare
Cod
Cod HTML
<iframe sandbox="allow-scripts" src="/p5js/index.php?id=7265" style="width:408px; height:408px;border:solid 1px gray; overflow: scroll;"></iframe>
Duplicare script
Denumirea noului script
Du-te sus!