stahovskis.id.lv

Tēma

p5.js: Teorija ​

Kas ir p5.js? ​

p5.js ir JavaScript bibliotēka, kas domāta skiču veidošanai un ir piemērota animētu, interaktīvu zīmējumu izveidei, kas paredzēti ieveitošanai mājas lapā.

Kāpēc izmantot p5.js? ​

p5.js ir lieliska iespēja attīstīt algoritmiskās domāšanas prasmes, kas ir svarīgas gan programmēšanā, gan matemātikā. Šī bibliotēka ļauj ne tikai izveidot vizuāli pievilcīgus interaktīvus zīmējumus, bet arī palīdz labāk saprast un pielietot tādas matemātikas tēmas kā lineārie vienādojumi un koordinātu plakne.

Labas prākses piemērs

Sagatavošanās darbam ​

1. solis - Failu struktūras izveide ​

Lai sāktu darbu ar bibliotēku p5.js, nepieciešams izveidot divus failus: index.html un script.js.

├─ mape-ar-uzdevumu
|	├─ index.html
|	└─ script.js

2. solis - HTML un JavaScript failu pamata struktūra ​

html
<html>
	<head>
		<!-- Bibliotēkas pieslēgšana -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/p5.js"></script>
	</head>
	<body>
		<!-- Ārējā script.js faila pieslēgšana -->
		<script src="script.js"></script>
	</body>
</html>
javascript
//Canva - zīmēšanas laukums
function setup() {
	// zīmēšanas laukuma izmērs
	// (x, y);
	createCanvas(400, 400);
}
//Zīmēšana notiek ciklā
function draw() {
	//fona krāsa
	background(220);
	//Biezums
	strokeWeight(10);
	//kontūras līnijas krāsa
	stroke('black');
}

Teorija ​

Objektu izvietojums ​

🚧 Svarigi!

Zīmēšana tiek īstenota koordinātu plaknē.



Apraksts

Kodu secība un paskaidrojums ​

  • Tas tiek rakstīts vienu reizi .js dokumenta sākumā. Lauka lielums (x, y).
script.js
javascript
function setup() {
	//(x, y);
	createCanvas(400, 400);
}
  • Fona krāsa tiek uzrakstīta vienu reizi;
  • Biezums ir rakstīts vienu reizi;
  • kontūras līnijas krāsu var ierakstīt vienu reizi, un tā vienmēr būs vienāda, vai katras jaunas formas sākumā;
  • aizpildījuma krāsa ir rakstīta tikai formām line, ellipse, triangle u.c.
script.js
javascript
function draw() {
	//fona krāsa
	background(220);
	//Biezums
	strokeWeight(10);
	//kontūras līnijas krāsa
	stroke('black');
	//aizpildījuma krāsa
	fill('red');
	// x1, y1
	point(50, 50);
}

Krāsu izmantošana p5.js ​

Krāsas ir svarīga daļa no jebkura vizuālā projekta, un p5.js piedāvā vairākas iespējas, kā tās izmantot savos zīmējumos. Šeit ir pamati, kas palīdzēs jums izprast, kā mainīt un pielāgot krāsas.
Krāsu definēšana:
p5.js ļauj izmantot vairākus veidus, kā norādīt krāsas:

  1. Krāsa ar nosaukumu:
script.js
javascript
fill('red'); // Uzstāda krāsu sarkanai

Tas darbojas, ja izmantojam krāsas nosaukumu (piemēram, 'red', 'green', 'blue' u.c.).

  1. RGB formāts: Krāsu var norādīt, izmantojot trīs vērtības (sarkano, zaļo un zilo kanālu):
script.js
javascript
fill(255, 0, 0); // Sarkana

Katrs skaitlis var būt no 0 līdz 255. Šeit:

  • 255 ir maksimālā vērtība (pilns spilgtums),
  • 0 nozīmē, ka attiecīgais kanāls netiek izmantots.
  1. Hex formāts: Krāsu var norādīt arī ar 16-stīgu (hexadecimal) kodu:
script.js
javascript
fill('#FF0000'); // Sarkana

Šajā gadījumā '#FF0000' ir hex krāsas kods sarkanai krāsai.

Krāsu izvēle tiešsaistē:

Lai vieglāk izvēlētos krāsas, varat izmantot HTML krāsu kodu ģeneratoru. Šī lapa ļauj izvēlēties krāsu, redzēt tās hex kodu un izmantot to jūsu p5.js projektos.

HTML krāsu kodu ģeneratoru

https://htmlcolorcodes.com/

Pamatfigūras ​

point(x, y); ​

script.js
javascript
//Biezums
strokeWeight(10);
//kontūras līnijas krāsa
stroke('red');
// x1, y1
point(50,50);

line(x1, y1, x2, y2); ​

script.js
javascript
//Biezums
strokeWeight(10);
// kontūras līnijas krāsa
stroke('red');
// x1, y1, x2, y2
line(100, 100, 200, 200);

rect(x, y, w, h); ​

script.js
javascript
//Biezums
strokeWeight(10);
// kontūras līnijas krāsa
stroke('black');
//aizpildījuma krāsa
fill('red');
// x1, y1, x2, y2
rect(150, 100, 50, 200);

ellipse(x, y, w, h); ​

script.js
javascript
//Biezums
strokeWeight(10);		
// kontūras līnijas krāsa
stroke('black');
//aizpildījuma krāsa
fill('red');
// x1, y1, x2, y2
ellipse(150, 150, 100, 100);

triangle(x1, y1, x2, y2, x3, y3); ​

script.js
javascript
//Biezums
strokeWeight(10);
// kontūras līnijas krāsa
stroke('black');
//aizpildījuma krāsa
fill('red');
// x1, y1, x2, y2
triangle(200, 50, 50, 300, 325, 300);

Noderīgi materiāli ​

p5.js: Mājaslapa

https://p5js.org/