JavaScript izmantošana zīmēšanai
Ar valodas JavaScript palīdzību var veidot dažādus animētus zīmējumus, kā arī spēles. Rakstīt kodu var arī parastajā teksta redaktorā, bet ērtāk un vieglāk izmantot speciālās vietnes, piemēram https://p5js.org/. Šī vietne ir JavaScript bibliotēka radošai kodēšanai, kuras mērķis ir padarīt kodēšanu pieejamu jebkuram cilvēkam - profesionālim vai iesācējam. Bibliotēka ir bezmaksas un ar atvērto kodu, jo tās izstrādātāji uzskata, ka programmatūrai un rīkiem programmēšanas apguvei jābūt pieejamiem ikvienam.
Lai pilnvērtīgāk izmantotu visas šīs vietnes priekšrocības, nepieciešams izveidot savu kontu. Tad Jūs varēsiet saglābāt visus savus projektus.
Izmantojot p5js redaktoru, Jūs uzreiz varēsiet sākt programmēt!
Vispirms ir jāizveido "zīmēšanas lapa" - elements canvas:
function setup() {
createCanvas(400, 400);
}
createCanvas(400, 400);
}
Īstenībā tā ir koordinātu plakne ar izmēru 400 uz 400 punktiem. Punkts ar koordinātēm (0, 0) atrodas augšējā kreisajā stūrī, bet (400, 400) - labajā apakšējā.
Zīmēšanai ir paredzēta funkcija draw:
function draw() {
}
}
Lai sagatavotu fonu zīmēšanai, pievienosim elementu background:
Piemērs:
function draw() {
background(250);
}
background(250);
}
Ko nozīmē cipars iekavās? 0 - melnā krāsa, 250 - baltā krāsa un visi cipari starp 0 un 250 - pelēkas krāsas toņi. Bet ja mēs gribam zilo fonu? Šajā gadījumā palīdzēs RGB kodi vai vienkārši krāsas nosaukumi. Piemēram, background (21, 52, 250); ir tās pats kā background("blue");
Figūru zīmēšana
Punkts. Lai uzzīmētu punktu, izmantosim elementu point un iekavās punkta koordinātes: point(30, 140);
Līnija. Lai uzzīmētu līniju, mums nepieciešami divu punktu koordinātes - sākuma punkta un beigas punkta.
line(50, 70, 50, 200);
Aplis. Lai uzzīmētu apli, pielietosim komandu ellipse(200, 100, 50, 50); - pirmie divi cipari iekavās definē apļa centru, 3. un 4. - platumu un augstumu (tātad ar šo komandu var uzzīmēt arī ovālu).
Kvadrāts. Kvadrātam ir līdzīgs pieraksts kā aplim (divi cipari definē centru, 3. un 4. cipars - platumu un augstumu), tikai jāņem vērā, ka kvadrātam centrs skaitās no stūra: rect(100, 300, 60, 60);
Trīsstūris. lai uzzīmētu trīsstūri, ir jādefinē visas trīs virsotnes. Tātad iekavās mums būs 6 cipari: triangle(200,150, 0, 250, 360, 300);
Visas šīs figūras mēs varam dekorēt, noformēt. Bet svarīgi atcerēties, ka ja mēs jau vienu reizi definējam kādu krāsu, šī krāsa tiks izmantotā arī turpmāk. Tāpēc pirms katras figūras vispirms rakstām kā tā izskatīsies.
fill("black"); - aizpilda figūru ar krāsu (šajā gadījumā ar melno);
stroke("pink"); - piešķir krāsaino kontūru, apmali;
strokeWeight(7); - maina līnijas biezumu (jo lielāks cipars iekavās, jo biezāka līnija);
strokeWeight(7); - maina līnijas biezumu (jo lielāks cipars iekavās, jo biezāka līnija);
noStroke(); - bez apmales.
Kad Jūsu zīmējums ir gatavs, tas ir jāsaglabā - sadaļā File izvēlēties Saglabāt (Save). Tagad varam ievietot savu projektu mājas lapā. Tepat sadaļā File izvēlējamies Share (Dalīties):
Embed - nokopējot šo saiti, pievienojiet savas lapai.