COLEGIUL NAȚIONAL ROMAN VODĂ

WEBSITE FRACTALI

LUCRARE PENTRU OBȚINEREA ATESTATULUI

DE COMPETENȚE PROFESIONALE

Elev: Romaniuc Albert Iulian Coordonate

prof. Moldovanu Florin

MAI 2024

ARGUMENT
Am ales tema fractalilor datorită fascinației pe care aceste modele geometrice complexe o exercită
asupra mea. Fractali reprezintă o intersecție uimitoare între matematică, artă și știință, oferind un
domeniu vast și captivant de explorare. În plus, studiul fractalilor nu numai că ne permite să înțelegem
și să apreciem frumusețea formelor naturale, dar și să aplicăm aceste cunoștințe în diverse domenii
practice, de la grafica computerizată până la analiza datelor și simulările naturale. Alegerea acestei
teme mă motivează să descopăr mai multe despre structura și complexitatea universului înconjurător și
să explorez conexiunile dintre matematică și lumea reală.

Unul dintre aspectele fascinante ale fractalilor este natura lor iterativă și recursivă. Aceste modele se
bazează pe algoritmi simpli, care, când sunt aplicați repetat, conduc la forme complexe și interesante.
De exemplu, fractalul Sierpinski este unul dintre cele mai cunoscute exemple de autosimilaritate. În
acest model, un triunghi este împărțit în trei triunghiuri mai mici, care sunt apoi împărțite în alte
triunghiuri, și tot așa, continuând la infinit. Această simplă iterație produce un model complex și
frumos, care este întâlnit în natură și este folosit în diverse aplicații practice.
O altă aplicație importantă a fractalilor este în generarea de modele de copaci și forme naturale. De
exemplu, fractalii pot fi utilizați pentru a recrea forma unui copac în mod realist, luând în considerare
detaliile ramurilor și frunzelor într-un mod care imită structura naturală a unui copac. Acest lucru are
aplicații practice în domenii precum grafica computerizată și simulările naturale, unde fractalii sunt
folosiți pentru a crea medii și scene realiste.
Pe lângă aplicările practice, studiul fractalilor are și implicații profunde în înțelegerea noastră a naturii
și a structurii universului. De la forma coastelor și a munților la structura creierului și a plasmei,
fractalii sunt omniprezenți în lumea înconjurătoare și ne oferă o nouă perspectivă asupra complexității
și frumuseții naturii.

Cuprins
1.Introducere…………………………………………………………………………………....1

2.Argument.……………………………………………………………………………………..2

3.Tehnologii.……………………………………………………………………………………..4

4.Copac-Fractal.………………………………………………………………………………...7

5.Triunghiul lui Sierpisnki…………………………………………………………………….12

6.Design Site.…………………………………………………………………………………...15

7.Bibliografie………………………………………………………………………..………….16

Tehnologii folosite:
Crearea unei pagini web implică două aspecte principale: structurarea conținutului cu HTML și
stilizarea acestuia cu CSS. În acest articol, vom explica cum să realizați o pagină web de bază folosind
HTML și CSS. HTML (HyperText Markup Language) este limbajul de marcare folosit pentru a crea
structura și conținutul unei pagini web.

Într-un document HTML, conținutul este marcat folosind elemente HTML, care sunt delimitate de tag-
uri. De exemplu, pentru a crea un paragraf, vom folosi tag-ul <p> și vom scrie textul în interiorul
acestuia:

<p>Acesta este un paragraf de exemplu.</p>

Fiecare element HTML poate avea și unul sau mai multe atribute, care oferă informații suplimentare
despre element. De exemplu, putem adăuga un atribut "class" pentru a defini un stil CSS pentru acel
element:

<p class="exemplu">

Acesta este un paragraf de exemplu.</p>

