UNIVERSITATEA TEHNICĂ A MOLDOVEI

FACULTATEA CALCULATOARE, INFORMATICA, MICROELECTRONICA

GRAFICA PE CALCULATOR

Lucrare de laborator 1
Varianta 3

2022

A realizat: Darwin
A controlat :

Chişinău 2022
 Lucrarea de laborator 1

Tema: Studierea primitivelor grafice vectoriale

Scopul lucrării: Obținerea cunoștințelor practice în sinteza scenelor grafice vectoriale

2D, utilizând primitivele grafice simple SVG.

Sarcina lucrării:

1. Elaborați un program pentru sinteza unei scene 2D statice utilizînd elementele

grafice necesare cum ar fi: <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>,
<path>, împreună cu atributele corespunzătoare, scena trebuie să conțină un element <text>
plasat în colțul dreapta jos a ecranului care ar indica numele, prenumele și grupa studentului.

function setup() {
createCanvas(800, 600);
}

function draw() {
// Adăugăm fundalul scenei
background(220);

// Desenăm primul personaj animat

stroke(0);
fill(255, 0, 0);
ellipse(200, 300, 150, 200); // cap
fill(0, 255, 0);
rect(150, 350, 100, 200); // corp

// Adăugăm mâinile
fill(255, 0, 0);
rect(75, 350, 75, 20); // mâna stângă
rect(225, 350, 75, 20); // mâna dreaptă
ellipse(200, 300, 150, 200);
// Adăugăm picioarele
fill(0, 0, 255);
rect(150, 550, 25, 75); // picior stâng
rect(225, 550, 25, 75); // picior drept

// Adăugăm detalii la față

fill(0);
ellipse(170, 300, 15, 20); // ochi stâng
ellipse(230, 300, 15, 20); // ochi drept
strokeWeight(2);
line(170, 320, 230, 320); // gură
noFill();
strokeWeight(1);
arc(200, 310, 30, 30, 0, PI); // arc deasupra gurii

// Desenăm al doilea personaj animat

stroke(0);
fill(0, 255, 0);
ellipse(650, 300, 300, 150); // cap
fill(255, 0, 0);
rect(550, 350, 200, 100); // corp

// Adăugăm mâinile
fill(255, 0, 0);
rect(525, 300, 20, 75); // mâna stângă
rect(725, 300, 20, 75); // mâna dreaptă

// Adăugăm picioarele
fill(0, 0, 255);
rect(575, 450, 150, 25); // picior stâng
rect(575, 450, 75, 25); // picior drept

// Adăugăm detalii la față

fill(0);
ellipse(560, 290, 20, 15); // ochi stâng
ellipse(640, 290, 20, 15); // ochi drept
line(170, 320, 230, 320); // gură
noFill();
strokeWeight(1);
arc(600, 310, 30, 30, 0, PI); // arc deasupra gurii

// Adăugăm detalii la mâini

stroke(0);
fill(255, 0, 0);
ellipse(540, 365, 30, 30); // palma stângă
ellipse(760, 365, 30, 30); // palma dreaptă
fill(0, 255, 0);
rect(675, 475, 40, 100); // antebraț stâng
rect(585, 475, 40, 100); // antebraț drept
fill(255, 0, 0);
ellipse(695, 525, 30, 30); // mână stângă
ellipse(605, 525, 30, 30); // mână dreaptă

// Adăugăm textul cu numele, prenumele și grupa studentului

textSize(20);
textAlign(RIGHT, BOTTOM);
text("Nume Prenume, Grupa XXXX", width - 10, height - 10);
// munte
fill(100, 50, 0);
stroke(500, 50, 0);
beginShape();
vertex(0, height);
vertex(350, 290);
vertex(10, height);
endShape(CLOSE);

// iarbă
fill(5, 200, 5);
stroke(5, 5, 5);
rect(0, 570, width, height);

// soare
fill(255, 255, 0);
noStroke();
ellipse(width * 0.75, height * 0.25, 150);

// raze soare
stroke(255, 255, 0);
strokeWeight(3);
noFill();
beginShape();
vertex(width * 0.75, height * 0.25);
vertex(width * 0.80, height * 0.35);
vertex(width * 0.95, height * 0.30);
endShape();

beginShape();
vertex(width * 0.75, height * 0.25);
vertex(width * 0.70, height * 0.35);
vertex(width * 0.55, height * 0.30);
endShape();

beginShape();
vertex(width * 0.75, height * 0.25);
vertex(width * 0.70, height * 0.15);
vertex(width * 0.55, height * 0.20);
endShape();

beginShape();
vertex(width * 0.75, height * 0.25);
vertex(width * 0.80, height * 0.15);
vertex(width * 0.95, height * 0.20);
endShape();

// nori
 noStroke();
fill(255);
beginShape();
vertex(50, 50);
bezierVertex(20, 20, 80, 20, 80, 50);
bezierVertex(70, 30, 50, 80, 50, 50);
endShape();

beginShape();
vertex(250, 100);
bezierVertex(250, 70, 280, 70, 280, 100);
bezierVertex(280, 130, 250, 130, 250, 100);
endShape();

beginShape();
vertex(150, 200);
bezierVertex(150, 170, 180, 170, 180, 200);
bezierVertex(110, 230, 150, 230, 150, 200);
endShape();

}
 2. Elaborați un program care crează versiunea vectorială a personajul desenat în
