Brauzerda JavaScript-da nuqta chizishni o'rganamiz.. bu texnik jihatdan qiyin emas, faqat chalg'itadiganlar uchun va Internetda nuqta chizishga tayyor bo'lmaganlar uchun - bu, albatta, butun yutuq.
Nuqtani chizishning ko'plab usullari mavjud, keling, ularni ko'rib chiqaylik
Unity/Godot/microStudio yoki minglab o'yin quruvchilardan foydalanish.. Ularning barchasi u yoki bu tarzda JavaScript yoki Webassembly kodini yaratadi va baribir bizga fikrni ko'rsatadi.Bizni bu yo'l qiziqtirmaydi.biz haqiqatan ham nima bo'layotganini tushunolmaymiz, kodni boshqarish manba kodida minimal va o'qib bo'lmaydigan bo'ladi, bundan tashqari u juda katta.
Jedining bu yo'li bizga imkon qadar yaqin, chunki.bizning kodimiz kun kabi katta va ravshan bo'lmaydi, biz ko'p mavhum bo'lmaymiz, kutubxonalar bilan kodimizni juda ko'paytirmaymiz.Kod nazorati ham ajoyib bo'lar edi
Bu, albatta, Jedining yo'li.Kod imkon qadar murakkab, narsalarni maksimal darajada boshqarish, go'yo nazorat qilish kerak emas.Manba kodlari eng minimal va golimy JavaScript bilimi bilan, biz faqat xavfsiz ish olish uchun borish mumkin, chunki.bizga shunday insonlar kerak.
Ammo bizning vazifamiz ish topish emas, balki oddiy va oson yo'l bilan nuqta chizishdir.Bizning vektorimiz tezlik va moslashuvchanlikdir.
Men kutubxonani tanladim
p5js nuqta chizish.Bu shunchaki emas, albatta, agar vazifa nuqtani chizish bo'lsa va tamom bo'lsa, albatta, hamma narsa yalang'och JavaScript-da bajarilishi kerak edi, lekin men buni istiqbolda qilyapman, .k.keyin siz va men ajoyib ko'rinadigan boshqa narsalarni qilamiz va buning uchun bizga yaxshi vosita kerak.Ulardan biri p5js.Golim JavaScript-da biz ishga tushirish va qayta chizish funktsiyalarini aniqlash uchun tuval yaratishimiz kerak, p5 da bu ham amalga oshiriladi, lekin juda ixcham.
Lekin birinchi..
JavaScript-ni ishlab chiqish uchun minimal muhitni sozlash
Yuklab olish
p5.min.js va uni yonma-yon saqlang.mana bunday
index.html
<html>
<head>
<script src="p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body style="margin: 0px;">
<main>
</main>
</body>
</html>
sketch.js
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
}
function draw() {
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
}
Natijada brauzeringiz shu tarzda ochiladi
Xo'sh, HTML tushunarli, lekin bu qanday JavaScript kodi?
o'rnatish funktsiyasi - ishga tushirish, u bir marta bajariladi, unda biz tuval yaratamiz, ya'ni.nuqta chizadigan maydon.window.innerWidth, window.innerHeight
ekranning kengligi va balandligi, ya'ni.biz to'liq ekranli tuvalni belgilaymiz va ha, HTML buning uchun juda muhim uslubga ega
<body style="margin: 0px;">
Boshqa hech narsani ishga tushirishimiz shart emas, faqat nuqta chizishimiz kerak.Bu erda printsipga qarang .. chizish funksiyasi bajariladi, masalan, soniyada 60 marta va soniyada 60 marta biz nuqtani chizamiz .. bu ahmoqona tuyuladi, biz shunchaki nuqta chizishimiz kerak va bu u, lekin kelajakda u umumiy barcha animatsiya uchun asos bo'ladi.
Umuman olganda, nuqta chizish uchun kod juda oddiy:
point(10,10)
va tamom !
Biroq, bizning kodimiz biroz kattaroqdir
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
fon qora
oq yulduz
nuqta qalinligi 10
va biz uni vertikal va gorizontalning markazida chizamiz.
Xo'sh.. biz tuvalga nuqta chizdik, hamma narsa bo'lishi kerak edi, lekin biz uni hech qanday JavaScriptsiz sof HTMLda ham chizishimiz mumkin edi.. U qanday ko'rinishda bo'lar edi?
Bu uni oddiy va hatto osonlashtiradi, lekin printsiplar butunlay boshqacha, bu erda ekranning markazida kvadrat chizish uchun yakuniy kod
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color: black;">
<div style="position: fixed; top: 50%; left: 50%; background-color: white; width: 10px; height: 10px;"></div>
</body>
</html>
Natija deyarli bir xil
Ha, HTMLda markazda biror narsani chizish juda oson, lekin animatsiyalarni qo'shish va undan ham ko'proq aqlli interaktiv bo'lish uchun siz CSS tamoyillari bo'yicha o'ylashingiz kerak bo'ladi.Bu juda qiziqarli vazifa bo'lsa-da.Bularning barchasini faqat bitta elementar narsa o'ldiradi, CSS-da tasodifiy raqamlar yo'q, bu kelajakda bizning barcha urinishlarimizni o'ldiradi, shuning uchun men bu yo'nalishga kamroq ustunlik beraman.
Agar yalang'och CSS-da yulduzli osmonni yaratmoqchi ekanligimni tasavvur qilsam, men uchun hamma narsa ishlamaydi, chunkiyulduzlar tasodifiy joylarda paydo bo'lishi kerak va agar ular oldindan yaratilgan koordinatalarga ega bo'lsa, bu unchalik chiroyli va oddiy bo'lmaydi, chunki siz CSS-da tasodifiy sonlar generatorini yozishingiz mumkin, ammo bunday kod butunlay xunuk, o'qib bo'lmaydigan va qiyin ko'rinadi. tushunmoq!