CSS (Cascading Style Sheets) este folosit pentru a adăuga stiluri și aspecte vizuale paginii web.
Stilurile CSS sunt aplicate la elementele HTML folosind selectori și declarații de stil. De exemplu,
putem defini un stil pentru toate paragrafele din pagină folosind selectorul "p" și declarații precum
culoarea textului sau fontul utilizat:

p { color: black; font-family: Arial, sans-serif; }

Aceste stiluri pot fi și mai specifice, folosind selectori cum ar fi ID-uri sau clase. De exemplu, putem
defini un stil pentru un singur paragraf folosind ID-ul:

<p id="unic">Acesta este un paragraf unic.</p>

#unic { color: red; }

JavaScript (JS) este un limbaj de programare folosit pentru a face paginile web
interactive și dinamice. Prin adăugarea codului JavaScript în pagină, puteți face ca elementele HTML
să reacționeze la acțiunile utilizatorului sau la evenimente precum clicuri, hover sau trimiterea unui
formular.
Pentru a adăuga JavaScript într-o pagină web, puteți utiliza elementul <script> în interiorul
documentului HTML sau puteți include un fișier JavaScript extern prin intermediul atributului src al
elementului <script> .

<script>
// Aici puteți scrie codul JavaScript direct în interiorul paginii web
alert('Bun venit pe pagina noastră web!');
</script>

<script src="script.js"></script>

Variabile în JavaScript:
1. Variabilele pot fi definite folosind cuvântul cheie var , let , sau const .

javascriptCopy code
var numar = 10;
let text = "Salut, lume!";
const PI = 3.14;

Funcții în JavaScript:
1. Definirea unei funcții:

javascriptCopy code
function salut() {
console.log("Salut, lume!");
}

2. Funcții cu parametri:

javascriptCopy code
function salutPersoana(nume) {
console.log("Salut, " + nume + "!");
}

3. Funcții care returnează valori:

javascriptCopy code
function adunare(a, b) {
return a + b;
}

var suma = adunare(3, 5);

console.log(suma); // Va afișa: 8

4. Funcții atribuite la variabile (funcții anonime):

javascriptCopy code
var afisareMesaj = function() {
console.log("Acesta este un mesaj.");
};

afisareMesaj();

5. Funcții cu funcții callback:

javascriptCopy code
function executareOperatie(a, b, operatie) {
return operatie(a, b);
}

function adunare(a, b) {
return a + b;
}

function scadere(a, b) {
return a - b;
}

console.log(executareOperatie(5, 3, adunare)); // Va afișa: 8

console.log(executareOperatie(5, 3, scadere)); // Va afișa: 2

Fractal – Copac
Explicarea Codului
let canvas = document.getElementById("canvas");
Linia obține elementul canvas din pagină folosind metoda getElementById() a obiectului
document . Elementul canvas este identificat folosind atributul id cu valoarea "canvas" . După ce
această linie este executată, variabila canvas va referi la elementul canvas din pagină.

let ctx = canvas.getContext("2d");

Această linie de cod obține contextul de desenare al elementului canvas folosind metoda
getContext() a elementului canvas. Argumentul "2d" specifică faptul că dorim să obținem un
context 2D pentru desenare bidimensională.

const lengthOfTheLine = 200;

Această linie definește o constantă numită lengthOfTheLine care stochează lungimea inițială a
unei linii în desenul fractal.

let rotateAngle = 0.8;

Această linie definește o variabilă numită rotateAngle care stochează un unghi de rotație pentru
ramificațiile fractalului.

let branchLength = 0.67;

Această linie definește o variabilă numită branchLength care stochează lungimea relativă a
ramificațiilor fractalului în comparație cu linia principală.

let maxDepth = 12;

Această linie definește o variabilă numită maxDepth care stochează adâncimea maximă a desenului
fractal. Această valoare specifică câte nivele de iterație vor fi desenate în fractal.

