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;
  }
}
Du-te sus!