ເນື້ອຫາ
- ເປັນຫຍັງໃຊ້ຂໍ້ມູນເພື່ອຂັບເຄື່ອນພາບເຄື່ອນໄຫວ?
- ການເບິ່ງເຫັນຂໍ້ມູນກັບຂໍ້ມູນທີ່ຜັກດັນ
- ພວກເຮົາຈະເຮັດຫຍັງ?
- ເຮົາຈະຮຽນຫຍັງ?
- ເອກະສານຢູ່ໃສ?
- 01. ເລີ່ມຕົ້ນແຕ້ມຮູບ ໃໝ່
- 02. ສ້າງ sketch ຄັ້ງ ທຳ ອິດໂດຍໃຊ້ຂໍ້ມູນສຽງ
- 03. ນຳ ໃຊ້ຂໍ້ມູນທາງສຽງເປັນແປງສີ
- 05. ສຳ ເລັດຮູບແຕ້ມຂອງທ່ານ
- ຊັ້ນຮຽນ RadialArc {}:
- ຊັ້ນຮຽນ RadialArcs {}:
- 06. ເອົາໄປຕື່ມ
p5.js ແມ່ນການປະຕິບັດ JavaScript ໃໝ່ ຫຼ້າສຸດຂອງສະພາບແວດລ້ອມການສ້າງລະຫັດການສ້າງສັນຂອງ desktop ທີ່ມີຊື່ສຽງ. ມັນໃຊ້ພະລັງງານແລະຄວາມສະດວກໃນການໃຊ້ງານປະມວນຜົນຫຼາຍແລະໃສ່ໃນ browser ຂອງທ່ານ. ມັນຊ່ວຍໃຫ້ທ່ານແຕ້ມໃນຜ້າໃບແຕ່ຍັງປະສົມປະສານກັບ ໜ້າ ເວັບຂອງທ່ານ, ຊ່ວຍໃຫ້ 'ຮູບແຕ້ມ' ຂອງທ່ານຕອບສະ ໜອງ ແລະ ໝູນ ໃຊ້ກັບ DOM.
p5.js ເອົາຄວາມເຈັບຫົວຂອງພາບເຄື່ອນໄຫວແລະການເບິ່ງເຫັນຂໍ້ມູນໃນເວັບແລະເຮັດໃຫ້ມັນລຽບງ່າຍທີ່ຈະລຸກແລະແລ່ນດ້ວຍພາບເຄື່ອນໄຫວໂດຍໃຊ້ສອງ ໜ້າ ທີ່ງ່າຍໆຄື: ຕັ້ງຄ່າ() ແລະ ແຕ້ມ ().
ແຕ່ຢ່າຄິດວ່າຄວາມລຽບງ່າຍນີ້ແມ່ນຂີດ ຈຳ ກັດ, ຍ້ອນວ່າທ່ານສາມາດປະມວນຜົນທາງໄກໂດຍການສ້າງ ໜ້າ ທີ່ຂອງທ່ານເອງແລະຂະຫຍາຍມັນດ້ວຍຫໍສະມຸດທີ່ສ້າງຂື້ນໂດຍຊຸມຊົນ.
ສຳ ລັບເຄື່ອງມືອອກແບບແລະ ຄຳ ແນະ ນຳ ກ່ຽວກັບເວບໄຊທ໌ຫລາຍຂື້ນ, ໃຫ້ເບິ່ງລາຍຊື່ຜູ້ໃຫ້ບໍລິການເວບໄຊທ໌ທີ່ດີເລີດຂອງພວກເຮົາແລະໃຫ້ແນ່ໃຈວ່າທ່ານເລືອກຜູ້ສ້າງເວບໄຊທ໌ທີ່ດີເລີດແລະເກັບຮັກສາຟັງ.
- 6 ວິທີໃນການເຂົ້າລະຫັດສ້າງສັນ
ເປັນຫຍັງໃຊ້ຂໍ້ມູນເພື່ອຂັບເຄື່ອນພາບເຄື່ອນໄຫວ?
ການສ້າງລະບົບ 'ການອອກແບບແລະພາບເຄື່ອນໄຫວ' ໝາຍ ເຖິງການ ກຳ ນົດກົດ, ຕົວ ກຳ ນົດແລະຂອບເຂດທີ່ມີຕົວປ່ຽນແປງເຊິ່ງທ່ານສາມາດໃຫ້ຂໍ້ມູນແຕກຕ່າງກັນ. ຄວາມສາມາດໃນການຫລິ້ນກັບພາລາມິເຕີຂອງລະບົບແລະການປ້ອນຂໍ້ມູນທີ່ແຕກຕ່າງກັນ ໝາຍ ຄວາມວ່າທ່ານສາມາດສ້າງການປ່ຽນແປງຂອງຜົນຜະລິດທີ່ບໍ່ມີຂອບເຂດພ້ອມດ້ວຍຄວາມສອດຄ່ອງຂອງວິທີການທີ່ເປັນລະບົບ.
ຂໍ້ມູນທີ່ແຕກຕ່າງກັນສາມາດສ້າງຜົນໄດ້ຮັບດ້ານການເບິ່ງເຫັນທີ່ມີຄວາມຫຼາກຫຼາຍແລະເປັນແຫຼ່ງທີ່ດີຂອງການເຄື່ອນໄຫວທີ່ວ່ອງໄວ, ຂໍ້ມູນທີ່ມີໂຄງສ້າງແມ່ນສຽງ. ນັ້ນແມ່ນສິ່ງທີ່ພວກເຮົາຈະໃຊ້ໃນພາບເຄື່ອນໄຫວຂອງພວກເຮົາ.
ການເບິ່ງເຫັນຂໍ້ມູນກັບຂໍ້ມູນທີ່ຜັກດັນ
ພາບເຄື່ອນໄຫວທີ່ໃຊ້ຂໍ້ມູນແມ່ນການເບິ່ງເຫັນຂໍ້ມູນບໍ? ແມ່ນແລະບໍ່ແມ່ນ. ພາບເຄື່ອນໄຫວຂອງທ່ານຈະເປັນຕົວແທນການເບິ່ງເຫັນຂອງຂໍ້ມູນຄືກັນກັບການເບິ່ງພາບແຕ່ຈຸດປະສົງແມ່ນແຕກຕ່າງກັບພາບເຄື່ອນໄຫວແບບດັ້ງເດີມ. ການເບິ່ງເຫັນຂໍ້ມູນແມ່ນໃຊ້ເພື່ອໃຫ້ຜູ້ເບິ່ງເຫັນຄວາມເຂົ້າໃຈກ່ຽວກັບຂໍ້ມູນ, ສະນັ້ນກາຟິກແມ່ນຢູ່ໃນການບໍລິການສື່ສານຂໍ້ມູນ.
ເຖິງຢ່າງໃດກໍ່ຕາມ, ພວກເຮົາຈະ ນຳ ໃຊ້ຂໍ້ມູນທີ່ເປັນແນວພັນທີ່ສ້າງສັນເພື່ອໃຫ້ພວກເຮົາສາມາດສ້າງຮູບແບບກາຟິກທີ່ ໜ້າ ສົນໃຈແລະມີຄວາມ ໝາຍ, ດັ່ງນັ້ນຂໍ້ມູນແມ່ນຢູ່ໃນການບໍລິການຂອງກາຟິກ. ແນ່ນອນວ່າ, ລະບຽບວິໄນ ໜຶ່ງ ແມ່ນພົວພັນກັນແລະຂັດແຍ້ງກັບສິ່ງອື່ນໆແຕ່ມັນກໍ່ເປັນການດີທີ່ຈະຮັບຮູ້ຄວາມຕັ້ງໃຈຂອງທ່ານເອງເມື່ອ ນຳ ໃຊ້ຂໍ້ມູນ.
ພວກເຮົາຈະເຮັດຫຍັງ?
p5.js ໃຫ້ພວກເຮົາເຂົ້າເຖິງຂໍ້ມູນໄດ້ໄວແລະງ່າຍດາຍທີ່ມາຈາກການວິເຄາະເອກະສານສຽງ (ຄືກັບ MP3). ພວກເຮົາ ກຳ ລັງໃຊ້ p5.fft ເພື່ອວິເຄາະຄວາມຖີ່ຕ່າງໆ (ເບດແລະສັ່ນ) ພາຍໃນສຽງຍ້ອນວ່າມັນຫຼີ້ນກັບແລະເຫັນພາບພະລັງງານຫລືຄວາມຖີ່ຂອງຄວາມຖີ່ດັ່ງກ່າວ.
ເພື່ອໃຫ້ພວກເຮົາສາມາດເບິ່ງເຫັນ 'ຮູບຊົງ' ຂອງສຽງໃນເວລາທີ່ມັນຫລິ້ນ, ພວກເຮົາບໍ່ພຽງແຕ່ຕ້ອງການສະແດງຄວາມກວ້າງຂອງສຽງໃນປະຈຸບັນເທົ່ານັ້ນແຕ່ເກັບເອົາ 'ຂໍ້ມູນ' ຂອງຂໍ້ມູນ. ນີ້ຈະຊ່ວຍໃຫ້ພວກເຮົາສະແດງປະຫວັດການເຄື່ອນໄຫວຂອງຄຸນຄ່າ.
ເພື່ອສະແດງຈຸດຂໍ້ມູນຂອງພວກເຮົາ, ພວກເຮົາຈະສ້າງຊຸດ arcs ທີ່ເຂັ້ມຂຸ້ນຈາກສູນກາງຫາຂອບນອກຂອງ ໜ້າ ຈໍ. ຄວາມຍາວຂອງធ្នូຈະເປັນຕົວແທນຂອງຄວາມກວ້າງຂອງຂໍ້ມູນ. ພວກເຮົາຍັງຈະໃຊ້ການເຂົ້າລະຫັດສາຍຕາອື່ນໆ ສຳ ລັບຂໍ້ມູນຂອງພວກເຮົາເຊັ່ນວ່ານ້ ຳ ໜັກ ເສັ້ນແລະສີ.
ເຮົາຈະຮຽນຫຍັງ?
ການເຮັດວຽກຜ່ານລະຫັດ, ພວກເຮົາຈະກວມເອົາ:
- ການຕັ້ງຄ່າແຜນວາດ p5 ໃໝ່
- ການໂຫຼດແລະວິເຄາະສຽງ
- ການສ້າງແຜນທີ່ມູນຄ່າໃຫ້ແກ່ອົງປະກອບທີ່ເບິ່ງເຫັນເຊັ່ນ: ຂະ ໜາດ, ຮູບຮ່າງແລະສີ
- ການ ນຳ ໃຊ້ຫ້ອງຮຽນເພື່ອແຕ້ມ, ຮັກສາສະພາບຂອງພາບເຄື່ອນໄຫວແລະຂໍ້ມູນຂອງພວກເຮົາແລະເຮັດໃຫ້ລະຫັດຂອງພວກເຮົາສາມາດ ນຳ ໃຊ້ໄດ້ອີກ.
ເອກະສານຢູ່ໃສ?
ບັນດາເອກະສານ ສຳ ລັບພາບເຄື່ອນໄຫວແມ່ນຖືກຈັດຢູ່ໃນ OpenProcessing, ເປັນເວທີທີ່ດີ ສຳ ລັບການແບ່ງປັນ, ຄົ້ນພົບແລະຊອກຫາແຜນວາດຂອງຄົນອື່ນ. ມັນເປັນສະຖານທີ່ທີ່ດີທີ່ທ່ານຄວນລະຫັດເຊັ່ນກັນ.
ດັ່ງທີ່ພວກເຮົາ ກຳ ລັງໃຊ້ຂໍ້ມູນສຽງ, ທ່ານຕ້ອງການໄຟລ໌ MP3 ເພື່ອລາກເຂົ້າໄປໃນແຜນວາດ. ພວກເຮົາຈະ ກຳ ນົດແຜນວາດຮູບ ໃໝ່ ໃນ OpenProcessing; ນີ້ແມ່ນວິທີທີ່ຮູບແຕ້ມຂອງທ່ານຈະເບິ່ງເມື່ອພວກເຮົາໄດ້ໂຫລດສຽງ, ເອົາຂໍ້ມູນແລະແຕ້ມຮູບ 'ຂໍ້ມູນ' ແບບງ່າຍດາຍ:
ແລະນີ້ແມ່ນວິທີການແຕ້ມຮູບ ສຳ ເລັດຈະມີລັກສະນະ:
ອີກທາງເລືອກ ໜຶ່ງ, ທ່ານຍັງສາມາດໃຊ້ p5.js ບັນນາທິການທາງອິນເຕີເນັດຫລືພຽງແຕ່ລວມເອົາຫ້ອງສະຫມຸດເຂົ້າໃນໂຄງການຂອງທ່ານເອງຜ່ານການດາວໂຫລດຫລື CDN.
01. ເລີ່ມຕົ້ນແຕ້ມຮູບ ໃໝ່
ໄດ້ຮັບບັນຊີ OpenProcessing ໂດຍບໍ່ເສຍຄ່າແລະຈາກ ໜ້າ ໂປຼໄຟລ໌ຂອງທ່ານ, ກົດປຸ່ມສ້າງ A Sketch. ຫຼັງຈາກນັ້ນມັນຈະສ້າງແຜນວາດຮູບແບບພື້ນຖານທີ່ສຸດເຊິ່ງປະກອບດ້ວຍສອງ ໜ້າ ທີ່ຂອງ p5.js:
- ຕັ້ງຄ່າ() - ອັນນີ້ໃຊ້ໄດ້ພຽງຄັ້ງດຽວ, ແລະໃຊ້ໃນການຕັ້ງກະປnewອງ ໃໝ່
- ແຕ້ມ () - ນີ້ແມ່ນບ່ອນທີ່ທ່ານໃສ່ລະຫັດທີ່ທ່ານຕ້ອງການແລ່ນທຸກໆກອບ
ທ່ານຈະສັງເກດເຫັນວ່າ ພື້ນຫລັງ () ເອີ້ນວ່າພຽງແຕ່ຄັ້ງດຽວໃນການສ້າງຕັ້ງ. ສິ່ງນີ້ຈະເຮັດໃຫ້ ໜ້າ ຈໍສະອາດຂຶ້ນ, ສະນັ້ນຖ້າທ່ານຕ້ອງການລ້າງ ໜ້າ ຈໍທຸກໆກອບ, ໃຫ້ລວມທັງສິ່ງນີ້ໃນຕອນເລີ່ມຕົ້ນ ແຕ້ມ () ເຮັດວຽກຄືກັນ.
ມີການຫຼີ້ນລະຫັດຢູ່ບ່ອນນີ້, ໂດຍໃຊ້ສອງສາມຕົວຢ່າງທີ່ທ່ານສາມາດຊອກຫາໃນເວັບໄຊທ໌ p5.js.
02. ສ້າງ sketch ຄັ້ງ ທຳ ອິດໂດຍໃຊ້ຂໍ້ມູນສຽງ
ໄປເບິ່ງຕົວຢ່າງເລີ່ມຕົ້ນຂອງຂ້ອຍ.
ກົດປຸ່ມຫຼີ້ນແລະທ່ານຈະເຫັນຂໍ້ຄວາມບາງຢ່າງທີ່ຮ້ອງຂໍໃຫ້ທ່ານລົງໄຟລ໌ MP3 ລົງເທິງຜ້າໃບ. ລໍຖ້າສອງສາມວິນາທີ ສຳ ລັບມັນ ສຳ ເລັດການອັບໂຫລດແລ້ວກົດປຸ່ມຜ້າໃບເພື່ອເລີ່ມການສາຍ. ທ່ານຄວນຈະເຫັນຮູບໄຂ່ຫຼັງ, ຕິດຕາມຫນູຂອງທ່ານ, ເຊິ່ງ ກຳ ລັງປັບຂະ ໜາດ ແລະປ່ຽນສີພ້ອມກັບຄວາມກວ້າງຂອງສຽງເບດໃນເພງທີ່ທ່ານອັບໂຫລດ.
ລະຫັດສ່ວນໃຫຍ່ແມ່ນຖືກສະແດງຄວາມເຫັນແຕ່ໃຫ້ເບິ່ງບາງສ່ວນຂອງຫຼັກ:
ສິດທິໃນຕອນຕົ້ນຂອງການແຕ້ມຮູບ, ລ່ວງຫນ້າ ຕັ້ງຄ່າ(), ພວກເຮົາໄດ້ສ້າງຕົວແປທົ່ວໂລກບາງຢ່າງ.
ພາຍໃນ ຕັ້ງຄ່າ() ພວກເຮົາມີສອງສາຍ ສຳ ຄັນ:
colorMode (HSB, 360,100,100);
colorMode () ຊ່ວຍໃຫ້ທ່ານສາມາດຕັ້ງຄ່າ p5.js ເຮັດວຽກພາຍໃນພື້ນທີ່ສີຕ່າງໆເຊັ່ນ RGB ແລະ HSB, ພ້ອມທັງສາມາດ ກຳ ນົດຂະ ໜາດ ທີ່ທ່ານໃຊ້ໃນການ ນຳ ທາງຊ່ອງທາງຕ່າງໆ. ນີ້ພວກເຮົາໄດ້ ກຳ ນົດລະດັບ HSB ເຖິງຄ່າຕ່າງໆທີ່ທ່ານອາດຈະຄຸ້ນເຄີຍກັບຈາກ Photoshop ຫຼາຍກ່ວາການຕັ້ງຄ່າເລີ່ມຕົ້ນ (0 ເຖິງ 255).
canvas.drop (gotFile);
ຟັງຊັນ p5.js ທີ່ມີປະໂຫຍດສູງສຸດນີ້ຊ່ວຍໃຫ້ພວກເຮົາຟັງ ສຳ ລັບເຫດການຫຼຸດລົງຂອງເອກະສານໃດໆເທິງຜ້າໃບຂອງພວກເຮົາ. ເມື່ອພວກເຮົາໄດ້ຮັບເຫດການຫຼຸດລົງຂອງເອກະສານ, ພວກເຮົາໂທຫາ gotFile () ເພື່ອກວດເບິ່ງວ່າມັນແມ່ນປະເພດທີ່ຖືກຕ້ອງແລະເລີ່ມວິເຄາະສຽງ.
soundFile = p5.SoundFile ໃໝ່ (file.data);
ນີ້ພວກເຮົາ ກຳ ລັງປ່ຽນຂໍ້ມູນໄຟລ໌ທີ່ຖືກຫຼຸດລົງຂອງພວກເຮົາໄປເປັນ a SoundFile. ເມື່ອພວກເຮົາມີເອກະສານສຽງ, ພວກເຮົາໃຊ້ລະຫັດຕໍ່ໄປນີ້:
- initSound () ການຈັດຕັ້ງຕົວຢ່າງ FFT ໃໝ່ (ເພື່ອວິເຄາະສຽງ)
- analyseSound () ການວິເຄາະທ່ອນໄມ້ປະຈຸບັນຂອງທຸກໆສຽງ
- getNewSoundDataValue () ການນໍາໃຊ້ fft.getEnergy () ທຸກໆກອບເພື່ອໃຫ້ພວກເຮົາມີຄວາມກວ້າງຂອງສຽງ. ສິ່ງນີ້ຈະຖືກປ່ຽນຈາກລະດັບເລີ່ມຕົ້ນຂອງມັນຕັ້ງແຕ່ 0 ເຖິງ 255 ຫາ 0 ຫາ 1.
ຄຳ ແນະ ນຳ: ມັນເປັນປະໂຫຍດທີ່ຈະປ່ຽນຂໍ້ມູນຂອງທ່ານໃຫ້ຢູ່ໃນລະດັບ 0 ເຖິງ 1 ເພາະວ່າທ່ານສາມາດໃຊ້ມັນໄດ້ງ່າຍຂື້ນເມື່ອທ່ານແຕ້ມຂໍ້ມູນໃຫ້ເປັນຕົວ ກຳ ນົດການເບິ່ງເຫັນເຊັ່ນ: ຂະ ໜາດ, ຄວາມໄວແລະສີ.
ໃຫ້ເບິ່ງໃນ ໜ້າ ທີ່ແຕ້ມ (). ສາຍນີ້ຮຽກຮ້ອງຄວາມກວ້າງຂວາງໃນປະຈຸບັນ (ລະຫວ່າງ 0 ເຖິງ 1) ຂອງຄວາມຖີ່ຂອງສຽງເບດແລະມອບ ໝາຍ ໃຫ້ມັນປ່ຽນແປງໄດ້ myDataVal.
var myDataVal = getNewSoundDataValue (“ ເບດ”)
ພວກເຮົາເອີ້ນວ່າປະເພນີຂອງພວກເຮົາ getDataHSBColor () ໜ້າ ທີ່ທີ່ມີມູນຄ່າຂໍ້ມູນຂອງພວກເຮົາແຍກຕ່າງຫາກກັບ Hue, Saturation ແລະ Brightness ແລະສົ່ງຄືນໃຫ້ພວກເຮົາມີສີສັນ. ຂໍ້ມູນທີ່ສູງຂື້ນ, ສີຈະຍ້າຍໄປທົ່ວບ່ອນທີ່ມີສີສັນສົດໃສແລະມີສີສັນທີ່ສົດໃສແລະອີ່ມຕົວຫລາຍຂື້ນ.
var myDataColor = getDataHSBColor (myDataVal);
ກ່ອນທີ່ພວກເຮົາສາມາດແຕ້ມຮູບຮີຂອງພວກເຮົາພວກເຮົາຕ້ອງການໃຫ້ມັນມີຂະ ໜາດ, ໂດຍການຄູນ 200 (px) ໂດຍມູນຄ່າຂໍ້ມູນຂອງພວກເຮົາ. ດັ່ງນັ້ນ, ຄຸນຄ່າທີ່ສູງກວ່າ, ຮູບຮີ.
var myEllipseSize = 200 * myDataVal;
03. ນຳ ໃຊ້ຂໍ້ມູນທາງສຽງເປັນແປງສີ
ເພື່ອຄວາມມ່ວນຊື່ນເລັກໆນ້ອຍໆ, ໃຫ້ ຄຳ ເຫັນອອກທີ່ ພື້ນຫລັງ () ໂທໃນ ແຕ້ມ () ຟັງຊັນແລະທ່ານສາມາດໃຊ້ສຽງສັ່ນສະເທືອນສຽງຂອງທ່ານເພື່ອທາສີ!
05. ສຳ ເລັດຮູບແຕ້ມຂອງທ່ານ
ການແຕ້ມຮູບຂໍ້ມູນຮູບຮ່າງ ສຳ ລັບຄວາມຖີ່ ໜຶ່ງ ຄັ້ງແມ່ນດີຫຼາຍແຕ່ດຽວນີ້ພວກເຮົາຈະສ້າງຊຸດຂໍ້ມູນ ສຳ ລັບທັງເບດແລະ treble. ພວກເຮົາຍັງຈະແຕ້ມຄ່າຂອງຄ່າຜ່ານມາເພື່ອຊ່ວຍພວກເຮົາໃຫ້ເຫັນຮູບຊົງຂອງສຽງໃຫ້ດີຂື້ນ.
ເຂົ້າເບິ່ງແຜນວາດສະບັບສົມບູນແບບນີ້, ແລ່ນມັນແລ້ວລົງ MP3 ໃສ່ມັນ.
ດຽວນີ້ທ່ານຈະເຫັນຊຸດຂອງ arcs ທີ່ອອກມາຈາກໃຈກາງຂອງ ໜ້າ ຈໍ. Arcs ແນວນອນແມ່ນການເບິ່ງເຫັນຂອງສຽງເບດແລະແນວຕັ້ງຕັ້ງອອກຈາກສຽງຂອງສຽງ MP3.
ເມື່ອເບິ່ງລະຫັດ, ທ່ານຈະເຫັນການຕັ້ງຄ່າ, ການໂຫຼດ, ການວິເຄາະແລະການໄດ້ຮັບຂໍ້ມູນຄືກັນກັບແຜນທີ່ສຸດທ້າຍ, ດັ່ງນັ້ນພວກເຮົາຈະບໍ່ສົນໃຈເລື່ອງນັ້ນ. ມີລະຫັດເລັກນ້ອຍຢູ່ທີ່ນີ້, ສະນັ້ນ, ຄືກັນກັບກ່ອນ ໜ້າ ນີ້, ໃຫ້ເອົາບາງຈຸດ ສຳ ຄັນ.
ແທນທີ່ຈະແຕ້ມ arcs ໂດຍກົງເຂົ້າ ແຕ້ມ (), ພວກເຮົາ ກຳ ລັງສ້າງບາງຊັ້ນຮຽນທີ່ ກຳ ຫນົດເອງ:
- ຊັ້ນຮຽນ RadialArc {} ເກັບຄ່າຂອງຂໍ້ມູນຂອງແຕ່ລະຄົນແລະແຕ້ມໄຟຟ້າ
- ຫ້ອງຮຽນ RadialArcs {} ຈັດການກັບຕົວຢ່າງ 'RadialArc' ຂອງພວກເຮົາ
ຄຳ ນິຍາມຂອງແຕ່ລະຊັ້ນມີຜູ້ກໍ່ສ້າງເຊິ່ງພວກເຮົາ ກຳ ລັງຕັ້ງຄ່າທີ່ ສຳ ຄັນບາງຢ່າງແລະຍັງໄດ້ຜ່ານພາລາມິເຕີທີ່ຊ່ວຍໃຫ້ພວກເຮົາປ່ຽນແປງພຶດຕິ ກຳ ຂອງຫ້ອງຮຽນ. ໃຫ້ພວກເຮົາເບິ່ງໃກ້ໆກັບພວກມັນໃນຕອນນີ້.
ຊັ້ນຮຽນ RadialArc {}:
ນີ້ແມ່ນຊັ້ນທີ່ເກັບຄ່າຂໍ້ມູນແບບດ່ຽວແລະແຕ້ມຄູ່ຂອງວົງສີທີ່ມີຮູບຊົງ.
setValue () ແລະ getValue () ເຮັດໃຫ້ພວກເຮົາສາມາດເອົາຂໍ້ມູນເຂົ້າແລະອອກຈາກປະຕູໂຄ້ງແລະຍູ້ຂໍ້ມູນຜ່ານອາເລທີ່ຂອງພວກເຮົາເປັນການປັບປຸງຂໍ້ມູນ. redrawFromData () ເອີ້ນວ່າການຄິດຄືນ ໃໝ່ ແລະຄິດໄລ່ປະຕູໂຄ້ງ.
drawArc () ແມ່ນບ່ອນທີ່ພວກເຮົາເອີ້ນວ່າຫນ້າທີ່ p5.js ທີ່ມີປະໂຫຍດ ປະຕູໂຄ້ງ (). ປະຕູໂຄ້ງ () ແມ່ນໄວກ່ວາການເຮັດ trigonometry ຕົວເຮົາເອງແຕ່ພວກເຮົາ ຈຳ ເປັນຕ້ອງຜ່ານມັນສອງສາມຄ່າເຊັ່ນ: ຕຳ ແໜ່ງ, ຂະ ໜາດ ແລະທີ່ ສຳ ຄັນແມ່ນມຸມເລີ່ມຕົ້ນແລະຈຸດສຸດທ້າຍ ສຳ ລັບធ្នូຂອງພວກເຮົາ.
ມຸມນັ້ນຖືກວັດແທກເປັນ 'radians' ຫຼາຍກວ່າ degrees. radians ແມ່ນຄ້າຍຄືອົງສາແຕ່ໃນລະດັບທີ່ແຕກຕ່າງກັນ: 360 °ແມ່ນຄືກັນກັບ radians 2 x pi. P5.js ມີຂີດສ້າງທີ່ມີປະໂຫຍດ ສຳ ລັບ PI, HALF_PI ແລະ QUARTER_PI ແລະອື່ນໆ
ຊັ້ນຮຽນ RadialArcs {}:
ນີ້ແມ່ນຊັ້ນການຄຸ້ມຄອງທີ່ສ້າງຂບວນການຂອງພວກເຮົາ RadialArc {} ຮຽນແລະເກັບມ້ຽນຂໍ້ມູນເຫລົ່ານັ້ນໃຫ້ທັນສະ ໄໝ ໂດຍການຍ້າຍຂໍ້ມູນເຂົ້າແລະອອກຈາກແຕ່ລະອັນແລະໂທຫາດ້ວຍປະຕູໂຄ້ງ redrawFromData () ໜ້າ ທີ່.
ເພື່ອເລີ່ມຕົ້ນ RadialArcs () ຫ້ອງຮຽນ ສຳ ລັບ treble ແລະ bass, ມີເບິ່ງຢູ່ໃນ ຕັ້ງຄ່າ(). ທ່ານສາມາດເຫັນໄດ້ວ່າພວກເຮົາ ກຳ ລັງສ້າງສອງຢ່າງ RadialArcs () ກໍລະນີແລະຍັງຜ່ານໃນຕົວກໍານົດການ custom ຂອງພວກເຮົາ.
ຕົວ ກຳ ນົດເຫຼົ່ານັ້ນແມ່ນ: ຈຳ ນວນ arcs, ຂະ ໜາດ ຂອງ arcs ໃນແລະນອກ, ມຸມເລີ່ມຕົ້ນ, ນ້ ຳ ໜັກ ເສັ້ນສູງສຸດແລະລະດັບສີຂອງ hue. ໂດຍການສ້າງຊັ້ນຮຽນແບບປະເພນີດັ່ງກ່າວ, ມັນຊ່ວຍໃຫ້ພວກເຮົາໃຊ້ລະຫັດຂອງພວກເຮົາອີກເທື່ອ ໜຶ່ງ ແຕ່ຍັງເຮັດໃຫ້ແຕ່ລະຕົວຢ່າງເປັນສ່ວນບຸກຄົນໂດຍການສົ່ງຜ່ານຕົວ ກຳ ນົດເຫຼົ່ານີ້.
ເມື່ອວັດຖຸ arc ຖືກເລີ່ມຕົ້ນ, ທຸກໆກອບຈະເອີ້ນ updateRadialArcs () ແລະ drawRadialArcs () ພາຍໃນ p5 ຫຼັກ ແຕ້ມ () ຟັງຊັນ, ເຊິ່ງເປັນວິທີທີ່ພາບເຄື່ອນໄຫວປັບປຸງແລະຍ້າຍ.
06. ເອົາໄປຕື່ມ
ພວກເຮົາໄດ້ກວມເອົາຫຼາຍລະຫັດຢູ່ທີ່ນີ້ແຕ່ໂດຍພື້ນຖານແລ້ວຂ້ອຍຫວັງວ່າເຈົ້າຈະເຫັນວິທີທີ່ພວກເຮົາ ກຳ ລັງເອົາຂໍ້ມູນແລະ ນຳ ໃຊ້ກັບອົງປະກອບທີ່ເບິ່ງເຫັນເຊັ່ນ: ຂະ ໜາດ, ຕຳ ແໜ່ງ, ຄວາມຍາວ, ນ້ ຳ ໜັກ ແລະສີ.
ເພື່ອໄປຕື່ມອີກ, ຫຼີ້ນຮອບດ້ວຍ ຈຳ ນວນ arcs, ກຸ່ມແລະມຸມ. ປ່ຽນຂອບເຂດສີແລະສ້າງຫ້ອງຮຽນ ໃໝ່ ເພື່ອແຕ້ມຮູບທີ່ແຕກຕ່າງກັນ.
ໃນຕົວຢ່າງນີ້ພວກເຮົາໄດ້ ນຳ ໃຊ້ຂໍ້ມູນທີ່ມີການໄຫລວຽນມາຢ່າງຕໍ່ເນື່ອງແລະບວກກັບອັດຕາກອບໄວ, ມັນສ້າງພາບລວງຕາຂອງພາບເຄື່ອນໄຫວ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ບໍ່ແມ່ນຂໍ້ມູນທັງ ໝົດ ທີ່ເປັນແບບນັ້ນແລະສາມາດປັບປຸງຊ້າກວ່າເກົ່າ. ສຳ ລັບຂໍ້ມູນທີ່ຊ້າກ່ວານັ້ນ, ທ່ານຍັງສາມາດສ້າງພາບເຄື່ອນໄຫວທີ່ລຽບງ່າຍໂດຍ 'tweening' ພາບເຄື່ອນໄຫວຂອງຮູບຮ່າງຂອງທ່ານລະຫວ່າງປັດຈຸບັນແລະຂະ ໜາດ ເປົ້າ ໝາຍ ຂອງພວກມັນ.
ໂຊກດີກັບພາບເຄື່ອນໄຫວທີ່ມີຂໍ້ມູນຕໍ່ໄປຂອງທ່ານ!
ບົດຂຽນນີ້ຖືກຈັດພີມມາໃນສະບັບທີ 320 ຂອງສະບັບ ສຸດທິ, ວາລະສານທີ່ຂາຍດີທີ່ສຸດໃນໂລກ ສຳ ລັບນັກອອກແບບແລະພັດທະນາເວັບ. ຊື້ເລກທີ 320 ທີ່ນີ້ຫລື ຈອງທີ່ນີ້.