ctx.lineWidth = 1;
Această linie de cod setează grosimea liniei pentru desenare. Proprietatea lineWidth specifică
grosimea liniei în unități de grosime a pixelilor.

ctx.strokeStyle = "#fff";
Această linie de cod setează culoarea liniei pentru desenare. Proprietatea strokeStyle specifică
culoarea liniei folosite la desenare.

let angle = document.getElementById("angle");

Această linie de cod utilizează metoda getElementById() a obiectului document pentru a
obține o referință către un element HTML cu un atribut id specificat.

let length = document.getElementById("length");

Această linie de cod are același scop ca și cea anterioară, dar caută un element HTML cu
id="length" .

let depth = document.getElementById("depth");

Similar cu celelalte linii, această linie de cod obține referința către un element HTML cu
id="depth" .

angle.addEventListener("input", () => {
rotateAngle = angle.value / 100;
drawTree();
});
Această linie de cod adaugă un event listener pentru evenimentul "input" la elementul cu id-ul "angle".
Astfel, când utilizatorul introduce sau modifică valoarea în câmpul de input asociat cu acest element,
funcția specificată în interiorul blocului de cod se va executa.

length.addEventListener("input", () => {
branchLength = length.value / 100;
drawTree();
});
Această linie de cod adaugă un event listener similar pentru evenimentul "input" la elementul cu id-ul
"length". Astfel, când utilizatorul introduce sau modifică valoarea în câmpul de input asociat cu acest
element, funcția specificată în interiorul blocului de cod se va executa.

depth.addEventListener("input", () => {
maxDepth = depth.value;
drawTree();
});
Această linie de cod adaugă un event listener pentru evenimentul "input" la elementul cu id-ul "depth".
Astfel, când utilizatorul introduce sau modifică valoarea în câmpul de input asociat cu acest element,
funcția specificată în interiorul blocului de cod se va executa.

function drawnLine(len) {
ctx.beginPath();
Această linie de cod începe un nou traseu de desenare. Acest lucru este necesar
pentru a începe desenarea unei linii noi.

ctx.moveTo(0, 0);
Această linie de cod mută cursorul de desenare la coordonatele (0, 0) din canvas. Se
specifică punctul de plecare al liniei.

ctx.lineTo(0, -len);
Această linie de cod adaugă o linie către coordonatele (0, -len) din canvas.
Coordonata y este negativă pentru că direcția verticală a coordonatelor pe canvas este inversată (0 este
în partea de sus, iar valori mai mari sunt în jos).

ctx.stroke();
 Această linie de cod finalizează desenarea liniei prin trasarea liniei efective pe
canvas. Funcția stroke() desenează linia folosind stilul de desenare specificat anterior, cum ar fi
grosimea liniei și culoarea liniei.
}

Această funcție drawnLine(len) poate fi folosită pentru a desena o linie pe

canvas, iar lungimea liniei este specificată prin parametrul len . Această funcție poate fi utilizată în
cadrul desenării unui fractal pentru a desena ramurile acestuia. De exemplu, fiecare ramură a fractalului
poate fi desenată folosind această funcție, iar lungimea fiecărei ramuri poate fi specificată în funcție de
parametrul len .

function drawnBranchWithAngle(len, angle, depth)

