Ministerul Educației și Cercetării al Republicii Moldova

Universitatea Tehnică a Moldovei

Facultatea Calculatoare, Informatică şi Microelectronică
Departamentul Informatică şi Ingineria Sistemelor

RAPORT
Lucrare de laborator nr.1
la cursul „Grafica la calculator”
Varianta:12

A efectuat : st. gr. CR-213 Tabureanu Marian

A verificat: asis. univ. Toma Olga

Chișinău 2021
 INTRODUCERE

Domeniul de studiu al acestei lucrări este Creare unui program simplu în P5.js
P5.js este o bibliotecă scrisă în limbajul de programare JavaScript, utilizată
pentru crearea și vizualizarea imaginilor interactive cu ajutorul primitivelor grafice
simple. P5.js permite crearea graficii pe calculator folosind un limbaj de programare.
Aceasta permite integrarea simplă a codurilor scrise în pagini web prin adăugarea
codului scris întru-un document HTML.
Creare unui program simplu în P5.js
Înainte de a începe crearea programelor proprii trebuie să știm că orice figură
creată în mediul p5.js este legată de sistemul de coordonate, originea sistemului de
coordonate în orice program este colțul dis stânga sus al ecranului. Axa verticală se
numește axa Y, iar cea orizontală axa X. Creșterea valorilor pentru coordonatele x și y
sunt prezentate în figura 2.

Figura 1.2. Sistemul de coordonate în mediul p5.js

Pentru crearea unui program simplu în p5.js trebuie să utilizăm următorul
șablon:
function setup(){
createCanvas(400,400);
}
function draw(){
background(220);}

Scopul lucrării este obținerea cunoștințelor practice în sinteza scenelor grafice

2D statice, utilizând primitivele grafice simple a bibliotecii p5.js.

1
Sarcina lucrării:

Elaborați un program care creează personajul conform variantei indicate de profesor.

Variantele sunt indicate în tabelul 1.2.

Codul programului:
function setup() {
createCanvas(400, 400);
}

function draw() {
background(220);

//Corpul
strokeWeight(3);
fill(50,180,200);
rect (100,100,200,200);

//Antene
fill(50,180,200);
quad(130,60,170,50,190,100,170,100);
quad(220,30,260,40,220,100,200,100);

//Ochii

2
 strokeWeight(2.5);
fill('white');
circle(170,195,30);
circle(230,190,30);
fill('black');
circle(175,195,7);
circle(225,190,7);

//Sprancene
strokeWeight(2.5);
fill(200,70,30);
quad(120,140,190,174,186,184,118,160);
quad(280,140,276,160,210,176,208,167);

//Plisc
strokeWeight(2.5);
fill(350,50,20);
triangle(160,230,195,200,280,220);
triangle(160,230,260,222,210,260);

//Coada
strokeWeight(3);
fill(50,180,200);
quad(100,170,100,190,35,175,39,145);
quad(100,202,100,220,50,225,47,195);
}

3
Rezultatul realizării programului:

Concluzie

În cadrul laboratorului respectiv s-a lucrat cu primitivele grafice simple în biblioteca scrisă
P5.js.
Pentru realizarea sarcinii propuse a fost nevoie sa cunoaștem și să folosim primitivele grafice
simple,să modificăm atributele de afișare a primitivelor grafice.
Concluzionez că lucrul în cadrul laboratorului a fost unul eficient și interesant.