lucrarea de laborator nr.1. Variantele sunt indicate în tabelul 1.2. E permis de realizat în editor
grafic vectorial.

Am schimbat toate primitivele simple cu functii vectoriale pentru a reprezenta vectorial

desenul nostru, plus la asta, pentru a demonstra ca e un desen vectorial, am adaugat o
animatie coamei de a se roti in jurul capului:

let coamaX = 200;

let coamaY = 230;
let speedX = 2;
let speedY = 2;

function setup() {
createCanvas(400, 400);
}

function draw() {
background(255);

// Coama
noStroke();
fill('#680808');

beginShape();
vertex(coamaX, coamaY);
arc(coamaX, coamaY, 355, 400, -PI/4, PI/4, PIE);
vertex(coamaX, coamaY);
arc(coamaX, coamaY, 355, 400, PI/4, 3*PI/4, PIE);
vertex(coamaX, coamaY);
arc(coamaX, coamaY, 355, 400, 3*PI/4, 5*PI/4, PIE);
vertex(coamaX, coamaY);
arc(coamaX, coamaY, 355, 400, -3*PI/4, -PI/4, PIE);
endShape(CLOSE);

// Urechile
noStroke();
fill('#FCD116');
ellipse(170, 160, 50, 50);
ellipse(230, 160, 50, 50);
fill('#AD0F0F');
ellipse(170, 160, 40, 40);
ellipse(230, 160, 40, 40);

// Triunghiul galben cu contur negru

 stroke('#000000');
strokeWeight(2);
fill('#FCD116');
beginShape();
vertex(200, 140);
vertex(100, 300);
vertex(300, 300);
endShape(CLOSE);

// Ochii
fill('#000000');
ellipse(185, 190, 15, 15);
ellipse(210, 190, 15, 15);

// boticul
fill('#000000');
ellipse(200, 231, 35, 15);

// gura
noFill();
stroke('#000000');
strokeWeight(3);
arc(200, 245, 50, 30, 0.2, PI - 0.2);

// mustati
strokeWeight(2);
line(200, 250, 120, 200);
line(200, 250, 150, 200);
line(200, 250, 300, 195);
bezier(220, 230, 240, 215, 240, 215, 220, 230);
bezier(150, 220, 160, 215, 160, 215, 160, 230);
bezier(260, 225, 240, 215, 240, 215, 260, 230);

// linia dintre gura si nas

line(200, 225, 200, 260);

// animatii pentru coama

coamaX += speedX;
coamaY += speedY;

if (coamaX > width - 127.5 || coamaX < 127.5) {

speedX = -speedX;
}

if (coamaY > height - 150 || coamaY < 150) {

speedY = -speedY;
}
}