Această linie definește funcția drawnBranchWithAngle și primește trei
parametri: len , angle și depth . Acești parametri sunt utilizați pentru a specifica lungimea
ramurii, unghiul de rotație și adâncimea fractalului.
{
ctx.save();
Această linie salvează starea curentă a contextului de desenare. Acest lucru este util
pentru a păstra setările și transformările curente ale contextului, astfel încât să poată fi restaurate mai
târziu.

ctx.rotate(angle);
Această linie de cod rotește contextul de desenare cu un anumit unghi specificat de
variabila angle . Aceasta înseamnă că orice desenare ulterioară va fi rotită conform acestui unghi.

branch(len * branchLength, depth + 1);

Această linie de cod apelează funcția branch() pentru a desena o altă ramură a
fractalului. Parametrul len * branchLength specifică lungimea ramurii, care este redusă în
funcție de branchLength . Parametrul depth + 1 specifică adâncimea fractalului și este crescut
cu 1 pentru a indica faptul că ne aflăm pe un nivel mai adânc al fractalului.

ctx.restore();
Această linie restaurează starea contextului de desenare la starea salvată anterior cu
ctx.save() . Acest lucru este util pentru a elimina orice modificări temporare efectuate asupra
contextului, astfel încât desenarea să continue într-o stare normală.
}
function branch(len, depth = 0)
Această linie definește funcția branch și primește doi parametri: len și depth . Parametrul len
specifică lungimea ramurii, iar parametrul opțional depth specifică adâncimea fractalului și are o
valoare implicită de 0.

{
drawnLine(len);
Această linie de cod apelează funcția drawnLine(len) pentru a desena o linie
cu lungimea specificată len . Aceasta reprezintă linia principală a unei ramuri în structura fractalului.
 if (len < 4 || depth > maxDepth) {
return;
}
Această linie verifică dacă lungimea ramurii este mai mică decât 4 sau dacă
adâncimea fractalului depășește maxDepth . În aceste cazuri, nu mai sunt desenate subramuri și
funcția se oprește prin returnarea din această iterație recursivă.

ctx.translate(0, -len);
Această linie de cod translează contextul de desenare în sus cu o valoare egală cu
negativul lungimii ramurii. Acest lucru face ca următoarele desene să fie realizate mai sus, în
conformitate cu lungimea ramurii.

drawnBranchWithAngle(len, -rotateAngle, depth);

drawnBranchWithAngle(len, rotateAngle, depth);
Aceste două linii de cod apelează funcția drawnBranchWithAngle(len,
angle, depth) pentru a desena subramurile fractalului cu unghiuri de rotație opuse. Aceste apeluri
utilizează unghiuri de rotație negative și pozitive pentru a crea o ramură fractală bifurcată.

ctx.translate(0, len);
Această linie translează contextul de desenare în jos cu o valoare egală cu lungimea
ramurii. Acest lucru revine la poziția originală a contextului de desenare după desenarea subramurilor.
}

function drawTree()
{
ctx.clearRect(0, 0, canvas.width, canvas.height);
Această linie de cod șterge conținutul anterior al canvas-ului, ceea ce permite
redesenarea arborelui fractal fără a păstra desenele anterioare. Este important să ștergem canvas-ul
înainte de a redesena pentru a evita suprapunerile între desenele anterioare și cele actuale.

ctx.save();
Această linie salvează starea curentă a contextului de desenare. Acest lucru este util
pentru a păstra setările și transformările curente ale contextului, astfel încât să poată fi restaurate mai
târziu.

ctx.translate(canvas.width / 2, canvas.height);
Această linie translează contextul de desenare către centrul canvas-ului. Aceasta
plasează originea sistemului de coordonate în partea de jos a canvas-ului și în centrul orizontal, ceea ce
face ca arborele fractal să fie desenat în centrul canvas-ului.

branch(lengthOfTheLine);
Această linie de cod apelează funcția branch(lengthOfTheLine) pentru a
desena ramura principală a arborelui fractal. Lungimea ramurii este specificată de variabila
lengthOfTheLine , care reprezintă lungimea inițială a arborelui.

ctx.restore();
 Această linie restaurează starea contextului de desenare la starea salvată anterior cu
ctx.save() . Acest lucru este util pentru a elimina orice modificări temporare efectuate asupra
contextului, astfel încât desenarea să continue într-o stare normală.
}

Această funcție drawTree() este utilizată pentru a inițializa desenarea arborelui

fractal pe canvas și poate fi apelată în cadrul interacțiunilor cu utilizatorul sau în alte funcții pentru a
desena arborele fractal pe canvas. Ea asigură că arborele fractal este desenat corect în centrul canvas-
ului și că desenul este curățat înainte de fiecare desenare pentru a asigura o afișare corespunzătoare.

Triunghiul lui Sierpinski

Este structurat pe 2 părți principale din punct de vedere functional , main.js & sierpinski.js

SIERPINSKI.JS
var width = 600;
var height = 600;
var size = 500;
Dimensiunea canvas-ului

Funcția sierpinski(Ax, Ay, Bx, By, Cx, Cy, d, ctx) este funcția recursivă care desenează triunghiul
Sierpinski.

• Parametrii Ax , Ay , Bx , By , Cx , Cy reprezintă coordonatele vârfurilor triunghiului.

• Parametrul d reprezintă adâncimea fractalului, adică numărul de iterații recursive.
• Parametrul ctx reprezintă contextul de desenare 2D al canvas-ului.

function sierpinski(Ax,Ay,Bx,By,Cx,Cy,d,ctx) {
 if(d>0) {
var pointAx = (Bx + Cx) / 2;
var pointAy = (By + Cy) / 2;

var pointBx = (Ax + Cx) / 2;

var pointBy = (Ay + Cy) / 2;

var pointCx = (Ax + Bx) / 2;

var pointCy = (Ay + By) / 2;

sierpinski(Ax,Ay,pointBx,pointBy,pointCx,pointCy,d-1,ctx);
sierpinski(pointCx,pointCy,pointAx,pointAy,Bx,By,d-1,ctx);
sierpinski(pointBx,pointBy,pointAx,pointAy,Cx,Cy,d-1,ctx);
}
else {
ctx.moveTo(Ax,Ay);
ctx.lineTo(Bx,By);
ctx.lineTo(Cx,Cy);
ctx.lineTo(Ax,Ay);
}
}
Funcția împarte triunghiul în trei subtriunghiuri și apoi apelează recursiv funcția
sierpinski pentru fiecare subtriunghi, reducând adâncimea fractalului cu 1 în fiecare iterație.

Când adâncimea fractalului devine 0 (adica d <= 0 ), funcția desenează triunghiul folosind
metoda lineTo() a contextului 2D pentru a conecta vârfurile triunghiului.

Pe măsură ce se desfășoară iterațiile recursive, triunghiul este împărțit în subtriunghiuri mai

mici și mai mici, creând astfel efectul fractal Sierpinski.

function drawTriangle(depth,ctx)
Această linie definește funcția drawTriangle() care primește doi parametri:
depth , care reprezintă adâncimea fractalului, și ctx , care reprezintă contextul de desenare 2D al
canvas-ului.
{
var midPointX = width/2;
var midPointY = height/2;
Aceste două linii de cod calculează coordonatele punctului median al canvas-ului,
care este folosit pentru a plasa triunghiul în centrul canvas-ului.

var ri = (size/6) * Math.sqrt(3);

var ru = (size/3) * Math.sqrt(3);
Aceste două linii de cod calculează distanțele de la vârfurile triunghiului la baza sa,
pe baza dimensiunilor specificate ale triunghiului.

var pointAx = midPointX-(size/2);

 var pointAy = midPointY+ri;

var pointBx = midPointX+(size/2);

var pointBy = midPointY+ri;

var pointCx = midPointX;

var pointCy = midPointY-ru;
Aceste linii de cod calculează coordonatele vârfurilor triunghiului, pe baza
dimensiunilor și a coordonatelor punctului median calculate anterior.

sierpinski(pointAx,pointAy,pointBx,pointBy,pointCx,pointCy,depth,ctx);
Această linie apelează funcția sierpinski() pentru a desena triunghiul
Sierpinski pe canvas, folosind coordonatele vârfurilor calculate anterior și adâncimea specificată a
fractalului.
}

Această funcție drawTriangle() este utilizată pentru a inițializa desenarea

triunghiului Sierpinski pe canvas-ul specificat, folosind dimensiunile și adâncimea specificate. Ea
calculează coordonatele vârfurilor triunghiului și apelează apoi funcția sierpinski() pentru a
desena fractalul în interiorul triunghiului.

MAIN.JS

var canvas = document.getElementById("sierpinskiCanvas");

Această linie obține referința către elementul HTML cu id-ul "sierpinskiCanvas",
care este canvas-ul pe care va fi desenat triunghiul Sierpinski. Variabila canvas va conține o referință
către acest element.

var ctx = canvas.getContext("2d");

Această linie obține contextul de desenare 2D al canvas-ului. Este necesar să
obținem acest context pentru a putea desena elemente grafice pe canvas.

var fillColor = document.getElementById("myColor").value;

Această linie obține valoarea de culoare selectată de utilizator dintr-un element
HTML cu id-ul "myColor". Aceasta va fi culoarea cu care va fi umplut triunghiul Sierpinski.

var depth;
Această linie definește o variabilă depth , care va fi utilizată pentru a reține
adâncimea fractalului, adică numărul de iterații recursive. Această variabilă va fi inițializată ulterior în
cod, probabil în funcție de introducerea utilizatorului sau de alte valori implicite.

updateConfiguration();
Actualizarea adâncimii fractalului (depth) pe baza datelor introduse de utilizator sau altor condiții
specificate.

function updateConfiguration(){
var slider = document.getElementById("myRange");
 Această linie obține referința către elementul HTML de tip slider cu id-ul
"myRange". Acest slider este probabil folosit pentru a permite utilizatorului să aleagă adâncimea
fractalului.

depth = slider.value;
Această linie actualizează variabila depth cu valoarea curentă a slider-ului, adică
valoarea aleasă de utilizator pentru adâncimea fractalului.

document.getElementById("rangeText").innerHTML = depth; // Display the default slider

value
Această linie actualizează conținutul unui element HTML cu id-ul "rangeText"
pentru a afișa valoarea curentă a adâncimii fractalului. Acest lucru oferă utilizatorului o modalitate
vizuală de a vedea ce adâncime a fractalului a fost aleasă.
drawSierpinski(depth);
Această linie apelează funcția drawSierpinski(depth) pentru a desena triunghiul
Sierpinski cu adâncimea specificată de utilizator. Acest lucru va actualiza desenul fractalului în
conformitate cu noua adâncime aleasă de utilizator.
}

Design-ul site-ului :

Design-ul site-ului este aspectul estetic și funcțional al unui site web. Acesta
include tot ce vedeți atunci când accesați un site web, cum ar fi fonturile, culorile,
layout-ul și elementele grafice. Un design bine realizat poate face o diferență
semnificativă în a face un site web atractiv și ușor de utilizat.

Site-ul web este creat utilizând mai multe tehnologii, dar cele două principale sunt
HTML și CSS. HTML (HyperText Markup Language) este utilizat pentru a structura
conținutul unui site web, precum textul, imaginile și hyperlink-urile. CSS (Cascading
Style Sheets) este folosit pentru a defini aspectul site-ului, cum ar fi culorile și fonturile.

Design-ul site-ului este intuitiv și ușor de utilizat, astfel încât vizitatorii să poată
găsi ușor informațiile de care au nevoie. Elementele grafice, cum ar fi imagini, iconițe și
fundaluri, pot ajuta la transmiterea mesajului și a personalității brand-ului.

În general, design-ul site-ului meu web este :

-Simplu și coerent
-Ușor de utilizat și navigat
-Îmbunătățit de elemente grafice relevante și atractive
- Adaptabil la diferite dispozitive și dimensiuni ale ecranului (responsive design)
 Bibliografie:
1.https://ro.wikipedia.org/wiki/Fractal
2.https://math.fandom.com/ro/wiki/Fractal
3.https://github.com/